@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/vueThen 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:
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
Copyright (c) 2019-present LAN Bizhong