這篇文章給大家分享的是有關(guān)vue-material指的是什么的內(nèi)容。小編覺得挺實(shí)用的,因此分享給大家做個(gè)參考。一起跟隨小編過來看看吧。
vue-material是一個(gè)建立在谷歌的Material Design基礎(chǔ)上的輕量級框架,是一個(gè)實(shí)現(xiàn)Google像素材料設(shè)計(jì)的Vue組件庫,它提供了適合所有現(xiàn)代Web瀏覽器的內(nèi)置動(dòng)態(tài)主題的組件,它的API也簡單明了。
Vue Material 是一個(gè)輕量級的框架, 建立在谷歌的 Material Design 基礎(chǔ)上。 設(shè)計(jì)強(qiáng)大的和美觀的web應(yīng)用并適用于不同的屏幕。
vue material是一個(gè)實(shí)現(xiàn)Google像素材料設(shè)計(jì)的Vue組件庫,它提供了適合所有現(xiàn)代Web瀏覽器的內(nèi)置動(dòng)態(tài)主題的組件,它的API也簡單明了。
你可以動(dòng)態(tài)地生成和使用主題,根據(jù)自己的需求只用組件,UI元素與組件的優(yōu)勢在于可以更簡單的使用API和其他的。
它提供一組可重用的組件和一系列的UI元素,使用 Vue 2.0 建立支持 主流的瀏覽器 的應(yīng)用。
官網(wǎng):http://vuematerial.materializecss.cn/#/
安裝方法
引入 Roboto 和谷歌 Icons 從谷歌 CDN:
通過 npm 或 yarn 來安裝 Vue Material
npm install vue-material yarn add vue-material
* 其他包管理,比如 JSPM 和 Bower 暫不支持。
或從Github 下載腳本和樣式并引入到HTML中:(下載地址https://github.com/marcosmoura/vue-material/archive/master.zip)
用法
啟用 Vue Material 在你的應(yīng)用中通過 Vue.use()。 您也可以單個(gè)單個(gè)的啟用組件:
// To import the whole library import Vue from 'vue' import VueMaterial from 'vue-material' import 'vue-material/dist/vue-material.css' Vue.use(VueMaterial) // Or to import individual components import Vue from 'vue' import VueMaterial from 'vue-material' import 'vue-material/dist/components/mdCore/index.css' //Required to boot vue material import 'vue-material/dist/components/mdButton/index.css' import 'vue-material/dist/components/mdIcon/index.css' import 'vue-material/dist/components/mdSidenav/index.css' import 'vue-material/dist/components/mdToolbar/index.css' Vue.use(VueMaterial.mdCore) //Required to boot vue material Vue.use(VueMaterial.mdButton) Vue.use(VueMaterial.mdIcon) Vue.use(VueMaterial.mdSidenav) Vue.use(VueMaterial.mdToolbar)
應(yīng)用主題
為了讓 Vue Material 正常工作,你需要配置一個(gè)默認(rèn)的主題。 你也可以一次性注冊多個(gè)主題。
單個(gè)主題
Vue.material.theme.register('default', { primary: 'cyan', accent: 'pink' })
多個(gè)主題
Vue.material.theme.registerAll({ default: { primary: 'cyan', accent: 'pink' }, indigo: { primary: 'indigo', accent: 'pink' } })
應(yīng)用你的主題到每一部分代碼,你需要使用 v-md-theme 指令:
My AppMy Button
感謝各位的閱讀!關(guān)于vue-material指的是什么就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,讓大家可以學(xué)到更多知識。如果覺得文章不錯(cuò),可以把它分享出去讓更多的人看到吧!