iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 24
0
Modern Web

Vue.js 30天系列 第 24

Vue.js 24 - 現成UI - Material Design

Bootstrap 以外的常用樣式 - Material Design,小弟用得少,只介紹官方推薦的 vue-mdl(Material Design Lite),支援 Vue 2.x

已提供組件

  • Checkbox
  • Badge
  • Switch
  • Radio
  • IconToggle
  • Button
  • AnchorButton
  • Progress
  • Spinner
  • Slider
  • Textfield
  • Tooltip
  • Menu
  • MenuItem
  • Card
  • Snackbar
  • Select
  • Dialog
  • Tabs
  • Tab
  • Chip
  • Layout
  • LayoutHeaderRow
  • LayoutDrawer
  • LayoutContent

安裝

透過npm

npm install --save vue-mdl

透過CDN

<script src="//rawgit.com/posva/vue-mdl/master/dist/vue-mdl.js"></script>
<!-- minify -->
<script src="//rawgit.com/posva/vue-mdl/master/dist/vue-mdl.min.js"></script>

使用方式

import VueMdl from 'vue-mdl'
import Vue from 'vue'

Vue.use(VueMdl)

new Vue({
  el: '#app',
  data: {
    checked: false
  }
})
<div id="app">
    <mdl-checkbox :checked.sync='checked'>Checkbox</mdl-checkbox>
</div>

官方文件 - 使用說明


上一篇
Vue.js 23 - 現成UI - Bootstrap
下一篇
Vue.js 25 - 其他現成UI
系列文
Vue.js 30天30

尚未有邦友留言

立即登入留言