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
350
Vuesaxを使ってみる
TanakaMidnight
December 20, 2018
Tweet
Share
More Decks by TanakaMidnight
See All by TanakaMidnight
APIを使う、作る
tanakamidnight
0
110
Vue.jsで書くAdobe XD Plugin
tanakamidnight
0
520
Web App created by Vue.js / Firebase (RxFire)
tanakamidnight
0
290
Firebaseここ最近(2019/01~05)の新機能(Osaka, Web寄り)
tanakamidnight
1
370
Vue.jsで作るAdobeXDプラグイン
tanakamidnight
0
520
できるようになるかもしれないVueNative
tanakamidnight
0
27
ハンズオンを支えた技術
tanakamidnight
0
220
Vue.jsの始め方
tanakamidnight
0
280
FirebaseでWebサービスを作った(てる)話
tanakamidnight
0
400
Other Decks in Technology
See All in Technology
日本におけるデータエンジニアリングのこれまでとこれから
foursue
16
4.2k
一生覚えておきたい「システム開発=コミュニケーション」〜初めての実務案件振り返りLT〜
maimyyym
0
100
プロトタイピングによる不確実性の低減 / Reducing Uncertainty through Prototyping
ohbarye
5
380
本当のAWS基礎
toru_kubota
0
490
MLOpsの「壁」を乗り越える、LINEヤフーの Data Quality as Code
lycorptech_jp
PRO
5
400
オーナーシップを持つ領域を明確にする
konifar
13
3.1k
TechFeed Experts Night#27 〜 フロントエンドフレームワーク最前線 (Svelte)
baseballyama
1
180
Janus
bkuhlmann
1
490
KubeConにproposalを送りたい人へのアドバイス
sat
PRO
3
230
生産性向上チームの紹介
cybozuinsideout
PRO
1
860
マルチアカウント環境への発見的統制の導入
ch1aki
1
1.3k
Reducing Cross-Zone Egress at Spotify with Custom gRPC Load Balancing Recap
koh_naga
0
200
Featured
See All Featured
Visualization
eitanlees
136
14k
Happy Clients
brianwarren
92
6.4k
Creatively Recalculating Your Daily Design Routine
revolveconf
210
11k
Build your cross-platform service in a week with App Engine
jlugia
225
17k
BBQ
matthewcrist
80
8.8k
Pencils Down: Stop Designing & Start Developing
hursman
117
11k
Writing Fast Ruby
sferik
621
60k
Into the Great Unknown - MozCon
thekraken
10
990
The Mythical Team-Month
searls
216
42k
Debugging Ruby Performance
tmm1
70
11k
Building a Modern Day E-commerce SEO Strategy
aleyda
17
6.4k
Why Our Code Smells
bkeepers
PRO
331
56k
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
はアリかも。