:diamonds: A modular and customizable UI library based on Material Design and Vue

文件	最后提交记录	最后更新时间
.github	chore: update	4 年前
config	chore: update balm@4.32.0	1 年前
docs	chore: update analytics	10 个月前
examples	chore: update examples	2 年前
scripts	chore: use balm-git-flow	3 年前
src	Merge pull request #192 from balmjs/fix-table-zindex-7027154899149387296 fix: apply position relative to fix cell z-index	1 个月前
test-vue	test: for ssr	2 年前
test	Merge remote-tracking branch 'origin/8.x' into 9.x	5 年前
.browserslistrc	chore: kill ie	4 年前
.editorconfig	update	5 年前
.eslintignore	clean code for lint	5 年前
.eslintrc.js	chore: update	4 年前
.gitignore	chore: supports vetur	4 年前
.npmrc	chore: update config	3 年前
.nycrc	update utils test	7 年前
.prettierrc	5.6.2	6 年前
CHANGELOG.md	10.31.1	1 年前
CODE_OF_CONDUCT.md	chore: update	5 年前
CONTRIBUTING.md	chore: update	3 年前
LICENSE	update config	8 年前
README.md	chore: update readme	1 年前
babel.config.js	chore: update balm@4.32.0	1 年前
balm.config.js	chore: update config	4 年前
balm.env.js	10.17.0	3 年前
jest.config.js	test: update tests to jest	5 年前
jsconfig.json	chore: update libraries	3 年前
package.json	fix: validator bug	9 个月前
yarn.lock	chore: update balm@4.32.0	1 年前

自动翻译

BalmUI

下一代 Vue.js 材料设计 UI

简介

BalmUI 是为 Vue 3 设计的模块化且可定制的 Material Design UI 库。

balm-ui@8 支持 Vue 2

特性

针对网页应用设计的企业级 UI
一套开箱即用的高质量 Vue 组件/插件/指令/工具集
在每个细节上都能进行强大的主题定制
集成了完整的最新 Material Icons
所有组件和插件均高度可定制，可独立使用
支持 TypeScript（更新中）

文档与演示

访问 material.balmjs.com
访问 v8.material.balmjs.com（适用于 Vue 2）

快速入门

环境要求

Vue.js@3.0+
🚀 Balm CLI 或 Vue CLI/Vite 或其他构建工具

1. 使用 Balm CLI

1.0 创建项目

balm init vue my-project
cd my-project

1.1 安装 `balm-ui`

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

1.2 配置更新

更新 balm.config.js

获取 Material Icons 而无需下载（或者，下载并解压到 my-project/app/fonts）

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

修改 my-project/config/balmrc.js 以使用 Dart Sass

module.exports = {
  styles: {
    extname: 'scss'
  }
  // 其他选项...
};

1.3 使用方法

默认使用方式

修改 my-project/app/styles/global/_vendors.scss
```
/* 引入 BalmUI 样式 */
@use 'balm-ui/dist/balm-ui';
```
建议在 /path/to/project-name/styles/_vendors.scss 中使用 Sass，您可以更深入地使用 BalmUI 的样式功能。

修改 my-project/app/scripts/main.js

import { createApp } from 'vue';
import App from '@/views/layouts/app';
import BalmUI from 'balm-ui'; // 官方 Google Material 组件
import BalmUIPlus from 'balm-ui/dist/balm-ui-plus'; // BalmJS 团队 Material 组件

const app = createApp(App);

app.use(BalmUI); // 强制
app.use(BalmUIPlus); // 可选

app.mount('#app');

独立使用方式

修改 my-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';

修改 my-project/app/scripts/main.js

import { createApp } from 'vue';
import App from '@/views/layouts/app';
import UiButton from 'balm-ui/components/button';
import $alert from 'balm-ui/plugins/alert';

const app = createApp(App);

app.use(UiButton);
app.use($alert);

app.mount('#app');

1.4 开发与测试

npm run dev

修改 Vue 组件：my-project/app/scripts/views/components/hello.vue

<template>
  <div class="hello">
    ...
    <!-- 添加一个测试按钮 -->
    <ui-button @click="$alert('Hello BalmUI')">点击我</ui-button>
  </div>
</template>

1.5 打包与部署

npm run prod

2. Vue CLI 或 Vite 的使用

2.0 创建项目

vue-cli
```
vue create my-project

cd my-project
```

vite

# npm 6.x
npm init @vitejs/app my-project --template vue

# npm 7+，需要额外的双横线：
npm init @vitejs/app my-project -- --template vue

# yarn
yarn create @vitejs/app my-project --template vue

cd my-project

2.1 安装 `balm-ui`

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

2.2 配置

vue-cli

// vue.config.js
module.exports = {
  runtimeCompiler: true,
  // 注意：通过 `configureWebpack` 或 `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.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  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 使用方法

编辑 my-project/src/main.js

import { createApp } from 'vue';
import App from './App.vue';

import BalmUI from 'balm-ui'; // 官方谷歌材料组件
import BalmUIPlus from 'balm-ui-plus'; // BalmJS 团队材料组件
import 'balm-ui-css';

const app = createApp(App);

app.use(BalmUI);
app.use(BalmUIPlus);

app.mount('#app');

3. 对于 `<script>` 标签

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Hello BalmUI</title>
    <link rel="stylesheet" href="https://unpkg.com/balm-ui/dist/balm-ui.css" />
  </head>
  <body>
    <div id="app">
      <ui-button icon="add" @click="$alert(message)">SayHi</ui-button>
    </div>
    <script src="https://unpkg.com/vue"></script>
    <script src="https://unpkg.com/balm-ui"></script>
    <script src="https://unpkg.com/balm-ui/dist/balm-ui-plus.js"></script>
    <script>
      const app = Vue.createApp({
        setup() {
          var message = 'Hello BalmUI';

          return {
            message
          };
        }
      });

      app.use(BalmUI);
      app.use(BalmUIPlus);

      app.mount('#app');
    </script>
  </body>
</html>

欢迎参与 👻

参与贡献

我们非常期待您的加入，让 BalmUI 比今天更加出色！在提交 pull request 之前，请务必阅读贡献指南。您可以通过pull request或GitHub issues提交任何想法。

浏览器支持

我们正式支持每个主流浏览器的最新两个版本。具体来说，我们在以下浏览器上进行测试：

Chrome 在 Android、Windows、macOS 和 Linux 上
Firefox 在 Windows、macOS 和 Linux 上
Safari 在 iOS 和 macOS 上
Edge 在 Windows 上

特别赞助商

特别感谢

项目介绍