vue-material是什麼？-前端問答-PHP中文網

vue-material是什麼？

青灯夜游

發布： 2020-11-12 16:22:45

原創

3786 人瀏覽過

vue-material是一個建立在Google的Material Design基礎上的輕量級框架，是一個實現Google像素材料設計的Vue元件庫，它提供了適合所有現代Web瀏覽器的內建動態主題的元件，它的API也簡單明了。

vue-material是什麼？

Vue Material 是一個輕量級的框架，建立在Google的 Material Design 基礎上。設計強大的和美觀的web應用並適用於不同的螢幕。

vue-material是什麼？

vue material是實現Google像素材質設計的Vue元件庫，它提供了適合所有現代Web瀏覽器的內建動態主題的元件，它的API也簡單明了。

你可以動態地產生和使用主題，根據自己的需求只用元件，UI元素與元件的優勢在於可以更簡單的使用API和其他的。

它提供一組可重複使用的元件和一系列的UI元素，使用 Vue 2.0 建立支援主流的瀏覽器的應用程式。

官網：http://vuematerial.materializecss.cn/#/

#安裝方法

##引入Roboto 和GoogleIcons 從GoogleCDN:

<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
<link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons">

登入後複製

透過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）

<link rel="stylesheet" href="path/to/vue-material.css">
<script src="path/to/vue-material.js"></script>

登入後複製

用法

啟用Vue Material 在你的應用程式中通過Vue.use()。您也可以單一單一的啟用元件:

// To import the whole library
import Vue from &#39;vue&#39;
import VueMaterial from &#39;vue-material&#39;
import &#39;vue-material/dist/vue-material.css&#39;

Vue.use(VueMaterial)

// Or to import individual components
import Vue from &#39;vue&#39;
import VueMaterial from &#39;vue-material&#39;
import &#39;vue-material/dist/components/mdCore/index.css&#39; //Required to boot vue material
import &#39;vue-material/dist/components/mdButton/index.css&#39;
import &#39;vue-material/dist/components/mdIcon/index.css&#39;
import &#39;vue-material/dist/components/mdSidenav/index.css&#39;
import &#39;vue-material/dist/components/mdToolbar/index.css&#39;

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)

登入後複製

套用主題

為了讓 Vue Material 正常運作，你需要設定一個預設的主題。你也可以一次註冊多個主題。

單一主題

Vue.material.theme.register(&#39;default&#39;, {
  primary: &#39;cyan&#39;,
  accent: &#39;pink&#39;
})

登入後複製

多個主題

Vue.material.theme.registerAll({
  default: {
    primary: &#39;cyan&#39;,
    accent: &#39;pink&#39;
  },
  indigo: {
    primary: &#39;indigo&#39;,
    accent: &#39;pink&#39;
  }
})

登入後複製

應用你的主題到每一部分程式碼，你需要使用v-md-theme 指令:

<div id="app" v-md-theme="&#39;default&#39;">
  <md-toolbar>
    <div class="md-title">My App</div>
  </md-toolbar>
  <md-button v-md-theme="&#39;indigo&#39;">My Button</md-button>
</div>

登入後複製