vue.js ui_Vue.js的下一代Material UI

vue.js ui

BalmUI (BalmUI)

Next Generation Material UI for Vue.js

Vue.js的下一代Material UI

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.

遵循针对Web规范的Material Design UI组件之后，我们开发了一个BalmUI库antd，其中包含一组高质量的组件和演示，用于构建丰富的交互式用户界面。

View Documentation 查看文件

快速开始 (Quick Start)

0.要求 (0. Requirement)

• BalmJS(Recommended) or other toolchains

  BalmJS (推荐)或其他工具链

• Vue.js@2.x

  Vue.js @ 2.x

1.安装 (1. Install)

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

2.配置 (2. Config)

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

编辑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.

下载Material Design图标并解压缩到/path/to/my-project/app/fonts 。

3.用法 (3. Usage)

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

编辑my-project/app/scripts/main.js

3.1默认用法 (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独立使用 (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 (:skull:)
    工具栏(：skull :)
  • Top App Bar (migrate from Toolbar)
    热门应用栏(从工具栏迁移)
  • Drawer
    抽屉
  • Tabs
    标签

• Buttons

  纽扣

  • Button
    纽扣
  • Floating Action
    浮动动作
  • Icon Toggle (:skull:)
    图标切换(：skull :)
  • Icon Button (migrate from Icon Toggle)
    图标按钮(从“图标切换”迁移)

• Icon

  图标

• Data View

  资料检视

  • List
    清单
  • Grid List (:skull:)
    网格列表(：skull :)
  • Image List (migrate from Grid List)
    图像列表(从网格列表迁移)
  • Card
    卡
  • Chips
    薯片

• Linear Progress

  线性进展

• Inputs and Controls

  输入和控制

  • Text Field
    文本域
  • Checkbox
    复选框
  • Radio
    无线电
  • Select
    选择
  • Switch
    开关
  • Slider
    滑杆
  • Dropdown (:bulb:)
    下拉列表(：bulb :)
  • Autocomplete (:bulb:)
    自动完成(：bulb :)

• Modal

  模态

  • Dialog
    对话
  • Snackbar
    小吃店

• Menu

  菜单

外挂程式 (Plugins)

• Event

  事件

• Grid

  格

• Typography

  版式

• Theme

  主题

• Validator (:bulb:)

  验证者(：bulb :)

• Alert (:bulb:)

  警报(：bulb :)

• Confirm (:bulb:)

  确认(：bulb :)

• Toast (:bulb:)

  吐司(：bulb :)

指令 (Directives)

• Ripple

  波纹

• Elevation

  海拔

• Shape

  形状

实用工具 (Utilities)

• Type Detections

  类型检测

• Helper Functions

  辅助功能

• IE Detection

  IE检测

:bulb:: Plus UI, :skull:: Deprecated

：bulb :: Plus UI，：skull ::不推荐使用

贡献 (Contributing)

We'd love for you to contribute and make BalmUI even better than it is today!

我们希望您能为BalmUI做出贡献，并使BalmUI变得比今天更好！

Welcome to help us improve BalmUI, and issues here.

欢迎帮助我们改进BalmUI，以及此处的问题。

浏览器支持 (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

  Android，Windows，macOS和Linux上的Chrome

• Firefox on Windows, macOS, and Linux

  Windows，macOS和Linux上的Firefox

• Safari on iOS and macOS

  iOS和macOS上的Safari

• Edge on Windows

  Windows上的Edge

• IE 11 on Windows

  Windows上的IE 11

翻译自: https://vuejsexamples.com/next-generation-material-ui-for-vue-js/

vue.js ui