♥️ Material Design Lite + Vue + Idea
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
build update Feb 22, 2018
components build 1.5.3 Dec 6, 2018
config 1.5.3 Dec 6, 2018
dist build 1.5.3 Dec 6, 2018
docs update docs Dec 6, 2018
font 0.6.0 beta.3 Dec 6, 2017
helpers 1.5.1 Nov 22, 2018
img 0.6.0 beta.3 Dec 6, 2017
plugins build 1.5.3 Dec 6, 2018
src update Dec 6, 2018
test update Mar 22, 2018
.babelrc first commit for unit test Jan 3, 2018
.editorconfig first commit Jul 22, 2017
.eslintignore clean code Feb 9, 2018
.eslintrc.js update config Feb 9, 2018
.gitignore first commit Jul 22, 2017
.npmignore add npmignore Jan 5, 2018
.prettierrc 1.5.1 Nov 22, 2018
CHANGELOG.md 1.5.3 Dec 6, 2018
LICENSE build 1.0.3 Jan 4, 2018
README.md 1.4.1 Aug 7, 2018
bower.json 1.4.0 Jul 10, 2018
gulpfile.js update config Feb 9, 2018
package.json 1.5.3 Dec 6, 2018

README.md

BalmUI Lite NPM version

基于 Material Design Lite 组件库 和 Vue.js 框架 的 UI 解决方案

特点

  • 高度集成 Google 的 Material Design Lite 和 Material Design Icons,并扩展更多常用组件
  • 开箱即用的高质量 Vue 组件,插件,指令及通用方法
  • 基于 BalmJS 的工作流,支持 ES2015+
  • 支持多种使用方式

🔔 BalmUI Lite 基于 Google MDL,而 MDL 现在所能表现的功能和扩展上支持都比较有限,所以 BalmJS 官方已将开发重点转向了基于 Material Components 的下一代为 Vue.js 量身定制的 Material UI —— BalmUI

安装配置

1. 开发环境

推荐使用我们官方的 Balm CLI 来快速搭建 Vue 脚手架项目

npm install -g balm-cli

balm init vue my-project

2. 安装 BalmUI Lite

yarn add balm-ui-lite
# OR
npm i --save balm-ui-lite

3. 使用方式

普通使用(Desktop 开发推荐)

/* my-project/app/styles/global/_vendor.scss */
@import 'node_modules/balm-ui-lite/src/styles/balm-ui-lite.scss';
// my-project/app/scripts/main.js
import Vue from 'vue';
import BalmUI from 'balm-ui-lite';

Vue.use(BalmUI);

独立使用(Mobile 开发推荐)

样式脚本完全模块化,打包小

import Vue from 'vue';
import UiButton from 'balm-ui-lite/components/button';
import $event from 'balm-ui-lite/plugins/event';

import 'balm-ui-lite/components/core.css';
import 'balm-ui-lite/components/button.css';

Vue.component(UiButton.name, UiButton);
Vue.use($event);

完整文档

请查看 BalmUI Lite 官网

UI 组件列表

  • Layout
    • layout
    • grid
    • tabs
  • Common
    • badge
    • button
    • chip
    • menu
    • tooltip
    • divider
    • icon
  • Form
    • textfield
    • checkbox
    • radio
    • select
    • selectmenu
    • icon toggle
    • switch
    • slider
    • file
    • autocomplete
    • datepicker
    • rangepicker
  • Dataview
    • card
    • list
    • table
    • pagination
  • Feedback
    • dialog
    • snackbar
  • Loading
    • progress
    • spinner

UI 插件列表

  • event
  • alert
  • confirm
  • prompt
  • toast
  • notify
  • validator

BalmUI Lite 中还包含一些常用 指令服务辅助方法,具体请查看官方文档

支持环境

IE9 IE10 IE11 Chrome Opera Firefox Safari Chrome (Android) Mobile Safari
B A A A A A A A A
  • A 完全支持
  • B 部分支持(需要 polyfills)

如何贡献

我们欢迎任何形式的贡献,有任何建议或意见,请给我们 提问

thx BalmJS & Vue.js