（二）muse-ui 风格&工具

最新推荐文章于 2024-08-15 14:35:54 发布

Beic13

最新推荐文章于 2024-08-15 14:35:54 发布

阅读量1.2k

点赞数

分类专栏：关于muse-ui

本文链接：https://blog.csdn.net/Beic13/article/details/106853753

版权

关于muse-ui 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

基于 Vue 2.0 优雅的 Material Design UI 组件库

color 与 Typography 在安装 muse-ui 中

1 muse-ui 风格的使用

1.1 主题 Theme

muse-ui 支持使用 javascript 定制和切换主题，默认提供 light 和 dark 两种主题风格。

切换主题

import theme from 'muse-ui/lib/theme';
theme.use('dark');

自定义主题

import theme from 'muse-ui/lib/theme';
theme.add('teal', {
  primary: '#009688',
  secondary: '#ff4081',
  success: '#4caf50',
  warning: '#ffeb3b',
}, 'light');

theme.use('teal');

使用 add(name, config, extendName) 添加新的主题

name 主题名称
List item
config 主题配置对象
extendName 继承哪个主题，默认 ‘light’

默认设置的 dark 与 light 主题

默认提供的 light 和 dark 两个主题的配置如下：

// light.js
{
  primary: '#2196f3',
  secondary: '#ff4081',
  success: '#4caf50',
  warning: '#fdd835',
  info: '#2196f3',
  error: '#f44336',
  track: '#bdbdbd',
  text: {
    primary: 'rgba(0, 0, 0, 0.87)',
    secondary: 'gba(0, 0, 0, 0.54)',
    alternate: '#fff',
    disabled: 'rgba(0, 0, 0, 0.38)',
    hint: 'rgba(0, 0, 0, 0.38)' // 提示文字颜色
  },
  divider: 'rgba(0, 0, 0, 0.12)',
  background: {
    paper: '#fff',
    chip: '#e0e0e0',
    default: '#fafafa'
  }
}

// dark.js
{
  primary: '#1976d2',
  secondary: '#ff4081',
  success: '#4caf50',
  warning: '#fdd835',
  info: '#2196f3',
  error: '#f44336',
  track: '#757575',
  text: {
    primary: '#fff',
    secondary: 'rgba(255, 255, 255, 0.7)',
    alternate: '#303030',
    disabled: 'rgba(255, 255, 255, 0.3)',
    hint: 'rgba(255, 255, 255, 0.3)' // 提示文字颜色
  },
  divider: 'rgba(255, 255, 255, 0.3)',
  background: {
    paper: '#424242',
    chip: '#616161',
    default: '#303030'
  }
}

主题样式的扩展

如果有新加入的样式，需要添加到主题样式中，则需要使用 addCreateTheme(func) 添加到themes集中控制。

import theme from 'muse-ui/lib/theme';

theme.addCreateTheme((theme) => {
  return `
  .mu-hello-word {
    color: ${theme.text.primary}
  }
  `;
});

1.2 图标库 ICON

Muse-UI 推荐使用 Google 的 Material 字体图标库，有关所有可用图标的列表，请访问官方 material Icons 的页面。

使用 value 属性定义 icon, size 属性定义大小。

<div>
  <div class="icon-container">
    <mu-icon value="home"></mu-icon>
    <mu-icon value="flight_takeoff" color="red"></mu-icon>
    <mu-icon value="cloud_download" color="orange"></mu-icon>
    <mu-icon value="info" color="blue"></mu-icon>
  </div>
  <div class="icon-container">
    <mu-icon size="36" value="home"></mu-icon>
    <mu-icon size="36" value="flight_takeoff" color="red"></mu-icon>
    <mu-icon size="36" value="cloud_download" color="orange"></mu-icon>
    <mu-icon size="36" value="info" color="blue"></mu-icon>
  </div>
  <div class="icon-container">
    <mu-icon size="48" value="home"></mu-icon>
    <mu-icon size="48" value="flight_takeoff" color="red"></mu-icon>
    <mu-icon size="48" value="cloud_download" color="orange"></mu-icon>
    <mu-icon size="48" value="info" color="blue"></mu-icon>
  </div>
  <div class="icon-container">
    <mu-icon size="56" value="home"></mu-icon>
    <mu-icon size="56" value="flight_takeoff" color="red"></mu-icon>
    <mu-icon size="56" value="cloud_download" color="orange"></mu-icon>
    <mu-icon size="56" value="info" color="blue"></mu-icon>
  </div>
</div>
<style>
.icon-container {
  display: flex;
  width: 300px;
  justify-content: space-around;
}
.icon-container .mu-icon {
  margin-bottom: 12px;
}
</style>

配合按钮使用

通过 left 和 right 来设置图标在此位置时的样式。

<mu-flex justify-content="center" align-items="center" wrap="wrap" class="icon-flex-wrap">
  <mu-button color="primary">
    ACCEPT
    <mu-icon value="check_circle" right></mu-icon>
  </mu-button>
  <mu-button color="red">
    DECLINE
    <mu-icon value="block" right></mu-icon>
  </mu-button>
  <mu-button color="darkBlack">
    <mu-icon value="remove_circle" left></mu-icon>CANCEL
  </mu-button>
  <mu-button color="orange">
    <mu-icon value="arrow_back" left></mu-icon>BACK
  </mu-button>
  <mu-button color="purple">
    <mu-icon value="build"></mu-icon>
  </mu-button>
  <mu-button color="indigo">
    <mu-icon value="backup"></mu-icon>
  </mu-button>
  <mu-button color="blue" icon>
    <mu-icon value="thumb_up"></mu-icon>
  </mu-button>
  <mu-button color="red" icon>
    <mu-icon value="thumb_down"></mu-icon>
  </mu-button>
</mu-flex>
<style>
.icon-flex-wrap .mu-button {
  margin: 6px 8px;
}
</style>

官方示例

对于其它图标库的支持

使用其它图标库时，需要增加 : 前缀。

<mu-flex align-items="center" justify-content="around" style="width: 400px;">
  <mu-icon size="36" value=":mudocs-icon-custom-github"></mu-icon>
  <mu-icon size="36" value=":mudocs-icon-communication-phone" color="red"></mu-icon>
  <mu-icon size="36" value=":mudocs-icon-communication-voicemail" color="orange"></mu-icon>
  <mu-icon size="36" value=":mudocs-icon-action-grade" color="blue"></mu-icon>
  <mu-icon size="36" value=":mudocs-icon-action-home" color="amber"></mu-icon>
  <mu-icon size="36" value=":mudocs-icon-custom-pie" color="green"></mu-icon>
</mu-flex>

1.3 布局 LayOut

Muse-UI 提供基于 Flexible Box 的布局组件 mu-flex。

<div style="width: 100%; background: #fff; padding: 8px;">
  <mu-flex class="flex-wrapper" justify-content="start">
    <mu-flex class="flex-demo" justify-content="center" >left</mu-flex>
  </mu-flex>
  <mu-flex class="flex-wrapper" justify-content="center">
    <mu-flex class="flex-demo" justify-content="center" >center</mu-flex>
  </mu-flex>
  <mu-flex class="flex-wrapper" justify-content="end">
    <mu-flex class="flex-demo" justify-content="center" >right</mu-flex>
  </mu-flex>
  <mu-flex class="flex-wrapper" align-items="center">
    <mu-flex class="flex-demo" justify-content="center" fill>fill</mu-flex>
    <mu-flex class="flex-demo" justify-content="center" fill>fill</mu-flex>
    <mu-flex class="flex-demo" justify-content="center" fill>fill</mu-flex>
  </mu-flex>
</div>
<style>
.flex-wrapper {
  width: 100%;
  height: 56px;
  margin-top: 8px;
}
.flex-demo {
  width: 200px;
  height: 32px;
  background-color: #e0e0e0;
  text-align: center;
  line-height: 32px;
  margin-left: 8px;
}
.flex-wrapper:first-child {
  margin-top: 0;
}
.flex-demo:first-child {
  margin-left: 0;
}
</style>

Layout

参数	介绍	类型	可选值	默认值
tag	渲染之后的 dom 标签名称	String	—	div
inline	是否是inline-flex	Boolean	—	false
direction	指定了内部元素是如何在 flex 容器中布局的	String	row/column/row-reverse/column-reverse	row
wrap	指定 flex 元素单行显示还是多行显示	String	wrap/nowrap/wrap-reverse	nowrap
fill	此 flex 元素是否填充满剩余空间，设置为 true, 则 flex: 1 1 auto	Boolean	—	false
justify-content	定义了主轴的 flex 元素对齐方式	String	start/center/end/between/around	start
align-items	定义了侧轴方向上将当前行上的 flex 元素对齐方式	String	start/center/end/baseline/stretch	start
align-content	定义了当作为一个 flex box 容器的属性时，浏览器如何在容器的侧轴围绕弹性盒子项目分配空间。	String	start/center/end/between/around/stretch	—
align-self	对齐当前 flex 行中的 flex 元素，并覆盖 align-items 的值. 如果任何 flex 元素的侧轴方向 margin 值设置为 auto，则会忽略 align-self。	String	auto/start/center/end/baseline/stretch	—

1.4 栅格布局 Grid

基础布局：

通过 row 和 col 组件，并通过 col 组件的 span 属性我们就可以自由地组合布局。

<mu-container class="demo-container is-stripe">
  <mu-row>
    <mu-col span="12"><div class="grid-cell"></div></mu-col>
  </mu-row>
  <mu-row>
    <mu-col span="6"><div class="grid-cell"></div></mu-col>
    <mu-col span="6"><div class="grid-cell"></div></mu-col>
  </mu-row>
  <mu-row>
    <mu-col span="4"><div class="grid-cell"></div></mu-col>
    <mu-col span="4"><div class="grid-cell"></div></mu-col>
    <mu-col span="4"><div class="grid-cell"></div></mu-col>
  </mu-row>
  <mu-row>
    <mu-col span="3"><div class="grid-cell"></div></mu-col>
    <mu-col span="3"><div class="grid-cell"></div></mu-col>
    <mu-col span="3"><div class="grid-cell"></div></mu-col>
    <mu-col span="3"><div class="grid-cell"></div></mu-col>
  </mu-row>
  <mu-row>
    <mu-col span="2"><div class="grid-cell"></div></mu-col>
    <mu-col span="2"><div class="grid-cell"></div></mu-col>
    <mu-col span="2"><div class="grid-cell"></div></mu-col>
    <mu-col span="2"><div class="grid-cell"></div></mu-col>
    <mu-col span="2"><div class="grid-cell"></div></mu-col>
    <mu-col span="2"><div class="grid-cell"></div></mu-col>
  </mu-row>
</mu-container>
<style lang="less">
.demo-container {
  .row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .grid-cell {
    border-radius: 4px;
    height: 36px;
    background: rgba(255, 255, 255, 0.8);
  }
}
.demo-container.is-stripe .col:nth-child(2n) .grid-cell{
  background: rgba(0, 0, 0, 0.54);
}
</style>

间隔

每一个 col 存在间隔，通过设置 gutter 实现。

 <mu-row gutter>
    <mu-col span="4"><div class="grid-cell"></div></mu-col>
    <mu-col span="4"><div class="grid-cell"></div></mu-col>
    <mu-col span="4"><div class="grid-cell"></div></mu-col>
 </mu-row>

偏移

通过设置 col 组件的 offset 属性可以指定偏移的格数.

 <mu-row gutter>
    <mu-col span="3" offset="3"><div class="grid-cell"></div></mu-col>
    <mu-col span="3" offset="3"><div class="grid-cell"></div></mu-col>
 </mu-row>

响应式布局

预设了四个响应尺寸：sm、md、lg 和 xl
响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端–而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。

<mu-container class="demo-container is-stripe">
<mu-row gutter>
  <mu-col span="8" sm="6" md="4" lg="3" xl="1"><div class="grid-cell"></div></mu-col>
  <mu-col span="4" sm="6" md="8" lg="9" xl="11"><div class="grid-cell"></div></mu-col>
  <mu-col span="4" sm="6" md="8" lg="9" xl="11"><div class="grid-cell"></div></mu-col>
  <mu-col span="8" sm="6" md="4" lg="3" xl="1"><div class="grid-cell"></div></mu-col>
</mu-row>
</mu-container>

Container Props

参数	介绍	类型	可选值	默认值
fluid	是否是流体布局，设置之后 container 的 width 不会响应式改变，恒为 100%	Boolean	—	false

Row Props

参数	介绍	类型	可选值	默认值
tag	渲染之后的 dom 标签名称	String	—	div
gutter	是否有间隔 Boolean	—	false
wrap	指定 flex 元素单行显示还是多行显示	String	wrap/nowrap/wrap-reverse	nowrap
fill	此 flex 元素是否填充满剩余空间，设置为 true, 则 flex: 1 1 auto	Boolean	—	false
justify-content	定义了主轴的 flex 元素对齐方式	String	start/center/end/between/around	start
align-items	定义了侧轴方向上将当前行上的 flex 元素对齐方式	String	start/center/end/baseline/stretch	start
align-content	定义了当作为一个 flex box 容器的属性时，浏览器如何在容器的侧轴围绕弹性盒子项目分配空间。	String		start/center/end/between/around/stretch
align-self	对齐当前 flex 行中的 flex 元素，并覆盖 align-items 的值. 如果任何 flex 元素的侧轴方向 margin 值设置为 auto，则会忽略 align-self。	String	auto/start/center/end/baseline/stretch	—

Col Props

参数	介绍	类型	可选值	默认值
tag	渲染之后的 dom 标签名称	String	—	div
align-self	对齐当前 flex 行中的 flex 元素，并覆盖 align-items 的值. 如果任何 flex 元素的侧轴方向 margin 值设置为 auto，则会忽略 align-self。	String	auto/start/center/end/baseline/stretch	—
fill	此 flex 元素是否填充满剩余空间，设置为 true, 则 flex: 1 1 auto	Boolean	—	false
span	栅格占据的格数	Number/String	—	—
sm	≥576px 响应式栅格数	Number/String	—	—
md	≥768px 响应式栅格数	Number/String	—	—
lg	≥992px 响应式栅格数	Number/String	—	—
xl	≥1200px 响应式栅格数	Number/String	—	—
order	规定了弹性容器中的可伸缩项目在布局时的顺序。	Number/String	—	—
offset	栅格左侧的间隔格数	Number/String	—	—

2 muse-ui 中工具的使用

2.1 过度动画 Transition

muse-ui内应用在部分组件的过渡动画，可直接使用

按需引入
工具类的组件在 lib/Helpers 目录下

import Vue from 'vue';
import Helpers from 'muse-ui/lib/Helpers';

Vue.use(Helpers);

Fade 淡入淡出

‘mu-fade-transition’

<mu-container>
  <mu-button @click="show1 = !show1">Click Me</mu-button>
  <mu-flex class="mu-transition-row">
    <mu-fade-transition>
    <div class="mu-transition-box mu-primary-color mu-inverse" v-show="show1">mu-fade-transition</div>
    </mu-fade-transition>
  </mu-flex>
</mu-container>
<script>
export default {
  data () {
    return {
      show1: true
    };
  }
};
</script>
<style>
.mu-transition-row {
  margin-top: 16px;
  height: 100px;
}
.mu-transition-box {
  min-width: 200px;
  height: 100px;
  margin-right: 16px;
  border-radius: 4px;
  padding: 0 16px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

Slide 滑入滑出

mu-slide-top-transition
mu-slide-bottom-transition
mu-slide-left-transition
mu-slide-right-transition

<mu-container>
  <mu-button @click="show2 = !show2">Click Me</mu-button>
  <mu-flex class="mu-transition-row">
    <mu-slide-top-transition>
      <div class="mu-transition-box mu-primary-color mu-inverse" v-show="show2">mu-slide-top-transition</div>
    </mu-slide-top-transition>
    <mu-slide-bottom-transition>
      <div class="mu-transition-box mu-primary-color mu-inverse" v-show="show2">mu-slide-bottom-transition</div>
    </mu-slide-bottom-transition>
  </mu-flex>
  <mu-flex class="mu-transition-row">
    <mu-slide-left-transition>
      <div class="mu-transition-box mu-primary-color mu-inverse" v-show="show2">mu-slide-left-transition</div>
    </mu-slide-left-transition>
    <mu-slide-right-transition>
      <div class="mu-transition-box mu-primary-color mu-inverse" v-show="show2">mu-slide-right-transition</div>
    </mu-slide-right-transition>
  </mu-flex>
</mu-container>
<script>
export default {
  data () {
    return {
      show2: true
    };
  }
};
</script>
<style>
.mu-transition-row {
  margin-top: 16px;
  height: 100px;
}
.mu-transition-box {
  min-width: 200px;
  height: 100px;
  margin-right: 16px;
  border-radius: 4px;
  padding: 0 16px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

Expand 展开折叠

mu-expand-transition

<mu-container>
  <mu-button @click="show3 = !show3">Click Me</mu-button>
  <mu-flex class="mu-transition-row">
    <mu-expand-transition>
      <div v-show="show3">
        <div class="mu-transition-box mu-primary-color mu-inverse" >mu-expand-transition</div>
        <div class="mu-transition-box mu-primary-color mu-inverse" >mu-expand-transition</div>
      </div>
    </mu-expand-transition>
  </mu-flex>
</mu-container>
<script>
export default {
  data () {
    return {
      show3: true
    };
  }
};
</script>
<style>
.mu-transition-row {
  margin-top: 16px;
  min-height: 100px;
}
.mu-transition-box {
  min-width: 200px;
  height: 100px;
  margin-right: 16px;
  border-radius: 4px;
  padding: 0 16px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

Scale 缩放

mu-scale-transition

<mu-container>
  <mu-button @click="show4 = !show4">Click Me</mu-button>
  <mu-flex class="mu-transition-row">
    <mu-scale-transition>
    <div class="mu-transition-box mu-primary-color mu-inverse" v-show="show4">mu-scale-transition</div>
    </mu-scale-transition>
  </mu-flex>
</mu-container>
<script>
export default {
  data () {
    return {
      show4: true
    };
  }
};
</script>
<style>
.mu-transition-row {
  margin-top: 16px;
  height: 100px;
}
.mu-transition-box {
  min-width: 200px;
  height: 100px;
  margin-right: 16px;
  border-radius: 4px;
  padding: 0 16px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

2.2 指令 Directives

Muse-UI 提供 v-click-outside 、 v-resize 、 v-scroll 、 v-elevation 四个指令。

按需引入
工具类的组件在 lib/Helpers 目录下

import Vue from 'vue';
import Helpers from 'muse-ui/lib/Helpers';

Vue.use(Helpers);

v-ClickOutside

你想要点击外部区域关掉某个组件吗？用这个指令可以轻松实现。

<div class="demo-content-block" @click="message='click here....'" v-click-outside="clickoutside">{{message}}</div>
<script>
export default {
  data () {
    return {
      message: 'click! click! click!'
    };
  },
  methods: {
    clickoutside () {
      this.message = 'click outside'
    }
  }
}
</script>

<style>
.demo-content-block {
  width: 100%;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

v-resize

<div class="demo-content-block" v-resize="resize">
  <p style="margin-right: 16px;">Window Size:</p>
  <p>width: {{width}}px  height: {{height}}px</p>
</div>
<script>
export default {
  data () {
    return {
      width: 0,
      height: 0
    };
  },
  mounted () {
    this.width = window.innerWidth;
    this.height = window.innerHeight;
  },
  methods: {
    resize () {
      this.width = window.innerWidth;
      this.height = window.innerHeight;
    }
  }
}
</script>

<style>
.demo-content-block {
  width: 100%;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

v-scroll

<div class="demo-content-block" v-scroll="scroll">
  <p style="margin-right: 16px;">ScrollTop:</p>
  <p>{{scrollTop}}</p>
</div>
<script>
export default {
  data () {
    return {
      scrollTop: 0
    }
  },
  mounted () {
    this.scrollTop = window.scrollY;
  }
}
</script>

<style>
.demo-content-block {
  width: 100%;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

v-elevation

<mu-container>
  <mu-flex wrap="wrap" justify-content="between" align-items="center">
    <mu-slider :max="24" v-model="elevation" :step="1" style="width: 400px;"></mu-slider>
    <div v-elevation="elevation" style="width: 300px; height: 200px; background-color: #fff;"></div>
  </mu-flex>
</mu-container>
<script>
export default {
  data () {
    return {
      elevation: 4
    }
  }
}
</script>

2.3 波纹组件 Ripple

mu-ripple 用于自定义一些元素的点击波纹效果

按需引入
工具类的组件在 lib/Helpers 目录下

import Vue from 'vue';
import Helpers from 'muse-ui/lib/Helpers';

Vue.use(Helpers);

Ripple Props

参数	介绍	类型	可选值	默认值
tag	渲染元素标签名	String	—	div
color	波纹颜色	String	—	—
opacity	波纹的透明度	Number	0-1	0.3

Beic13

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录