♦️ Next Generation Material UI for Vue.js
Switch branches/tags
Clone or download
Latest commit 4783bda Dec 18, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
build add build config Feb 22, 2018
components build 0.12.1 Dec 18, 2018
config update mdc@0.41.0 Nov 1, 2018
directives 0.10.0 Nov 1, 2018
dist build 0.12.1 Dec 18, 2018
docs update divider Dec 6, 2018
examples add examples Nov 10, 2017
font update Aug 20, 2018
plugins build 0.12.0 Dec 6, 2018
src 0.12.1 Dec 18, 2018
test update list test Oct 15, 2018
utils 0.7.1 Sep 24, 2018
.editorconfig first commit Oct 17, 2016
.eslintignore update config for test Aug 27, 2018
.eslintrc.js update config for test Aug 27, 2018
.gitignore update config for test Aug 27, 2018
.nycrc update test Sep 4, 2018
.prettierrc update config Sep 18, 2018
CHANGELOG.md 0.12.1 Dec 18, 2018
CODE_OF_CONDUCT.md Create CODE_OF_CONDUCT.md Aug 20, 2018
CONTRIBUTING.md update CONTRIBUTING.md Aug 20, 2018
LICENSE update config Feb 20, 2018
README.md 0.12.0 Dec 6, 2018
babel.config.js update test config Sep 4, 2018
gulpfile.js 0.6.0 Sep 1, 2018
package.json 0.12.1 Dec 18, 2018
yarn.lock 0.12.1 Dec 18, 2018

README.md

BalmUI NPM version NPM version

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 👻

Reusability & Composition

Components

  • Layouts
    • Layout Grid
    • Toolbar (💀)
    • Top App Bar (migrate from Toolbar)
    • Drawer
    • Tabs
  • Buttons
    • Button
    • Floating Action
    • Icon Toggle (💀)
    • Icon Button (migrate from Icon Toggle)
  • Icon
  • Data View
    • List
    • Grid List (💀)
    • Image List (migrate from Grid List)
    • Card
    • Chips
    • Pagination (💡)
    • Text Divider (💡)
  • Linear Progress
  • Inputs and Controls
    • Text Field
    • Checkbox
    • Radio
    • Select
    • Switch
    • Slider
    • Dropdown (💡)
    • Autocomplete (💡)
    • File (💡)
  • Modal
    • Dialog
    • Snackbar
  • Menu

Plugins

  • Event
  • Grid (TODO)
  • Typography
  • Theme
  • Validator (💡)
  • Alert (💡)
  • Confirm (💡)
  • Toast (💡)

Directives

  • Ripple
  • Elevation
  • Anchor (💡)

Utilities

  • Type Detections
  • Helper Functions
  • IE Detection

💡: Plus UI, 💀: Deprecated

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

Thank you