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，其中包含一组高质量的组件和演示，用于构建丰富的交互式用户界面。
快速开始 (Quick Start)
0.要求 (0. Requirement)
1.安装 (1. Install)
npm install --save balm-ui
// OR
yarn add balm-ui2.配置 (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); // Optional3.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