Next Generation Material UI for Vue.js

Next Generation Material UI for Vue.js

Next Generation Material UI for Vue.js

BalmUI [![BalmUI version][balm-ui-image]][balm-ui-url] [![MDC version][mdc-web-image]][mdc-web-url]

Next Generation Material UI for Vue.js

What is BalmUI?

Following the Material Design UI components for the web specification, we developed a BalmUI library antd that contains a set of high quality components and demos for building rich, interactive user interfaces.

Demos & Documentation(updated with every release)

Quick Start

0. Requirement

1. Install

npm install --save balm-ui
// OR
yarn add balm-ui

2. Config

Edit my-project/app/styles/global/_vendor.scss

/* Add BalmUI styles */
@import 'node_modules/balm-ui/src/styles/balm-ui.scss';

Download Material Design Icons and extract to /path/to/my-project/app/fonts.

3. Usage

Edit my-project/app/scripts/main.js

3.1 Default Usage

import Vue from 'vue';
import BalmUI from 'balm-ui'; // Mandatory
import BalmUIPlus from 'balm-ui/dist/balm-ui-plus'; // Optional

Vue.use(BalmUI); // Mandatory
Vue.use(BalmUIPlus); // Optional

3.2 Standalone Usage

import Vue from 'vue';
import UiButtonComponents from 'balm-ui/components/button';

// (Recommended) Splitting CSS out from the main application, see BalmUI advanced usage.
import 'balm-ui/components/core.css';
import 'balm-ui/components/button.css';
import 'balm-ui/components/icon.css'; // Optional.

Vue.use(UiButtonComponents);

Enjoy

Github Repository