Vue Material UI-tarBar、navBar

英文官网
中文官网
推荐使用英文官网，因为2个网址内容有些不一致，中文更新较慢，有部分组件存在问题，以英文官网为主

安装

npm install vue-material --save

使用

• 在main.js中配置
• 全部组件使用

import VueMaterial from 'vue-material'
import 'vue-material/dist/vue-material.min.css'
Vue.use(VueMaterial)

• 单独组件使用 （推荐）

import { MdButton, MdContent, MdTabs } from 'vue-material/dist/components'
import 'vue-material/dist/vue-material.min.css'

Vue.use(MdButton)
Vue.use(MdContent)
Vue.use(MdTabs)

tabBar 导航 演示

组件使用

// class="md-accent"    <md-bottom-bar> 在标签中加入，改变成红色，默认为蓝色 
<template>
  <md-bottom-bar v-if="is_theme" md-sync-route class="bottomFixed" :md-theme="theme" >
    <md-bottom-bar-item to="/" md-label="首页" md-icon="home"></md-bottom-bar-item>
    <md-bottom-bar-item to="/may" md-label="收支明细" md-icon="money"></md-bottom-bar-item>
    <md-bottom-bar-item to="/me" md-label="我的" md-icon="favorite"></md-bottom-bar-item>
  </md-bottom-bar>
  <md-bottom-bar v-else-if="is_shift" if="is_shift" md-sync-route class="bottomFixed" md-type="shift">
    <md-bottom-bar-item to="/" md-label="首页" md-icon="home"></md-bottom-bar-item>
    <md-bottom-bar-item to="/may" md-label="收支明细" md-icon="money"></md-bottom-bar-item>
    <md-bottom-bar-item to="/me" md-label="我的" md-icon="favorite"></md-bottom-bar-item>
  </md-bottom-bar>
  <md-bottom-bar v-else md-sync-route class="bottomFixed">
    <md-bottom-bar-item to="/" md-label="首页" md-icon="home"></md-bottom-bar-item>
    <md-bottom-bar-item to="/may" md-label="收支明细" md-icon="money"></md-bottom-bar-item>
    <md-bottom-bar-item to="/me" md-label="我的" md-icon="favorite"></md-bottom-bar-item>
  </md-bottom-bar>
</template>

<script>
  export default {
    name: "tabBar",
    data: () => ({
      theme: '#370b7c', //自定义的颜色
      is_theme: false,  //是否开启自定义颜色
      is_shift: true, // 是否开启动画偏移
    })
  }
</script>

<style scoped>
  .bottomFixed {
    position: fixed;
    width: 100%;
    left: 0;
    bottom: 0;
    z-index: 1000;
  }
</style>

navBar导航 演示

组件使用

<template>
  <div class="head">
    <md-toolbar class="head" >
      <md-button class="md-icon-button">
        <md-icon>menu</md-icon>
      </md-button>
      <h3 class="md-title" style="flex: 1; color: #fffff7">欢迎进入</h3>
      <md-button class="md-icon-button" disabled="disabled">
        <md-icon v-show="true">favorite</md-icon>
      </md-button>
    </md-toolbar>
  </div>
</template>

<script>
  export default {
    name: 'head',
    methods: {
    }
  }
</script>

<style scoped>
  .md-title {
    text-align:center;
  }
  .head {
    background: #929aff;
  }

</style>