balmjs/balm-uiPublic

NotificationsYou must be signed in to change notification settings
Fork29
Star513

♦️ A modular and customizable UI library based on Material Design and Vue

License

MIT license

513 stars 29 forks Branches Tags Activity

Star

Notifications

You must be signed in to change notification settings

Branches Tags

Folders and files

Name		Name	Last commit message	Last commit date
Latest commit History 3,150 Commits
.github		.github
config		config
docs		docs
examples		examples
scripts		scripts
src		src
test-vue		test-vue
test		test
.browserslistrc		.browserslistrc
.editorconfig		.editorconfig
.eslintignore		.eslintignore
.eslintrc.js		.eslintrc.js
.gitignore		.gitignore
.npmrc		.npmrc
.nycrc		.nycrc
.prettierrc		.prettierrc
CHANGELOG.md		CHANGELOG.md
CODE_OF_CONDUCT.md		CODE_OF_CONDUCT.md
CONTRIBUTING.md		CONTRIBUTING.md
LICENSE		LICENSE
README.md		README.md
babel.config.js		babel.config.js
balm.config.js		balm.config.js
balm.env.js		balm.env.js
jest.config.js		jest.config.js
jsconfig.json		jsconfig.json
package.json		package.json
yarn.lock		yarn.lock

Repository files navigation

BalmUI

Next Generation Material UI for Vue.js

Introduction

BalmUI is a modular and customizableMaterial Design UI library for Vue 3.

balm-ui@8 supports for Vue 2

Features

Enterprise-class UI designed for web applications
A set of high-quality Vue components/plugins/directives/utils out of the box
Powerful theme customization in every detail
Integrated a complete set of the latest Material Icons
All components and plugins is highly customizable, and can be used individually
TypeScript support (updating)

Documentation & Demos

Visitmaterial.balmjs.com
Visitv8.material.balmjs.com (for Vue 2)

Quick Start

Requirements

Vue.js@3.0+
🚀Balm CLI orVue CLI/Vite or other toolchains

1. For Balm CLI

1.0 Create a project

balm init vue my-projectcd my-project

1.1 Installing`balm-ui`

yarn add balm-ui# ORnpm install --save balm-ui

1.2 Configuration

updatebalm.config.js

getMaterial Icons without downloading (or, download and extract tomy-project/app/fonts)

constapi=(mix)=>{if(mix.env.isDev){mix.copy('node_modules/balm-ui/fonts/*','app/fonts');}};

editmy-project/config/balmrc.js for usingDart Sass

module.exports={styles:{extname:'scss'}// Other Options...};

1.3 Usage

Default Usage

editmy-project/app/styles/global/_vendors.scss
```
/* import BalmUI styles*/@use'balm-ui/dist/balm-ui';
```
Recommend to use Sass in/path/to/project-name/styles/_vendors.scss, and you can use more advanced style usage of the BalmUI.

editmy-project/app/scripts/main.js

import{createApp}from'vue';importAppfrom'@/views/layouts/app';importBalmUIfrom'balm-ui';// Official Google Material ComponentsimportBalmUIPlusfrom'balm-ui/dist/balm-ui-plus';// BalmJS Team Material Componentsconstapp=createApp(App);app.use(BalmUI);// Mandatoryapp.use(BalmUIPlus);// Optionalapp.mount('#app');

Standalone Usage

editmy-project/app/styles/global/_vendors.scss

@use'balm-ui/components/core';@use'balm-ui/components/button/button';@use'balm-ui/components/icon/icon';@use'balm-ui/components/dialog/dialog';@use'balm-ui/plugins/alert/alert';

editmy-project/app/scripts/main.js

import{createApp}from'vue';importAppfrom'@/views/layouts/app';importUiButtonfrom'balm-ui/components/button';import$alertfrom'balm-ui/plugins/alert';constapp=createApp(App);app.use(UiButton);app.use($alert);app.mount('#app');

1.4 Development and testing

npm run dev

edit a vue component:my-project/app/scripts/views/components/hello.vue

<template><divclass="hello">    ...<!-- Add a test button --><ui-button@click="$alert('Hello BalmUI')">Click Me</ui-button></div></template>

1.5 Bundling and deployment

npm run prod

2. For Vue CLI or Vite

2.0 Create a project

vue-cli
```
vue create my-projectcd my-project
```

vite

# npm 6.xnpm init @vitejs/app my-project --template vue# npm 7+, extra double-dash is needed:npm init @vitejs/app my-project -- --template vue# yarnyarn create @vitejs/app my-project --template vuecd my-project

2.1 Installing`balm-ui`

yarn add balm-ui# ORnpm install --save balm-ui

2.2 Configuration

vue-cli

// vue.config.jsmodule.exports={runtimeCompiler:true,// NOTE: set alias via `configureWebpack` or `chainWebpack`configureWebpack:{resolve:{alias:{'balm-ui-plus':'balm-ui/dist/balm-ui-plus.js','balm-ui-css':'balm-ui/dist/balm-ui.css'}}}// chainWebpack: (config) => {//   config.resolve.alias//     .set('balm-ui-plus', 'balm-ui/dist/balm-ui-plus.js')//     .set('balm-ui-css', 'balm-ui/dist/balm-ui.css');// }};

vite

// vite.config.jsimport{defineConfig}from'vite';importvuefrom'@vitejs/plugin-vue';exportdefaultdefineConfig({plugins:[vue()],resolve:{alias:{vue:'vue/dist/vue.esm-bundler.js','balm-ui-plus':'balm-ui/dist/balm-ui-plus.esm.js','balm-ui-css':'balm-ui/dist/balm-ui.css'}}});

2.3 Usage

editmy-project/src/main.js

import{createApp}from'vue';importAppfrom'./App.vue';importBalmUIfrom'balm-ui';// Official Google Material ComponentsimportBalmUIPlusfrom'balm-ui-plus';// BalmJS Team Material Componentsimport'balm-ui-css';constapp=createApp(App);app.use(BalmUI);app.use(BalmUIPlus);app.mount('#app');

3. For`<script>`

<!doctype html><htmllang="en"><head><metacharset="UTF-8"/><metaname="viewport"content="width=device-width, initial-scale=1.0"/><title>Hello BalmUI</title><linkrel="stylesheet"href="https://unpkg.com/balm-ui/dist/balm-ui.css"/></head><body><divid="app"><ui-buttonicon="add"@click="$alert(message)">SayHi</ui-button></div><scriptsrc="https://unpkg.com/vue"></script><scriptsrc="https://unpkg.com/balm-ui"></script><scriptsrc="https://unpkg.com/balm-ui/dist/balm-ui-plus.js"></script><script>constapp=Vue.createApp({setup(){varmessage='Hello BalmUI';return{            message};}});app.use(BalmUI);app.use(BalmUIPlus);app.mount('#app');</script></body></html>

Enjoy 👻

Contributing

We'd love for you to contribute and make BalmUI even better than it is today! Please make sure to read theContributing Guide before making a pull request. You can submit any ideas aspull requests or asGitHub issues.