Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Vuesaxを使ってみる
Search
TanakaMidnight
December 20, 2018
Technology
0
430
Vuesaxを使ってみる
TanakaMidnight
December 20, 2018
Tweet
Share
More Decks by TanakaMidnight
See All by TanakaMidnight
APIを使う、作る
tanakamidnight
0
150
Vue.jsで書くAdobe XD Plugin
tanakamidnight
0
540
Web App created by Vue.js / Firebase (RxFire)
tanakamidnight
0
410
Firebaseここ最近(2019/01~05)の新機能(Osaka, Web寄り)
tanakamidnight
1
450
Vue.jsで作るAdobeXDプラグイン
tanakamidnight
0
680
できるようになるかもしれないVueNative
tanakamidnight
0
31
ハンズオンを支えた技術
tanakamidnight
0
250
Vue.jsの始め方
tanakamidnight
0
360
FirebaseでWebサービスを作った(てる)話
tanakamidnight
0
540
Other Decks in Technology
See All in Technology
会社紹介資料 / Sansan Company Profile
sansan33
PRO
6
380k
JTCにおける内製×スクラム開発への挑戦〜内製化率95%達成の舞台裏/JTC's challenge of in-house development with Scrum
aeonpeople
0
250
まずはマネコンでちゃちゃっと作ってから、それをCDKにしてみよか。
yamada_r
2
120
フルカイテン株式会社 エンジニア向け採用資料
fullkaiten
0
8.8k
💡Ruby 川辺で灯すPicoRubyからの光
bash0c7
0
120
Claude Code でアプリ開発をオートパイロットにするためのTips集 Zennの場合 / Claude Code Tips in Zenn
wadayusuke
5
760
なぜスクラムはこうなったのか?歴史が教えてくれたこと/Shall we explore the roots of Scrum
sanogemaru
5
1.7k
AIエージェントで90秒の広告動画を制作!台本・音声・映像・編集をつなぐAWS最新アーキテクチャの実践
nasuvitz
3
340
IoT x エッジAI - リアルタイ ムAI活用のPoCを今すぐ始め る方法 -
niizawat
0
110
プラットフォーム転換期におけるGitHub Copilot活用〜Coding agentがそれを加速するか〜 / Leveraging GitHub Copilot During Platform Transition Periods
aeonpeople
1
230
Unlocking the Power of AI Agents with LINE Bot MCP Server
linedevth
0
110
複数サービスを支えるマルチテナント型Batch MLプラットフォーム
lycorptech_jp
PRO
1
880
Featured
See All Featured
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
Why Our Code Smells
bkeepers
PRO
339
57k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
Making the Leap to Tech Lead
cromwellryan
135
9.5k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Site-Speed That Sticks
csswizardry
10
820
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Building Adaptive Systems
keathley
43
2.7k
Typedesign – Prime Four
hannesfritz
42
2.8k
Into the Great Unknown - MozCon
thekraken
40
2k
Code Review Best Practice
trishagee
71
19k
Transcript
Vuesaxを使ってみる OsakaVueLT 2018/12/17 @TanakaMidnight
自己紹介 @TanakaMidnight SE Lang : Python(Django), Node.js Infra : Firebase
Etc : Line 関係 (MessagingAPI, LIFF, Clova)
Vuesaxとは Vue.js コンポーネントライブラリ ・ BootStrap みたいに 簡単にレスポンシブなデザインをする。 ・よく使いそうな UI のパーツ
( コンポーネント ) が用意されているので、 いちいち作らなくても済む。
Vuesaxの特徴 ・今風ないい感じのデザイン。 ・よく使う便利な UI パーツが多い。 Dialog, Loading, Tab, Table
など 参考動画 : https://vimeo.com/276329344 ・部分的に適用が可能。 ・比較的ドキュメントが見やすい。(ただし英語)
Install # install vuesax npm install vuesax # install material-icons
npm install material-icons
Use [main.js] import Vue from 'vue' new Vue({ el: '#app',
router, components: { App }, template: '<App/>' });
Use [main.js] import Vue from 'vue' import Vuesax from 'vuesax'
import 'vuesax/dist/vuesax.css' import 'material-icons/iconfont/material-icons.css'; Vue.use(Vuesax) new Vue({ ←追加
比較Demo
似たようなライブラリ ・ Vuetify より MaterialDesgn に準拠 (Google のサイトっぽい ) しているデザイン
・ BootstrapVue jQuery に依存しない Bootstrap ・ Materialize Vue.js に特化していおらず、見た目は Vuetify と似ている。
Materialize Logo ・・・ちなみに
Materialize Logo ほぼ一致
まとめ ・ Vue で使える UI コンポーネントライブラリは いくつかあるのでいろいろ触ってみると面白い。 ・雰囲気凝ったっぽいデザインにするなら Vuesax
はアリかも。