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
240
Vuesaxを使ってみる
TanakaMidnight
December 20, 2018
Tweet
Share
More Decks by TanakaMidnight
See All by TanakaMidnight
APIを使う、作る
tanakamidnight
0
24
Vue.jsで書くAdobe XD Plugin
tanakamidnight
0
400
Web App created by Vue.js / Firebase (RxFire)
tanakamidnight
0
220
Firebaseここ最近(2019/01~05)の新機能(Osaka, Web寄り)
tanakamidnight
1
260
Vue.jsで作るAdobeXDプラグイン
tanakamidnight
0
350
できるようになるかもしれないVueNative
tanakamidnight
0
19
ハンズオンを支えた技術
tanakamidnight
0
190
Vue.jsの始め方
tanakamidnight
0
200
FirebaseでWebサービスを作った(てる)話
tanakamidnight
0
280
Other Decks in Technology
See All in Technology
ログ集約基盤をCloudWatchからOpenSearchに変えてみた
yuhta28
0
130
EC/CRMの自社サービス開発をマネジメントするようになって1年でやってきたこととこれから / devio2022-takano-sho-road-to-good-development-team-management
masaru_b_cl
0
380
データ分析のためのAWS Well-Architected -Data Analytics Lens-
maru1981
0
220
初めてのLambdaによる運用自動化 ~ 不要リソース削除大作戦 ~
kentosuzuki
1
350
ソフトバンクでのMECの取り組みについて
sbtechnight
0
300
Djangoで組織とユーザーの権限管理をやってみよう #devio2022
seiichi1101
0
370
JAWS-UG 朝会 #36 登壇資料
takakuni
1
530
Microsoft Data Analytics trends : ”Lakehouse” , ”Data Mesh"
ryomaru0825
2
110
金融スタートアップの上場準備で大事にしたマインドセット / 2022-08-04-the-mindset-in-preparing-for-ipo
stajima
0
300
塩漬けにしているMySQL 8.0.xxをバージョンアップしたくなる、ここ数年でのMySQL 8.0の改善点 / MySQL Update 202208
yoshiakiyamasaki
1
570
Goで実装するブランドネットワークとの接続ポイント
pongzu
2
260
年700万円損するサーバレスの 認可システムをご紹介します!!
higuuu
3
310
Featured
See All Featured
Building Adaptive Systems
keathley
25
1.1k
Visualization
eitanlees
125
12k
How To Stay Up To Date on Web Technology
chriscoyier
780
250k
Web Components: a chance to create the future
zenorocha
303
40k
Art Directing for the Web. Five minutes with CSS Template Areas
malarkey
196
9.5k
In The Pink: A Labor of Love
frogandcode
131
21k
It's Worth the Effort
3n
172
26k
The Mythical Team-Month
searls
210
39k
Art, The Web, and Tiny UX
lynnandtonic
280
18k
Learning to Love Humans: Emotional Interface Design
aarron
261
37k
Fireside Chat
paigeccino
13
1.4k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
11
4.8k
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
はアリかも。