阅读 26

@lbzui/vue 组件库来了

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

https://lbzui-vue.lanbizhong.com/

已完成 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 链接

了解更多,请访问:

关注下面的标签,发现更多相似文章
评论