balm-ui

BalmUI

Material Design + Vue + Idea

Installation & Setup

1. Requirement

• BalmJS or webpack
• Vue.js@2.x

2. Install

npm install --save balm-ui

3. Setup

1. CSS Config

1.1 Use Sass (Recommended)

/path/to/_vendor.scss

@import 'node_modules/balm-ui/src/styles/main.scss';

1.2 Use JavaScript

npm install --save-dev sass-loader

gulpfile.js

balm.config = {
  ...
  scripts: {
    loaders: [{
      test: /\.scss$/,
      loader: 'sass'
    }],
    alias: {
      'balm-css': 'balm-ui/balm-ui/src/styles/main.scss'
    }
  },
  ...
};

/path/to/yours_main.js

import 'balm-css';

2. JS Config

gulpfile.js

balm.config = {
  ...
  scripts: {
    loaders: [{
      test: /\.vue$/,
      loader: 'vue'
    }, {
      test: /balm-ui.src.*?js$/,
      loader: 'babel'
    }],
    alias: {
      vue: 'vue/dist/vue.js',
      'balm-ui': 'balm-ui/src/index.js'
    }
  },
  ...
};

/path/to/yours_main.js

import Vue from 'vue';
import BalmUI from 'balm-ui';

Vue.use(BalmUI);

3. Assets Config

BalmUI images & fonts

Components

Layout

• layout
• grid
• tabs
• footer

Common

• loading
• button
• menu
• badge
• card
• chip
• tooltip
• splitter

Form

• textfield
• checkbox
• radio
• icon toggle
• switch
• slider
• select
• date picker
• upload

Data Show

• list
• table
• pagination

Popup

• dialog
• alert
• confirm
• snackbar

thx BalmJS & Vue.js