Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Vuesaxを使ってみる
TanakaMidnight
December 20, 2018
Technology
0
270
Vuesaxを使ってみる
TanakaMidnight
December 20, 2018
Tweet
Share
More Decks by TanakaMidnight
See All by TanakaMidnight
APIを使う、作る
tanakamidnight
0
41
Vue.jsで書くAdobe XD Plugin
tanakamidnight
0
450
Web App created by Vue.js / Firebase (RxFire)
tanakamidnight
0
230
Firebaseここ最近(2019/01~05)の新機能(Osaka, Web寄り)
tanakamidnight
1
290
Vue.jsで作るAdobeXDプラグイン
tanakamidnight
0
400
できるようになるかもしれないVueNative
tanakamidnight
0
22
ハンズオンを支えた技術
tanakamidnight
0
200
Vue.jsの始め方
tanakamidnight
0
220
FirebaseでWebサービスを作った(てる)話
tanakamidnight
0
300
Other Decks in Technology
See All in Technology
Raspberry Pi Camera 3 介紹
piepie_tw
PRO
0
170
イ良い日ンマを作る(USBストレージ容量偽装の手法) / USB Storage Capacity Faking Techniques
shutingrz
0
560
01_ユーザーリサーチ実施の進め方
kouzoukaikaku
0
760
インフラ技術基礎勉強会 開催概要
toru_kubota
0
180
MarvelClient Upgrade 64bit クライアントへの自動アップグレード設定
mitsuru_katoh
0
190
SPA・SSGでSSRのようなOGP対応!
simo123
2
160
あつめたデータをどう扱うか
skrb
2
170
AI Builderについて
miyakemito
1
980
USB PD で迎える AC アダプター大統一時代
puhitaku
2
2k
NGINXENG JP#2 - 3-NGINX Plus・プロダクトのアップデート
hiropo20
0
250
SSMパラメーターストアでクロススタック参照の罠を回避する
shuyakinjo
0
7.9k
Cloudflare Workersで動くOG画像生成器
aiji42
1
500
Featured
See All Featured
Making Projects Easy
brettharned
102
4.8k
Atom: Resistance is Futile
akmur
256
24k
Creatively Recalculating Your Daily Design Routine
revolveconf
207
11k
Statistics for Hackers
jakevdp
785
210k
5 minutes of I Can Smell Your CMS
philhawksworth
198
18k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
270
12k
Product Roadmaps are Hard
iamctodd
38
7.7k
Build The Right Thing And Hit Your Dates
maggiecrowley
22
1.4k
Designing on Purpose - Digital PM Summit 2013
jponch
108
5.9k
Clear Off the Table
cherdarchuk
79
290k
10 Git Anti Patterns You Should be Aware of
lemiorhan
643
54k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
13
1.1k
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
はアリかも。