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].
- 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
<!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>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:
@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.
Detailed changes for each release are documented in the release notes.
Copyright (c) 2019-present LAN Bizhong