Muse-UI
基于 Vue 2.0 优雅的 Material Design UI 组件库
App.vue
<template>
<div id="app">
<mu-appbar title="Title" class="example-appbar" :class="{
'nav-hide': !open}">
<mu-icon-button icon="menu" slot="left" @click="toggle()" />
</mu-appbar>
<sidebar :show="open" v-on:changeState="toggle"></sidebar>
<div class="example-content" :class="{
'nav-hide': !open}">
<img src="./assets/logo.png">
<hello></hello>
</div>
</div>
</template>
<script>
import Hello from './components/Hello'
import Sidebar from './components/Sidebar'
import appbar from 'muse-components/appbar'
import iconButton from 'muse-components/iconButton'
export default {
name: 'app',
data(){
return {
open: true
}
},
components: {
Hello, 'mu-appbar': appbar,'mu-icon-button': iconButton, Sidebar
},
methods: {
toggle(msg){
console.log(msg);
this.open = !this.open
}
}
}
</script>
<style lang="less">
@import "../node_modules/muse-ui/src/styles/import.less";
@import './assets/css.css';
@import './assets/icon.css';
.example-appbar{
position: fixed;
left: 256px;
right: 0;
top: 0;
width: auto;
transition: all .45s @easeOutFunction;
&.nav-hide {
left: 0;
}
}
.example-content{
padding-top: 56px;
padding-left: 256px;
transition: all .45s @easeOutFunction;
&.nav-hide {
padding-left: 0;
}
}
</style>
Sidebar.vue
<template>
<div class="sidebar">
<mu-drawer :open="show">
<mu-appbar title="Title"></mu-appbar>
<mu-list>
<mu-list-item title="Menu Item One" />
<mu-list-item title="Close" v-on:click="changeOpen" />
</mu-list>
</mu-drawer>
</div>
</template>
<script>
import appbar from 'muse-components/appbar'
import drawer from 'muse-components/drawer'
import {
list,listItem} from 'muse-components/list'
export default {
name: 'sidebar',
props: ['show'],
data(){
return {
open: true
}
},
components: {
'mu-drawer': drawer,'mu-list': list, 'mu-list-item': listItem,'mu-appbar': appbar
},
methods: {
changeOpen(){
this.$emit('changeState','参数')
}
}
}
</script>
点击 Close 和 Title边的图标都可以实现侧边栏的显示与隐藏