@lbzui/vue

Material Components for Vue.js

@lbzui/vue is now available in BETA, but you can read in more depth on API documentation and documentation website to develop.

If you have any questions, ideas or you want to discuss with it, create an issue or email to lbz_ui@163.com.

Features

Follow the principles of Material Design
Support Light and Dark theme, and easily adapt darkened UIs to dark theme
Customize Layout grid, Shape, Theme, and more
Fit Responsive Web Design (desktop first)
Use Vue.js (2.6.0+), TypeScript, Less.js (3.5.0+), PostCSS, etc
Compatible with SSR (Server-Side Rendering)
Enable <router-link> and custom tag of Components

Usage

Using via 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>

Using via NPM

Install:

# npm
npm i @lbzui/vue -S

# or yarn
yarn add @lbzui/vue

Then import:

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

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

Use components like Button:

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

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

Jumpstart a new project? Please visit:

Using @lbzui/vue in Vue.js

Using @lbzui/vue in Nuxt.js

Browser support

@lbzui/vue supports all modern browsers (IE: Layout grid works unfriendly, and Dark theme does not supported).

May work in other browsers but it's untested.

Changelog

Detailed changes for each release are documented in the release notes.

LICENSE

MIT

N3R00/vue