Next Generation Material UI for Vue.js

BalmUI

What is BalmUI?

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

Quick Start

0. Requirement

BalmJS@2.8.0+(Recommended) or other toolchains
Vue.js@2.1.0+

1. Install

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

2. Config

balm.config setup for Dart Sass

balm.config = {
  styles: {
    extname: 'scss',
    dartSass: true // !important
  }
  // Other Options...
};

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

3. Usage

Default Usage

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

/* import BalmUI styles */
@use 'balm-ui/dist/balm-ui.scss';

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

import Vue from 'vue';
import BalmUI from 'balm-ui'; // Official Google Material Components
import BalmUIPlus from 'balm-ui/dist/balm-ui-plus'; // BalmJS Team Material Components

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

Standalone Usage

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

@use 'balm-ui/components/core.scss';
@use 'balm-ui/components/button/button.scss';
@use 'balm-ui/components/icon/icon.scss'; // Optional

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

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

Vue.use(UiButton);

Enjoy 👻

Reusability & Composition

Components

Alert ()
Autocomplete ()
Badge ()
Button
Card
Checkbox
Chips
Circular Progress
Collapse ()
Data Table
Datepicker ()
Dialog
Drawer
Editor (WYSIWYG) ()
Floating Action Button
File ()
Form + Form Field
Icon (Material icons)
Icon Button
Image List
Layout Grid
Linear Progress
List
Menu
Pagination ()
Radio
Rangepicker ()
Select
Skeleton ()
Slider
Snackbar
Switch
Tabs
Text Divider ()
Text Field
Top App Bar

Plugins

Alert Dialog ()
Confirm Dialog ()
Event ()
Grid
Theme
Toast ()
Typography
Validator ()

Directives

A11y
Anchor ()
Badge ()
Elevation
Ripple
Shape

Utilities ()

Helper Functions
IE Detection
Type Detections

: Extra Idea for UI

Contributing

We’d love for you to contribute and make BalmUI even better than it is today! Please make sure to read the Contributing Guide before making a pull request. You can submit any ideas as pull requests or as GitHub issues.

Browser support

We officially support the last two versions of every major browser. Specifically, we test on the following browsers:

Chrome on Android, Windows, macOS, and Linux
Firefox on Windows, macOS, and Linux
Safari on iOS and macOS
Edge on Windows
IE 11 on Windows

Special Thanks to

Download Details:

Author: balmjs

Live Demo: https://material.balmjs.com/#/

GitHub: https://github.com/balmjs/balm-ui

#vuejs #vue #javascript #vue-js