Share your code.
balm-uipublic
BalmUI
Material Components + Vue
Quick Start
0. Requirement
1. Install
yarn add balm-ui// ornpm install --save balm-ui
2. Setup
2.1 CSS Config (/path/to/_vendor.scss
)
;
2.2 JS Config (./gulpfile.js
)
balmconfig = ... scripts: loaders: test: /\.vue$/ loader: 'vue' // You need install `vue-loader` test: /balm-ui.src.*?js$/ loader: 'babel' // BalmJS include `babel-loader` by default alias: 'vue$': balmconfigproduction ? 'vue/dist/vue.min.js' : 'vue/dist/vue.esm.js' 'balm-ui': 'balm-ui/src/index.js' ...;
3. Usage
// `/path/to/your_main.js` ;; Vue;
Enjoy 👻
Helpers
;
- getType
- isBoolean
- isNull
- isUndefined
- isNumber
- isString
- isSymbol
- isObject
- isArray
- isFunction
- detectIE
Mixins
; mixins: mixinsformValidator ...;
- formValidator
Components
; components: UiButton UiIcon ...;
- Layout
- Drawer
- Toolbar (Header and footers)
- Grid (Grid and gutter support)
- Tabs (Tabs with support for icon and text labels)
- Common
- Material Icon
- Button (Raised and flat buttons)
- Fab (The primary action in an application)
- Icon Toggle (Toggling icon states)
- Menu (Pop over menus)
- Linear Progress (Fills from 0% to 100%, represented by bars)
- Input Controls
- Form Field
- Checkbox (Multi-selection controls)
- Radio (Single selection controls)
- Select (Popover selection menus)
- Slider (Range Controls)
- Switch (On off switches)
- Textfield (Single and multiline text fields)
- Data
- Card (Various card layout styles)
- Grid List (2D grid layouts)
- List (Item layouts in lists)
- Dialog
- Dialog (Secondary text)
- Snackbar (Transient messages)
Plugins
;; Vue; { this; };
- event
- onChange
- openDialog/showDialog
- closeDialog/hideDialog
- setGrid
- mixin
- elevation (Shadow for different elevations)
- theme (Using primary and accent colors)
- typography (Type hierarchy)
- alert
- confirm
- toast
balm-ui
@0.1.x
Migrated to balm-ui-lite@0.1.x