@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 [email protected].
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/[email protected]"></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
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent