@lbzui/vue 是一个基于 Material Design 开发的 Vue.js 组件库，目前还处于 BETA 阶段。

已完成 20 个组件、7 个公用类：

组件：Backdrop、Button、Card、Checkbox、Dialog、Divider、Drawer、Empty state、FAB、Icon、Icon button、List、List item、Radio、Snackbar、State、Switch、Tab、Tab item、Top app bar；
公用类：Aspect ratio、Clearfix、Elevation、Layout grid、Surface、Truncate、Typography。

1 特性

完全遵循 Material Design 设计原则；
支持浅色、深色主题，通过 darkened 属性可以轻松地变暗组件；
支持自定义布局网格、圆角边框半径、主题颜色等；
适配响应式网页设计，桌面端优先；
使用 Vue.js、TypeScript、Less.js、PostCSS 等前端技术；
兼容服务器端渲染；
可以自定义组件标签和组件 <router-link> 化。

2 使用

2.1 CDN

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Hello world</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons&display=block">
    <link rel="stylesheet" href="https://unpkg.com/@lbzui/vue/lib/lbzui.css">
  </head>
  <body>
    <div id="app">
      <lbz-button icon="favorite" @click.stop="fclick">Hello world</lbz-button>
    </div>
    <script src="https://unpkg.com/vue@2.6.11"></script>
    <script src="https://unpkg.com/@lbzui/vue"></script>
    <script>
      new Vue({
        el: '#app',
        methods: {
          fclick(e) { alert('Hello @lbzui/vue!') }
        }
      })
    </script>
  </body>
</html>

2.2 NPM

安装：

# npm
npm i @lbzui/vue -S

# or yarn
yarn add @lbzui/vue

之后引入：

import '@lbzui/vue/lib/lbzui.css'
import LBZUI from '@lbzui/vue'

Vue.use(LBZUI, {
  dense: false,
  ripple: true
})

如使用按钮组件：

<template>
  <lbz-button @click.stop="fclick">Hello world</lbz-button>
</template>

<script>
export default {
  name: 'HelloWorld',
  methods: {
    fclick(e) { alert('Hello @lbzui/vue!') }
  }
}
</script>

3 链接

了解更多，请访问：

@lbzui/vue 组件库来了

1 特性

2 使用

2.1 CDN

2.2 NPM

3 链接