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
440
Vuesaxを使ってみる
TanakaMidnight
December 20, 2018
Tweet
Share
More Decks by TanakaMidnight
See All by TanakaMidnight
APIを使う、作る
tanakamidnight
0
160
Vue.jsで書くAdobe XD Plugin
tanakamidnight
0
540
Web App created by Vue.js / Firebase (RxFire)
tanakamidnight
0
420
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
550
Other Decks in Technology
See All in Technology
AI時代の開発を加速する組織づくり - ブログでは書けなかったリアル
hiro8ma
1
300
SCONE - 動画配信の帯域を最適化する新プロトコル
kazuho
1
320
Data Hubグループ 紹介資料
sansan33
PRO
0
2.2k
研究開発部メンバーの働き⽅ / Sansan R&D Profile
sansan33
PRO
3
20k
ゼロコード計装導入後のカスタム計装でさらに可観測性を高めよう
sansantech
PRO
1
180
Copilot Studio ハンズオン - 生成オーケストレーションモード
tomoyasasakimskk
0
220
NLPコロキウム20251022_超効率化への挑戦: LLM 1bit量子化のロードマップ
yumaichikawa
2
400
アウトプットから始めるOSSコントリビューション 〜eslint-plugin-vueの場合〜 #vuefes
bengo4com
3
1.7k
AI駆動で進める依存ライブラリ更新 ─ Vue プロジェクトの品質向上と開発スピード改善の実践録
sayn0
1
260
デザインとエンジニアリングの架け橋を目指す OPTiMのデザインシステム「nucleus」の軌跡と広げ方
optim
0
100
OCIjp_Oracle AI World_Recap
shinpy
1
170
QA業務を変える(!?)AIを併用した不具合分析の実践
ma2ri
0
130
Featured
See All Featured
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.1k
Agile that works and the tools we love
rasmusluckow
331
21k
Keith and Marios Guide to Fast Websites
keithpitt
411
23k
How STYLIGHT went responsive
nonsquared
100
5.8k
Designing for Performance
lara
610
69k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
116
20k
Making Projects Easy
brettharned
120
6.4k
The Pragmatic Product Professional
lauravandoore
36
7k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.7k
4 Signs Your Business is Dying
shpigford
185
22k
The Language of Interfaces
destraynor
162
25k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
10
880
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
はアリかも。