balm-ui

BalmUI

Material Design + Vue + Idea

Installation & Setup

1. Requirement

• BalmJS
• 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

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

Form

• textfield
• checkbox
• radio
• icon toggle
• switch
• slider
• select
• autocomplete
• datepicker
• fileupload

Data View

• list
• table
• pagination

Popup

• dialog
• alert
• confirm
• snackbar

thx BalmJS & Vue.js