mirror of
https://gitee.com/ElemeFE/element.git
synced 2024-11-30 11:17:38 +08:00
Review: steps/switch/tabs/tag/table
This commit is contained in:
Leopoldthecoder
parent
4992d59cdd
commit
c0e331d210
@ -1,30 +1,31 @@
|
||||
## 自定义主题
|
||||
Element 默认提供一套主题，CSS 命名采用 BEM 的风格方便使用者覆盖样式。如果你想完全替换主题色或者部分样式，可以使用下面方法。
|
||||
## Custom theme
|
||||
Element uses BEM-styled CSS so that you can override styles easily. But if you need to replace styles at a large scale, e.g. change the theme color from blue to orange or green, maybe overriding them one by one is not a good idea, and this is where our theme customization tool kicks in.
|
||||
|
||||
### 安装工具
|
||||
首先安装「主题生成工具」，可以全局安装或者安装在当前项目下，推荐安装在项目里，方便别人 clone 项目时能直接安装依赖并启动。
|
||||
### Install related tool
|
||||
First install the theme generator globally or locally. Local install is recommended because in this way, when others clone your project, npm will automatically install it for them.
|
||||
```shell
|
||||
npm i element-theme -D
|
||||
```
|
||||
|
||||
安装默认主题，可以从 npm 安装或者从 GitHub 拉取最新代码。
|
||||
Then install the default theme from npm or GitHub.
|
||||
```shell
|
||||
npm i element-theme-default@next -D
|
||||
# from npm
|
||||
npm i element-theme-default -D
|
||||
|
||||
# 从 GitHub
|
||||
# from GitHub
|
||||
npm i https://github.com/ElementUI/theme-default -D
|
||||
```
|
||||
|
||||
### 初始化变量文件
|
||||
主题生成工具安装成功后，如果全局安装可以在命令行里通过 `et` 调用工具，如果安装在当前目录下，需要通过 `node_modules/.bin/et` 访问到命令。执行 `-i` 初始化变量文件。默认输出到 `element-variables.css`，当然你可以传参数指定文件输出目录。
|
||||
### Initialize variable file
|
||||
After successfully installing the above packages, a command named `et` is available in CLI (if the packages are installed locally, use `node_modules/.bin/et` instead). Run `-i` to initialize the variable file which outputs to `element-variables.css` by default. And you can specify its output directory as you will.
|
||||
|
||||
```shell
|
||||
node_modules/.bin/et -i [可以自定义变量文件目录]
|
||||
node_modules/.bin/et -i [custom output directory]
|
||||
|
||||
> ✔ Generator variables file
|
||||
```
|
||||
|
||||
如果使用默认配置，执行后当前目录会有一个 `element-variables.css` 文件。内部包含了主题所用到了所有变量，它们使用 CSS4 的风格定义。大致结构如下：
|
||||
In `element-variables.css` you can find all the variables we used to style Element and they are defined in CSS4 style:
|
||||
```css
|
||||
:root {
|
||||
|
||||
@ -43,14 +44,14 @@ node_modules/.bin/et -i [可以自定义变量文件目录]
|
||||
--color-grey: #C0CCDA;
|
||||
```
|
||||
|
||||
### 修改变量
|
||||
直接编辑 `element-variables.css` 文件，例如修改主题色为红色。
|
||||
### Modify variables
|
||||
Just edit `element-variables.css`, e.g. changing the theme color to red:
|
||||
```CSS
|
||||
--color-primary: red;
|
||||
```
|
||||
|
||||
### 编译主题
|
||||
保存文件后，到命令行里执行 `et` 编译主题，如果你想启用 `watch` 模式，实时编译主题，增加 `-w` 参数。
|
||||
### Build theme
|
||||
After saving the variable file, use `et` to build your theme. You can activate `watch` mode by adding a parameter `-w`:
|
||||
```shell
|
||||
node_modules/.bin/et
|
||||
|
||||
@ -58,8 +59,8 @@ node_modules/.bin/et
|
||||
> ✔ build element theme
|
||||
```
|
||||
|
||||
### 引入自定义主题
|
||||
默认情况下编译的主题目录是放在 `./theme` 下，你可以通过 `-o` 参数指定打包目录。像引入默认主题一样，在代码里直接引用 `theme/index.css` 文件即可。
|
||||
### Import custom theme
|
||||
By default the build theme file is placed inside `./theme`. You can specify its output directory with parameter `-o`. Importing your own theme is just like importing the default theme, only this time you import the file you just built:
|
||||
|
||||
```javascript
|
||||
import './theme/index.css'
|
||||
@ -69,8 +70,8 @@ import Vue from 'vue'
|
||||
Vue.use(ElementUI)
|
||||
```
|
||||
|
||||
### 搭配插件按需引入组件主题
|
||||
如果是搭配 `babel-plugin-component` 一起使用，只需要修改 `.babelrc` 的配置，指定 `styleLibraryName` 路径为自定义主题相对于 `.babelrc` 的路径，注意要加 `~`。
|
||||
### Import component theme on demand
|
||||
If you are using `babel-plugin-component` for on-demand import, just modify `.babelrc` and specify `styleLibraryName` to the path where your custom theme is located relative to `.babelrc`. Note that `~` is required:
|
||||
```json
|
||||
{
|
||||
"plugins": [["component", [
|
||||
@ -82,4 +83,4 @@ Vue.use(ElementUI)
|
||||
}
|
||||
```
|
||||
|
||||
如果不清楚 `babel-plugin-component` 是什么，请阅读 [快速上手](./examples/docs/zh-CN/quickstart.md) 一节。更多 `element-theme` 用法请参考[项目仓库](https://github.com/ElementUI/element-theme)。
|
||||
If you are unfamiliar with `babel-plugin-component`, please refer to <a href="./#/en-US/component/quickstart">Quick Start</a>. For more details, check out the [project repository](https://github.com/ElementUI/element-theme) of `element-theme`.
|
||||
|
||||
@ -1,9 +1,8 @@
|
||||
## 国际化
|
||||
## Internationalization
|
||||
|
||||
Element 组件内部默认使用中文，若希望使用其他语言，则需要进行多语言设置。以英文为例，在 main.js 中：
|
||||
The default language of Element is Chinese. If you wish to use another language, you'll need to do some i18n configuration. In your entry file, if you are importing Element entirely:
|
||||
|
||||
```javascript
|
||||
// 完整引入 Element
|
||||
import Vue from 'vue'
|
||||
import ElementUI from 'element-ui'
|
||||
import locale from 'element-ui/lib/locale/lang/en'
|
||||
@ -11,26 +10,25 @@ import locale from 'element-ui/lib/locale/lang/en'
|
||||
Vue.use(ElementUI, { locale })
|
||||
```
|
||||
|
||||
或
|
||||
Or if you are importing Element on demand:
|
||||
|
||||
```javascript
|
||||
// 按需引入 Element
|
||||
import Vue from 'vue'
|
||||
import { Button, Select } from 'element-ui'
|
||||
import lang from 'element-ui/lib/locale/lang/en'
|
||||
import locale from 'element-ui/lib/locale'
|
||||
|
||||
// 设置语言
|
||||
// configure language
|
||||
locale.use(lang)
|
||||
|
||||
// 引入组件
|
||||
// import components
|
||||
Vue.component(Button.name, Button)
|
||||
Vue.component(Select.name, Select)
|
||||
```
|
||||
|
||||
如果使用其它语言，默认情况下中文语言包依旧是被引入的，可以使用 webpack 的 IgnorePlugin 忽略掉它以减少打包后的文件体积。
|
||||
The Chinese language pack is imported by default, even if you're using another language. But with `IgnorePlugin` provided by webpack you can ignore it when building:
|
||||
|
||||
**webpack.config.js**
|
||||
webpack.config.js
|
||||
```javascript
|
||||
{
|
||||
plugins: [
|
||||
@ -39,10 +37,12 @@ Vue.component(Select.name, Select)
|
||||
}
|
||||
```
|
||||
|
||||
目前 Element 内置了以下语言：
|
||||
- 汉语
|
||||
- 英语
|
||||
- 德语
|
||||
- 葡萄牙语
|
||||
|
||||
如果你需要使用其他的语言，欢迎贡献 PR：只需在 [这里](https://github.com/ElemeFE/element/tree/master/src/locale/lang) 添加一个语言配置文件即可。
|
||||
Currently Element ships with the following languages:
|
||||
<ul class="language-list">
|
||||
<li>Chinese (zh-CN)</li>
|
||||
<li>English (en)</li>
|
||||
<li>German (de)</li>
|
||||
<li>Portuguese (pt)</li>
|
||||
</ul>
|
||||
|
||||
If your target language is not included, you are more than welcome to contribute: just add another language config [here](https://github.com/ElemeFE/element/tree/master/src/locale/lang) and create a pull request.
|
||||
|
||||
@ -1,46 +1,45 @@
|
||||
## 安装
|
||||
## Installation
|
||||
|
||||
### npm 安装
|
||||
推荐使用 npm 的方式安装，它能更好地和 [webpack](https://webpack.js.org/) 打包工具配合使用。
|
||||
### npm
|
||||
Installing with npm is recommended, for it works seamlessly with [webpack](https://webpack.js.org/).
|
||||
|
||||
```shell
|
||||
npm i element-ui@next -D
|
||||
npm i element-ui -D
|
||||
```
|
||||
**由于当前还处于 rc 阶段，所以仍然需要通过 @next 的方式获取最新版本。**
|
||||
|
||||
### CDN
|
||||
目前可以通过 [unpkg.com/element-ui](https://unpkg.com/element-ui@next/) 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。
|
||||
Get the latest version from [unpkg.com/element-ui](https://unpkg.com/element-ui/) , and import JavaScript and CSS file in your page.
|
||||
|
||||
```html
|
||||
<!-- 引入样式 -->
|
||||
<link rel="stylesheet" href="https://unpkg.com/element-ui@1.0.0-rc.8/lib/theme-default/index.css">
|
||||
<!-- 引入组件库 -->
|
||||
<script src="https://unpkg.com/element-ui@1.0.0-rc.8/lib/index.js"></script>
|
||||
<!-- import CSS -->
|
||||
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-default/index.css">
|
||||
<!-- import JavaScript -->
|
||||
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
|
||||
```
|
||||
|
||||
### Hello world
|
||||
通过 CDN 的方式我们可以很容易地使用 Element 写出一个 Hello world 页面。[在线演示](http://codepen.io/QingWei-Li/pen/vXwJrY)
|
||||
If you are using CDN, a hello-world page is easy with Element. [Online Demo](http://codepen.io/QingWei-Li/pen/vXwJrY)
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<!-- 引入样式 -->
|
||||
<link rel="stylesheet" href="https://unpkg.com/element-ui@1.0.0-rc.8/lib/theme-default/index.css">
|
||||
<!-- import CSS -->
|
||||
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-default/index.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<el-button @click.native="visible = true">按钮</el-button>
|
||||
<el-button @click.native="visible = true">Button</el-button>
|
||||
<el-dialog v-model="visible" title="Hello world">
|
||||
<p>欢迎使用 Element</p>
|
||||
<p>Try Element</p>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</body>
|
||||
<!-- 先引入 Vue -->
|
||||
<script src="https://unpkg.com/vue@2.0.3/dist/vue.js"></script>
|
||||
<!-- 引入组件库 -->
|
||||
<script src="https://unpkg.com/element-ui@1.0.0-rc.8/lib/index.js"></script>
|
||||
<!-- import Vue before Mint UI -->
|
||||
<script src="https://unpkg.com/vue/dist/vue.js"></script>
|
||||
<!-- import JavaScript -->
|
||||
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
|
||||
<script>
|
||||
new Vue({
|
||||
el: '#app',
|
||||
@ -51,4 +50,4 @@ npm i element-ui@next -D
|
||||
</script>
|
||||
</html>
|
||||
```
|
||||
如果是通过 npm 安装，并希望配合 webpack 使用，请阅读下一节：快速上手。
|
||||
If you are using npm and wish to apply webpack, please continue to the next page: Quick Start.
|
||||
@ -1,60 +1,179 @@
|
||||
## Quickstart
|
||||
## Quick start
|
||||
|
||||
Element UI is a background components library that help you develop your background projects faster and easier.
|
||||
This part walks you through the process of using Element in a webpack project.
|
||||
|
||||
### Install
|
||||
### Use Starter Kit
|
||||
|
||||
```bash
|
||||
$ npm install element-ui@next --save
|
||||
We provide a general [project template](https://github.com/ElementUI/element-starter) for you. For those who are familiar with [cooking](https://github.com/ElementUI/element-cooking-starter) or [Laravel](https://github.com/ElementUI/element-in-laravel-starter), we also provide corresponding templates, and you can download and use them as well.
|
||||
|
||||
If you prefer not to use them, please read the following.
|
||||
|
||||
### Config files
|
||||
|
||||
Create a new project, and its structure should be
|
||||
```text
|
||||
|- src/ --------------------- source code
|
||||
|- App.vue
|
||||
|- main.js -------------- entry
|
||||
|- .babelrc ----------------- babel config
|
||||
|- index.html --------------- HTML template
|
||||
|- package.json ------------- npm config
|
||||
|- README.md ---------------- readme
|
||||
|- webpack.config.json ------ webpack config
|
||||
```
|
||||
|
||||
### Register components
|
||||
|
||||
Import all element-ui components
|
||||
|
||||
```javascript
|
||||
import Vue from 'vue'
|
||||
import Element from 'element-ui'
|
||||
import 'element-ui/lib/theme-default/index.css'
|
||||
|
||||
// use Vue.use to register a plugin
|
||||
Vue.use(element)
|
||||
```
|
||||
|
||||
Or just import some components you need
|
||||
|
||||
use [babel-plugin-component](https://github.com/QingWei-Li/babel-plugin-component)
|
||||
|
||||
|
||||
```javascript
|
||||
import {
|
||||
Select,
|
||||
Button
|
||||
// ...
|
||||
} from 'element-ui'
|
||||
|
||||
Vue.component(Select.name, Select)
|
||||
Vue.component(Button.name, Button)
|
||||
```
|
||||
And it will be converted to
|
||||
|
||||
```javascript
|
||||
import Select from 'element-ui/lib/select';
|
||||
import 'element-ui/lib/theme-default/select.css';
|
||||
import Button from 'element-ui/lib/button';
|
||||
import 'element-ui/lib/theme-default/button.css';
|
||||
|
||||
Vue.component(Select.name, Select);
|
||||
Vue.component(Button.name, Button);
|
||||
```
|
||||
|
||||
### Use babel-plugin-component
|
||||
|
||||
Configure `.bablerc`
|
||||
Typical configurations for these config files are:
|
||||
|
||||
**.babelrc**
|
||||
```json
|
||||
{
|
||||
"plugins": ["xxx", ["component", [
|
||||
"presets": [
|
||||
["es2015", { "modules": false }]
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
<br>
|
||||
|
||||
**package.json**
|
||||
```json
|
||||
{
|
||||
"name": "my-project",
|
||||
"description": "A Vue.js and Element project",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "cross-env NODE_ENV=development webpack-dev-server --inline --hot --port 8086",
|
||||
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
|
||||
},
|
||||
"dependencies": {
|
||||
"element-ui": "^1.0.0",
|
||||
"vue": "^2.0.5"
|
||||
},
|
||||
"devDependencies": {
|
||||
"babel-core": "^6.0.0",
|
||||
"babel-loader": "^6.0.0",
|
||||
"babel-preset-es2015": "^6.13.2",
|
||||
"cross-env": "^1.0.6",
|
||||
"css-loader": "^0.23.1",
|
||||
"file-loader": "^0.8.5",
|
||||
"style-loader": "^0.13.1",
|
||||
"vue-loader": "^9.5.1",
|
||||
"webpack": "2.1.0-beta.22",
|
||||
"webpack-dev-server": "^2.1.0-beta.0"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
<br>
|
||||
|
||||
**webpack.config.js**
|
||||
```javascript
|
||||
var path = require('path')
|
||||
var webpack = require('webpack')
|
||||
|
||||
module.exports = {
|
||||
entry: './src/main.js',
|
||||
output: {
|
||||
path: path.resolve(__dirname, './dist'),
|
||||
publicPath: '/dist/',
|
||||
filename: 'build.js'
|
||||
},
|
||||
resolveLoader: {
|
||||
root: path.join(__dirname, 'node_modules')
|
||||
},
|
||||
module: {
|
||||
loaders: [
|
||||
{
|
||||
test: /\.vue$/,
|
||||
loader: 'vue'
|
||||
},
|
||||
{
|
||||
test: /\.js$/,
|
||||
loader: 'babel',
|
||||
exclude: /node_modules/
|
||||
},
|
||||
{
|
||||
test: /\.css$/,
|
||||
loader: 'style!css'
|
||||
},
|
||||
{
|
||||
test: /\.(eot|svg|ttf|woff|woff2)$/,
|
||||
loader: 'file'
|
||||
},
|
||||
{
|
||||
test: /\.(png|jpg|gif|svg)$/,
|
||||
loader: 'file',
|
||||
query: {
|
||||
name: '[name].[ext]?[hash]'
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
devServer: {
|
||||
historyApiFallback: true,
|
||||
noInfo: true
|
||||
},
|
||||
devtool: '#eval-source-map'
|
||||
}
|
||||
|
||||
if (process.env.NODE_ENV === 'production') {
|
||||
module.exports.devtool = '#source-map'
|
||||
// http://vue-loader.vuejs.org/en/workflow/production.html
|
||||
module.exports.plugins = (module.exports.plugins || []).concat([
|
||||
new webpack.DefinePlugin({
|
||||
'process.env': {
|
||||
NODE_ENV: '"production"'
|
||||
}
|
||||
}),
|
||||
new webpack.optimize.UglifyJsPlugin({
|
||||
compress: {
|
||||
warnings: false
|
||||
}
|
||||
})
|
||||
])
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
### Import Element
|
||||
|
||||
You can import Element entirely, or just import what you need. Let's start with fully import.
|
||||
|
||||
#### Fully import
|
||||
|
||||
In main.js:
|
||||
```javascript
|
||||
import Vue from 'vue'
|
||||
import ElementUI from 'element-ui'
|
||||
import 'element-ui/lib/theme-default/index.css'
|
||||
import App from './App.vue'
|
||||
|
||||
Vue.use(MintUI)
|
||||
|
||||
new Vue({
|
||||
el: '#app',
|
||||
render: h => h(App)
|
||||
})
|
||||
```
|
||||
The above imports Element entirely. Note that CSS file needs to be imported separately.
|
||||
|
||||
#### On demand
|
||||
|
||||
With the help of [babel-plugin-component](https://github.com/QingWei-Li/babel-plugin-component), we can import components we actually need, making the project smaller than otherwise.
|
||||
|
||||
First, install babel-plugin-component:
|
||||
|
||||
```bash
|
||||
npm install babel-plugin-component -D
|
||||
```
|
||||
|
||||
Then edit .babelrc:
|
||||
```json
|
||||
{
|
||||
"presets": [
|
||||
["es2015", { "modules": false }]
|
||||
],
|
||||
"plugins": [["component", [
|
||||
{
|
||||
"libraryName": "element-ui",
|
||||
"styleLibraryName": "theme-default"
|
||||
@ -63,24 +182,38 @@ Configure `.bablerc`
|
||||
}
|
||||
```
|
||||
|
||||
### Import components by \<style\> and \<script\> tags
|
||||
Next, if you need Button and Select, edit main.js:
|
||||
|
||||
Be careful, **import vue.js before element**, just like if you want to use a jquery-plugin, first of all, you must import jquery.
|
||||
```javascript
|
||||
import Vue from 'vue'
|
||||
import { Button, Select } from 'element-ui'
|
||||
import App from './App.vue'
|
||||
|
||||
This is a [demo](https://codepen.io/QingWei-Li/pen/ozYpNA) about how to use it by cdn, and we use unpkg cdn in this case.
|
||||
Vue.component(Button.name, Button)
|
||||
Vue.component(Select.name, Select)
|
||||
/* or
|
||||
* Vue.use(Button)
|
||||
* Vue.use(Select)
|
||||
*/
|
||||
|
||||
```html
|
||||
<!-- import style -->
|
||||
<link rel="stylesheet" href="//unpkg.com/element-ui@1.0.0-rc.4/lib/theme-default/index.css">
|
||||
|
||||
<!-- body -->
|
||||
|
||||
<!--import script -->
|
||||
<!-- you need import Vue.js before import element -->
|
||||
<script src="//unpkg.com/vue@2.0.0-rc.6/dist/vue.js"></script>
|
||||
<script src="//unpkg.com/element-ui@1.0.0-rc.4/lib/index.js"></script>
|
||||
new Vue({
|
||||
el: '#app',
|
||||
render: h => h(App)
|
||||
})
|
||||
```
|
||||
|
||||
### Start coding
|
||||
|
||||
Now you have implemented Vue and Element to your project, and it's time to write your code. Start development mode:
|
||||
|
||||
```bash
|
||||
# visit localhost:8086
|
||||
npm run dev
|
||||
```
|
||||
|
||||
Build:
|
||||
|
||||
```bash
|
||||
npm run build
|
||||
```
|
||||
Please refer to each component's documentation to learn how to use them.
|
||||
|
||||
@ -16,13 +16,13 @@
|
||||
|
||||
## Steps
|
||||
|
||||
Step-by-step guide to guide the user to complete the task in accordance with the process. Its steps can be set according to the actual application scenario and the number of the steps can't be less than 2.
|
||||
Guide the user to complete tasks in accordance with the process. Its steps can be set according to the actual application scenario and the number of the steps can't be less than 2.
|
||||
|
||||
### How to use
|
||||
### Basic usage
|
||||
|
||||
Simple step bar.
|
||||
|
||||
:::demo Set `active` attribute with `Number` type, which indicates the index of steps and starts from 0. You can set `space` attribute when the width of the step needs to be fixed which accepts `Boolean` type. The unit of the `space` attribute is `px`. If not set, it is adaptive. Setting the `finish-status` attribute can change the state of the steps that have been completed.
|
||||
:::demo Set `active` attribute with `Number` type, which indicates the index of steps and starts from 0. You can set `space` attribute when the width of the step needs to be fixed which accepts `Boolean` type. The unit of the `space` attribute is `px`. If not set, it is responsive. Setting the `finish-status` attribute can change the state of the steps that have been completed.
|
||||
|
||||
```html
|
||||
<el-steps :space="100" :active="active" finish-status="success">
|
||||
@ -55,7 +55,7 @@ Simple step bar.
|
||||
|
||||
Shows the status of the step for each step.
|
||||
|
||||
:::demo Use `title` attribute to set the name of the step, or override the attribute setting with `slot`. We have list all the slot name for you at the end of the document.
|
||||
:::demo Use `title` attribute to set the name of the step, or override the attribute by using a named `slot`. We have listed all the slot names for you at the end of this page.
|
||||
|
||||
```html
|
||||
<el-steps :space="100" :active="1" finish-status="success">
|
||||
@ -73,19 +73,18 @@ There is description for each step.
|
||||
:::demo
|
||||
```html
|
||||
<el-steps :space="200" :active="1">
|
||||
<el-step title="Step 1" description="description"></el-step>
|
||||
<el-step title="Step 2" description="description"></el-step>
|
||||
<el-step title="Step 3" description="description"></el-step>
|
||||
<el-step title="Step 1" description="Some description"></el-step>
|
||||
<el-step title="Step 2" description="Some description"></el-step>
|
||||
<el-step title="Step 3" description="Some description"></el-step>
|
||||
</el-steps>
|
||||
```
|
||||
:::
|
||||
|
||||
### Step bar with icon
|
||||
|
||||
|
||||
A variety of custom icons can be used in the step bar.
|
||||
|
||||
:::demo The icon is set by the `icon` property, The types of icons can be found in the document for the Icon component, in addition, you can customize the icon through the slot name.
|
||||
:::demo The icon is set by the `icon` property. The types of icons can be found in the document for the Icon component. In addition, you can customize the icon through a named `slot`.
|
||||
|
||||
```html
|
||||
<el-steps :space="100" :active="1">
|
||||
@ -113,26 +112,26 @@ Vertical step bars.
|
||||
|
||||
### Steps Attributes
|
||||
|
||||
| Attribute | Description | Type | Options | Default |
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| space | The spacing of each step, will be adaptive spacing if not set | Number | — | — |
|
||||
| space | the spacing of each step, will be responsive if omitted | Number | — | — |
|
||||
| direction | display direction | string | vertical/horizontal | horizontal |
|
||||
| active | Sets the current activation step | number | — | 0 |
|
||||
| process-status | Sets the status of current step | string | wait/process/finish/error/success | process |
|
||||
| finish-status | Sets the status of end step | string | wait/process/finish/error/success | finish |
|
||||
| align-center | align center | boolean | false, true | false |
|
||||
| active | current activation step | number | — | 0 |
|
||||
| process-status | status of current step | string | wait/process/finish/error/success | process |
|
||||
| finish-status | status of end step | string | wait/process/finish/error/success | finish |
|
||||
| align-center | whether step description is centered | boolean | — | false |
|
||||
|
||||
### Step Attributes
|
||||
| Attribute | Description | Type | Options | Default |
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| title | Title | string | — | — |
|
||||
| description | Description | string | — | — |
|
||||
| icon | Icon| Icons provided by Element Icon, can be written through the slot if you want to use <br> custom icon| string | — |
|
||||
| title | step title | string | — | — |
|
||||
| description | step description | string | — | — |
|
||||
| icon | step icon | icons provided by Element Icon. Can be overwritten by a named slot if you want to use <br> custom icons | string | — |
|
||||
|
||||
### Step Slot
|
||||
| name | Description |
|
||||
| Name | Description |
|
||||
|----|----|
|
||||
| icon | Icon |
|
||||
| title | Title |
|
||||
| description | Description |
|
||||
| icon | custom icon |
|
||||
| title | step title |
|
||||
| description | step description |
|
||||
|
||||
|
||||
@ -1,12 +1,22 @@
|
||||
## switch
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value1: true,
|
||||
value2: true,
|
||||
value3: true
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
Switch component is used for switching the component between two opposing state.
|
||||
## Switch
|
||||
|
||||
### How to use
|
||||
Switch is used for switching between two opposing states.
|
||||
|
||||
Use `v-model` directly to bind a **boolean** value to this component and control the opposing states. Additionally you can add `on-text` or `off-text` attribute to show the message when the component is `on` or `off`, respectively. The `on-color` and `off-color` attribute decides the backgroundcolor of this component in different states.
|
||||
### Basic usage
|
||||
|
||||
:::demo
|
||||
:::demo Bind `v-model` to a `Boolean` typed variable. You can add `on-text` or `off-text` attribute to show texts when the component is `on` or `off`, respectively. The `on-color` and `off-color` attribute decides the background color in two states.
|
||||
|
||||
```html
|
||||
<el-switch
|
||||
@ -23,11 +33,9 @@ Use `v-model` directly to bind a **boolean** value to this component and control
|
||||
|
||||
:::
|
||||
|
||||
### disabled
|
||||
### Disabled
|
||||
|
||||
`disabled` attribute means whether the component need to be disabled or not.
|
||||
|
||||
:::demo
|
||||
:::demo Adding the `disabled` attribute disables Switch.
|
||||
|
||||
```html
|
||||
<el-switch
|
||||
@ -46,21 +54,20 @@ Use `v-model` directly to bind a **boolean** value to this component and control
|
||||
|
||||
### Attributes
|
||||
|
||||
Attribute | Description | Type | Options | Default
|
||||
Attribute | Description | Type | Accepted Values | Default
|
||||
----| ----| ----| ----|----
|
||||
disbaled | Disable the component or not | boolean | --- | false
|
||||
width| The width of component | number | --- | 58 (with text) / 46 (no text)
|
||||
on-close-icon| If component is in 'on' state, set the classes of icon | string | ---| ---
|
||||
off-close-icon|If component is in 'off' state, set the classes of icon| string | ---| ---
|
||||
on-text | If component is in 'on' state, set the text of component | string | --- | ON
|
||||
off-text | If component is in 'off' state, set the text of component | string | --- | OFF
|
||||
on-color | If component is in 'on' state, set the background color of component | string | --- | <span style="background-color: #20A0FF">#20A0FF</span>
|
||||
off-color | If component is in 'off' state, set the background color of component | string | --- | <span style="background-color: #C0CCDA">#C0CCDA</span>
|
||||
name| The name of component | string | --- | ---
|
||||
disabled | whether Switch is disabled | boolean | — | false
|
||||
width | width of Switch | number | — | 58 (with text) / 46 (no text)
|
||||
on-close-icon | class name of the icon displayed when in `on` state, overrides `on-text` | string | — | —
|
||||
off-close-icon |class name of the icon displayed when in `off` state, overrides `off-text`| string | — | —
|
||||
on-text | text displayed when in `on` state | string | — | ON
|
||||
off-text | text displayed when in `off` state | string | — | OFF
|
||||
on-color | background color when in `on` state | string | — | #20A0FF
|
||||
off-color | background color when in `off` state | string | — | #C0CCDA
|
||||
name| input name of Switch | string | — | —
|
||||
|
||||
### Events
|
||||
|
||||
Event | Description | Callback Parameter
|
||||
Event Name | Description | Parameters
|
||||
---- | ----| ----
|
||||
change | Change the state and then trigger the callback function | ---
|
||||
|
||||
change | triggers when value changes | value after changing
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,27 +1,54 @@
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
activeName: 'first',
|
||||
tabs: [
|
||||
{label: 'User', content: '', name: 'first'},
|
||||
{label: 'Config', content: '', name: 'second'},
|
||||
{label: 'Role', content: '', name: 'third'},
|
||||
{label: 'Task', content: '', name: 'last'}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleRemove(tab) {
|
||||
console.log(tab);
|
||||
},
|
||||
handleClick(tab, event) {
|
||||
console.log(tab, event);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
## Tabs
|
||||
|
||||
Divide data collections which have related contents however belong to different types.
|
||||
Divide data collections which are related yet belong to different types.
|
||||
|
||||
### How to use
|
||||
### Basic usage
|
||||
|
||||
Basic and concise tabs.
|
||||
|
||||
:::demo Tabs provide a selective card functionality and it can be achieved only by using `el-tabs` and child element `el-tab-pane`. In these two elements, we provide a list of attributes. The `label` in `el-tab-pane` determines the label of selective cards, you can write content in the label; In the next example, we add a `active-name` attribute in `el-tabs`, which can take a `String` value. It means an active card. In the `el-tab-pane` you can set corresponding `name` attribute,if there is no `name`, then the default sequence is `1`/`2`/`3`/`4`. In the example, the selected card is card 2. Since there's no `name`, then set `active-name` to `2` can reach the same goal.
|
||||
:::demo Tabs provide a selective card functionality and it can be achieved by just using `el-tabs` and child element `el-tab-pane`. In these two elements, we provide a list of attributes. The `label` in `el-tab-pane` determines the label of selective cards, and you can write content in the label. In this example, we add a `active-name` attribute indicating the active card in `el-tabs`, which can take a `String` value. In the `el-tab-pane` you can set corresponding `name` attribute, and if there is no `name`, the default sequence is `1`/`2`/`3`/`4`. In this example, the selected card is card 2. If `name` is omitted, setting `active-name` to `2` can reach the same goal.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-tabs>
|
||||
<el-tab-pane label="User Admin"></el-tab-pane>
|
||||
<el-tab-pane label="Config Admin"></el-tab-pane>
|
||||
<el-tab-pane label="Role Admin"></el-tab-pane>
|
||||
<el-tab-pane label="Task Compensation"></el-tab-pane>
|
||||
</el-tabs>
|
||||
<el-tabs :active-name="activeName">
|
||||
<el-tab-pane v-for="tab in tabs" :label="tab.label" :name="tab.name">{{tab.content}}</el-tab-pane>
|
||||
</el-tabs>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
activeName: 'first'
|
||||
activeName: 'first',
|
||||
tabs: [
|
||||
{label: 'User', content: '', name: 'first'},
|
||||
{label: 'Config', content: '', name: 'second'},
|
||||
{label: 'Role', content: '', name: 'third'},
|
||||
{label: 'Task', content: '', name: 'last'}
|
||||
]
|
||||
};
|
||||
}
|
||||
};
|
||||
@ -31,17 +58,17 @@ Basic and concise tabs.
|
||||
|
||||
### Card Style
|
||||
|
||||
Selective card style tabs.
|
||||
Tabs styled as cards.
|
||||
|
||||
:::demo Set `type` to `card` can get a selective card style tab.
|
||||
:::demo Set `type` to `card` can get a card-styled tab.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-tabs type="card" @tab-click="handleClick" @tab-remove="handleRemove">
|
||||
<el-tab-pane label="User Admin"></el-tab-pane>
|
||||
<el-tab-pane label="Config Admin"></el-tab-pane>
|
||||
<el-tab-pane label="Role Admin"></el-tab-pane>
|
||||
<el-tab-pane label="Task Compensation"></el-tab-pane>
|
||||
<el-tab-pane label="User"></el-tab-pane>
|
||||
<el-tab-pane label="Config"></el-tab-pane>
|
||||
<el-tab-pane label="Role"></el-tab-pane>
|
||||
<el-tab-pane label="Task"></el-tab-pane>
|
||||
</el-tabs>
|
||||
</template>
|
||||
<script>
|
||||
@ -50,8 +77,8 @@ Selective card style tabs.
|
||||
handleRemove(tab) {
|
||||
console.log(tab);
|
||||
},
|
||||
handleClick(tab) {
|
||||
console.log(tab);
|
||||
handleClick(tab, event) {
|
||||
console.log(tab, event);
|
||||
}
|
||||
}
|
||||
};
|
||||
@ -63,15 +90,15 @@ Selective card style tabs.
|
||||
|
||||
Closable tabs.
|
||||
|
||||
:::demo You can set `closable` attribute in `el-tabs`.It accept `Boolean` and it will be closable when the boolean is `true`.
|
||||
:::demo You can set `closable` attribute in `el-tabs`. It accept `Boolean` and Tab will be closable when the boolean is `true`.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-tabs type="card" :closable="true" @tab-click="handleClick" @tab-remove="handleRemove">
|
||||
<el-tab-pane label="User Admin"></el-tab-pane>
|
||||
<el-tab-pane label="Config Admin"></el-tab-pane>
|
||||
<el-tab-pane label="Role Admin"></el-tab-pane>
|
||||
<el-tab-pane label="Task Compensation"></el-tab-pane>
|
||||
<el-tab-pane label="User"></el-tab-pane>
|
||||
<el-tab-pane label="Config"></el-tab-pane>
|
||||
<el-tab-pane label="Role"></el-tab-pane>
|
||||
<el-tab-pane label="Task"></el-tab-pane>
|
||||
</el-tabs>
|
||||
</template>
|
||||
<script>
|
||||
@ -80,8 +107,8 @@ Closable tabs.
|
||||
handleRemove(tab) {
|
||||
console.log(tab);
|
||||
},
|
||||
handleClick(tab) {
|
||||
console.log(tab);
|
||||
handleClick(tab, event) {
|
||||
console.log(tab, event);
|
||||
}
|
||||
}
|
||||
};
|
||||
@ -98,32 +125,30 @@ Border card tabs.
|
||||
|
||||
```html
|
||||
<el-tabs type="border-card">
|
||||
<el-tab-pane label="User Admin"></el-tab-pane>
|
||||
<el-tab-pane label="Config Admin"></el-tab-pane>
|
||||
<el-tab-pane label="Role Admin"></el-tab-pane>
|
||||
<el-tab-pane label="Task Compensation"></el-tab-pane>
|
||||
<el-tab-pane label="User"></el-tab-pane>
|
||||
<el-tab-pane label="Config"></el-tab-pane>
|
||||
<el-tab-pane label="Role"></el-tab-pane>
|
||||
<el-tab-pane label="Task"></el-tab-pane>
|
||||
</el-tabs>
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
### Tabs Attributes
|
||||
| Attribute | Description | Type | Options | Default |
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| type | Tabs type | string | card, border-card | — |
|
||||
| closable | If can close the tab | boolean | true, false | false |
|
||||
| active-name | Name of the selected card | string | — | Name of first selective card |
|
||||
| type | type of Tab | string | card/border-card | — |
|
||||
| closable | whether Tab is closable | boolean | — | false |
|
||||
| active-name | name of the selected tab | string | — | name of first tab |
|
||||
|
||||
### Tabs Events
|
||||
|
||||
| Event name | Description | Callback parameter |
|
||||
| Event Name | Description | Parameters |
|
||||
|---------- |-------- |---------- |
|
||||
| tab-click | Hook function when tab is clicked | Clicked tab |
|
||||
| tab-remove | Hook function when tab is removed | Removed tab |
|
||||
| tab-click | triggers when a tab is clicked | clicked tab |
|
||||
| tab-remove | triggers when a tab is removed | removed tab |
|
||||
|
||||
### Tab-pane Attributes
|
||||
|
||||
| Attribute | Description | Type | Options | Default |
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| label | Card label | string | — | — |
|
||||
| name | The identifier corresponding to the activeName of the selective card, representing the alias of the selective card | string | — | The ordinal number of the selective card in the sequence, i.e. the first one is '1' |
|
||||
| label | title of the tab | string | — | — |
|
||||
| name | identifier corresponding to the activeName of Tabs, representing the alias of the tab-pane | string | — | ordinal number of the tab-pane in the sequence, i.e. the first tab-pane is '1' |
|
||||
|
||||
@ -3,12 +3,12 @@
|
||||
data() {
|
||||
return {
|
||||
tags: [
|
||||
{ key: 1, name: 'Label one', type: '' },
|
||||
{ key: 2, name: 'Label Two', type: 'gray' },
|
||||
{ key: 5, name: 'Label Three', type: 'primary' },
|
||||
{ key: 3, name: 'Label Four', type: 'success' },
|
||||
{ key: 4, name: 'Label Five', type: 'warning' },
|
||||
{ key: 6, name: 'Label Six', type: 'danger' }
|
||||
{ key: 1, name: 'Tag one', type: '' },
|
||||
{ key: 2, name: 'Tag Two', type: 'gray' },
|
||||
{ key: 5, name: 'Tag Three', type: 'primary' },
|
||||
{ key: 3, name: 'Tag Four', type: 'success' },
|
||||
{ key: 4, name: 'Tag Five', type: 'warning' },
|
||||
{ key: 6, name: 'Tag Six', type: 'danger' }
|
||||
]
|
||||
};
|
||||
},
|
||||
@ -32,23 +32,23 @@
|
||||
|
||||
Used for marking and selection.
|
||||
|
||||
### How to use
|
||||
### Basic usage
|
||||
|
||||
::: demo It's defined by the `type` attribute, which is optional.
|
||||
::: demo Use the `type` attribute to define Tag's type.
|
||||
|
||||
```html
|
||||
<el-tag>Label One</el-tag>
|
||||
<el-tag type="gray">Label Two</el-tag>
|
||||
<el-tag type="primary">Label Three</el-tag>
|
||||
<el-tag type="success">Label Four</el-tag>
|
||||
<el-tag type="warning">Label Five</el-tag>
|
||||
<el-tag type="danger">Label Six</el-tag>
|
||||
<el-tag>Tag One</el-tag>
|
||||
<el-tag type="gray">Tag Two</el-tag>
|
||||
<el-tag type="primary">Tag Three</el-tag>
|
||||
<el-tag type="success">Tag Four</el-tag>
|
||||
<el-tag type="warning">Tag Five</el-tag>
|
||||
<el-tag type="danger">Tag Six</el-tag>
|
||||
```
|
||||
:::
|
||||
|
||||
### Removable Label
|
||||
### Removable Tag
|
||||
|
||||
:::demo Set the `closable` attribute to define a removeable tag, it can accepts a `Boolean` and you can set it with `true`. The removal of default label is accompanied by a gradient animation. If you don't want to use it, you can set the `close-transition` attribute, it accepts a `Boolean`, and will be turn off if set true. Setting the `close` event to handle the callback function after closing.
|
||||
:::demo Set the `closable` attribute to define a removable tag. It accepts a `Boolean`. By default the removal of Tag has a fading animation. If you don't want to use it, you can set the `close-transition` attribute, which accepts a `Boolean`, to `true`. `close` event triggers when Tag is removed.
|
||||
|
||||
```html
|
||||
<el-tag
|
||||
@ -67,12 +67,12 @@ Used for marking and selection.
|
||||
data() {
|
||||
return {
|
||||
tags: [
|
||||
{ key: 1, name: 'Label One', type: '' },
|
||||
{ key: 2, name: 'Label Two', type: 'gray' },
|
||||
{ key: 5, name: 'Label Three', type: 'primary' },
|
||||
{ key: 3, name: 'Label Four', type: 'success' },
|
||||
{ key: 4, name: 'Label Five', type: 'warning' },
|
||||
{ key: 6, name: 'Label Six', type: 'danger' }
|
||||
{ key: 1, name: 'Tag One', type: '' },
|
||||
{ key: 2, name: 'Tag Two', type: 'gray' },
|
||||
{ key: 5, name: 'Tag Three', type: 'primary' },
|
||||
{ key: 3, name: 'Tag Four', type: 'success' },
|
||||
{ key: 4, name: 'Tag Five', type: 'warning' },
|
||||
{ key: 6, name: 'Tag Six', type: 'danger' }
|
||||
]
|
||||
};
|
||||
},
|
||||
@ -87,15 +87,15 @@ Used for marking and selection.
|
||||
:::
|
||||
|
||||
### Attributes
|
||||
| Parameter | Description | Type | Options | Default |
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| type | theme | string | 'primary', 'gray', 'success', 'warning', 'danger' | — |
|
||||
| closable | Whether it can be closed | boolean | — | false |
|
||||
| close-transition | Whether gradient animation is disabled or not | boolean | — | false |
|
||||
| hit | Is there a border stroke| boolean | — | false |
|
||||
| type | theme | string | primary/gray/success/warning/danger | — |
|
||||
| closable | whether Tab can be removed | boolean | — | false |
|
||||
| close-transition | whether the removal animation is disabled | boolean | — | false |
|
||||
| hit | whether Tag has a highlighted border | boolean | — | false |
|
||||
|
||||
|
||||
### Events
|
||||
| Event | Description | Callback |
|
||||
| Event Name | Description | Parameters |
|
||||
|---------- |-------- |---------- |
|
||||
| close | The event fired when the tab is closed | — |
|
||||
| close | triggers when Tab is removed | — |
|
||||
@ -9,7 +9,8 @@ npm i element-theme -D
|
||||
|
||||
安装默认主题，可以从 npm 安装或者从 GitHub 拉取最新代码。
|
||||
```shell
|
||||
npm i element-theme-default@next -D
|
||||
# 从 npm
|
||||
npm i element-theme-default -D
|
||||
|
||||
# 从 GitHub
|
||||
npm i https://github.com/ElementUI/theme-default -D
|
||||
@ -24,7 +25,7 @@ node_modules/.bin/et -i [可以自定义变量文件目录]
|
||||
> ✔ Generator variables file
|
||||
```
|
||||
|
||||
如果使用默认配置，执行后当前目录会有一个 `element-variables.css` 文件。内部包含了主题所用到了所有变量，它们使用 CSS4 的风格定义。大致结构如下：
|
||||
如果使用默认配置，执行后当前目录会有一个 `element-variables.css` 文件。内部包含了主题所用到的所有变量，它们使用 CSS4 的风格定义。大致结构如下：
|
||||
```css
|
||||
:root {
|
||||
|
||||
@ -82,4 +83,4 @@ Vue.use(ElementUI)
|
||||
}
|
||||
```
|
||||
|
||||
如果不清楚 `babel-plugin-component` 是什么，请阅读 [快速上手](./examples/docs/zh-CN/quickstart.md) 一节。更多 `element-theme` 用法请参考[项目仓库](https://github.com/ElementUI/element-theme)。
|
||||
如果不清楚 `babel-plugin-component` 是什么，请阅读 <a href="./#/zh-CN/component/quickstart">快读上手</a> 一节。更多 `element-theme` 用法请参考[项目仓库](https://github.com/ElementUI/element-theme)。
|
||||
|
||||
@ -1,3 +1,13 @@
|
||||
<style>
|
||||
ul.language-list {
|
||||
color: #5e6d82;
|
||||
font-size: 14px;
|
||||
padding-left: 20px;
|
||||
li {
|
||||
line-height: 1.8
|
||||
}
|
||||
}
|
||||
</style>
|
||||
## 国际化
|
||||
|
||||
Element 组件内部默认使用中文，若希望使用其他语言，则需要进行多语言设置。以英文为例，在 main.js 中：
|
||||
@ -39,10 +49,12 @@ Vue.component(Select.name, Select)
|
||||
}
|
||||
```
|
||||
|
||||
目前 Element 内置了以下语言：
|
||||
- 汉语
|
||||
- 英语
|
||||
- 德语
|
||||
- 葡萄牙语
|
||||
目前 Element 内置了以下语言：
|
||||
<ul class="language-list">
|
||||
<li>汉语（zh-CN）</li>
|
||||
<li>英语（en）</li>
|
||||
<li>德语（de）</li>
|
||||
<li>葡萄牙语（pt）</li>
|
||||
</ul>
|
||||
|
||||
如果你需要使用其他的语言，欢迎贡献 PR：只需在 [这里](https://github.com/ElemeFE/element/tree/master/src/locale/lang) 添加一个语言配置文件即可。
|
||||
|
||||
@ -12,9 +12,9 @@ npm i element-ui -D
|
||||
|
||||
```html
|
||||
<!-- 引入样式 -->
|
||||
<link rel="stylesheet" href="https://unpkg.com/element-ui@1.0.0/lib/theme-default/index.css">
|
||||
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-default/index.css">
|
||||
<!-- 引入组件库 -->
|
||||
<script src="https://unpkg.com/element-ui@1.0.0/lib/index.js"></script>
|
||||
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
|
||||
```
|
||||
|
||||
### Hello world
|
||||
@ -26,7 +26,7 @@ npm i element-ui -D
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<!-- 引入样式 -->
|
||||
<link rel="stylesheet" href="https://unpkg.com/element-ui@1.0.0/lib/theme-default/index.css">
|
||||
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-default/index.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
@ -37,9 +37,9 @@ npm i element-ui -D
|
||||
</div>
|
||||
</body>
|
||||
<!-- 先引入 Vue -->
|
||||
<script src="https://unpkg.com/vue@2.0.5/dist/vue.js"></script>
|
||||
<script src="https://unpkg.com/vue/dist/vue.js"></script>
|
||||
<!-- 引入组件库 -->
|
||||
<script src="https://unpkg.com/element-ui@1.0.0/lib/index.js"></script>
|
||||
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
|
||||
<script>
|
||||
new Vue({
|
||||
el: '#app',
|
||||
|
||||
@ -182,7 +182,7 @@ npm install babel-plugin-component -D
|
||||
}
|
||||
```
|
||||
|
||||
如果你只希望引入部分组件，比如 Button 和 Select，那么需要在 main.js 中写入以下内容：
|
||||
接下来，如果你只希望引入部分组件，比如 Button 和 Select，那么需要在 main.js 中写入以下内容：
|
||||
|
||||
```javascript
|
||||
import Vue from 'vue'
|
||||
@ -202,47 +202,6 @@ new Vue({
|
||||
})
|
||||
```
|
||||
|
||||
### 多语言设置
|
||||
|
||||
Element 组件内部默认使用中文，若希望使用其他语言，则需要进行多语言设置。以英文为例，在 main.js 中：
|
||||
|
||||
```javascript
|
||||
// 完整引入 Element
|
||||
import Vue from 'vue'
|
||||
import ElementUI from 'element-ui'
|
||||
import locale from 'element-ui/lib/locale/lang/en'
|
||||
|
||||
Vue.use(ElementUI, { locale })
|
||||
```
|
||||
|
||||
或
|
||||
|
||||
```javascript
|
||||
// 按需引入 Element
|
||||
import Vue from 'vue'
|
||||
import { Button, Select } from 'element-ui'
|
||||
import lang from 'element-ui/lib/locale/lang/en'
|
||||
import locale from 'element-ui/lib/locale'
|
||||
|
||||
// 设置语言
|
||||
locale.use(lang)
|
||||
|
||||
// 引入组件
|
||||
Vue.component(Button.name, Button)
|
||||
Vue.component(Select.name, Select)
|
||||
```
|
||||
|
||||
如果使用其它语言，默认情况下中文语言包依旧是被引入的，可以使用 webpack 的 IgnorePlugin 忽略掉它以减少打包后的文件体积。
|
||||
|
||||
webpack.config.js
|
||||
```javascript
|
||||
{
|
||||
plugins: [
|
||||
new webpack.IgnorePlugin(/element-ui\/lib\/locale\/lang\/zh-CN/)
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
### 开始使用
|
||||
|
||||
至此，一个基于 Vue 和 Element 的开发环境已经搭建完毕，现在就可以编写代码了。启动开发模式：
|
||||
|
||||
@ -80,7 +80,7 @@
|
||||
### 带图标的步骤条
|
||||
步骤条内可以启用各种自定义的图标。
|
||||
|
||||
:::demo 通过`icon`属性来设置图标，图标的类型可以参考 Icon 组件的文档，除此以外，还能通过 slot name 来使用自定义的图标。
|
||||
:::demo 通过`icon`属性来设置图标，图标的类型可以参考 Icon 组件的文档，除此以外，还能通过具名`slot`来使用自定义的图标。
|
||||
```html
|
||||
<el-steps :space="100" :active="1">
|
||||
<el-step title="步骤 1" icon="edit"></el-step>
|
||||
|
||||
@ -75,4 +75,4 @@
|
||||
### Events
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
|---------- |-------- |---------- |
|
||||
| change | switch 状态发生变化时的回调函数 | — |
|
||||
| change | switch 状态发生变化时的回调函数 | 新状态的布尔值 |
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
<script>
|
||||
import Vue from 'vue';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
@ -328,7 +327,7 @@
|
||||
|
||||
可将表格内容 highlight 显示，方便区分「成功、信息、警告、危险」等内容。
|
||||
|
||||
:::demo 可以通过指定 Table 组件的 rowClassName 属性来为 Table 中的某一行添加 class，表明该行处于某种状态。
|
||||
:::demo 可以通过指定 Table 组件的 `row-class-name` 属性来为 Table 中的某一行添加 class，表明该行处于某种状态。
|
||||
```html
|
||||
<template>
|
||||
<el-table
|
||||
@ -383,8 +382,7 @@
|
||||
}, {
|
||||
date: '2016-05-04',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄',
|
||||
$info: true
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
date: '2016-05-01',
|
||||
name: '王小虎',
|
||||
@ -392,8 +390,7 @@
|
||||
}, {
|
||||
date: '2016-05-03',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄',
|
||||
$positive: true
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}]
|
||||
}
|
||||
}
|
||||
@ -969,13 +966,13 @@
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| data | 显示的数据 | array | — | — |
|
||||
| height | table 的高度，默认高度为空，即自动高度，单位 px | string, number | — | — |
|
||||
| height | table 的高度，默认高度为空，即自动高度，单位 px | string/number | — | — |
|
||||
| stripe | 是否为斑马纹 table | boolean | — | false |
|
||||
| border | 是否带有纵向边框 | boolean | — | false |
|
||||
| fit | 列的宽度是否自撑开 | boolean | — | true |
|
||||
| highlight-current-row | 是否要高亮当前行 | boolean | - | false |
|
||||
| row-class-name | 行的 className 的回调。 | Function(row, index) | - | - |
|
||||
| row-key | 行数据的 Key，用来优化 Table 的渲染；在使用 reserve-selection 功能的情况下，该属性是必填的 | Function(row), String | - | - |
|
||||
| highlight-current-row | 是否要高亮当前行 | boolean | — | false |
|
||||
| row-class-name | 行的 className 的回调。 | Function(row, index) | — | — |
|
||||
| row-key | 行数据的 Key，用来优化 Table 的渲染；在使用 reserve-selection 功能的情况下，该属性是必填的 | Function(row)/String | — | — |
|
||||
|
||||
### Table Events
|
||||
| 事件名 | 说明 | 参数 |
|
||||
@ -988,7 +985,7 @@
|
||||
| cell-click | 当某个单元格被点击时会触发该事件 | row, column, cell, event |
|
||||
| row-click | 当某一行被点击时会触发该事件 | row, event |
|
||||
| sort-change | 当表格的排序条件发生变化的时候会触发该事件 | { column, prop, order } |
|
||||
| current-change | 当表格的当前行发生变化的时候会触发该事件，如果要高亮当前行，请打开表格的 highlight-current-row 属性 | { column, prop, order } |
|
||||
| current-change | 当表格的当前行发生变化的时候会触发该事件，如果要高亮当前行，请打开表格的 highlight-current-row 属性 | currentRow, oldCurrentRow |
|
||||
|
||||
### Table Methods
|
||||
| 方法名 | 说明 | 参数 |
|
||||
@ -1004,17 +1001,17 @@
|
||||
| prop | 对应列内容的字段名，也可以使用 property 属性 | string | — | — |
|
||||
| width | 对应列的宽度 | string | — | — |
|
||||
| min-width | 对应列的最小宽度，与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列 | string | — | — |
|
||||
| fixed | 列是否固定在左侧或者右侧，true 表示固定在左侧 | string, boolean | true, left, right | - |
|
||||
| render-header | 列标题 Label 区域渲染使用的 Function | Function(h, { column, $index }) | - | - |
|
||||
| fixed | 列是否固定在左侧或者右侧，true 表示固定在左侧 | string, boolean | true, left, right | — |
|
||||
| render-header | 列标题 Label 区域渲染使用的 Function | Function(h, { column, $index }) | — | — |
|
||||
| sortable | 对应列是否可以排序，如果设置为 'custom'，则代表用户希望远程排序，需要监听 Table 的 sort-change 事件 | boolean, string | true, false, 'custom' | false |
|
||||
| sort-method | 对数据进行排序的时候使用的方法，仅当 sortable 设置为 true 的时候有效 | Function(a, b) | - | - |
|
||||
| resizable | 对应列是否可以通过拖动改变宽度（如果需要在 el-table 上设置 border 属性为真） | boolean | — | true |
|
||||
| sort-method | 对数据进行排序的时候使用的方法，仅当 sortable 设置为 true 的时候有效 | Function(a, b) | — | — |
|
||||
| resizable | 对应列是否可以通过拖动改变宽度（需要在 el-table 上设置 border 属性为真） | boolean | — | true |
|
||||
| formatter | 用来格式化内容 | Function(row, column) | — | — |
|
||||
| show-overflow-tooltip | 当过长被隐藏时显示 tooltip | Boolean | — | false |
|
||||
| show-overflow-tooltip | 当内容过长被隐藏时显示 tooltip | Boolean | — | false |
|
||||
| inline-template | 指定该属性后可以自定义 column 模板，参考多选的时间列，通过 row 获取行信息，JSX 里通过 _self 获取当前上下文。此时不需要配置 prop 属性。总共可以获取到 `{ row(当前行), column(当前列), $index(行数), _self(当前上下文), store(table store) }` 的信息。 | — | — |
|
||||
| align | 对齐方式 | String | left, center, right | left |
|
||||
| selectable | 仅对 type=selection 的列有效，类型为 Function，Function 的返回值用来决定这一行的 CheckBox 是否可以勾选 | Function(row, index) | - | - |
|
||||
| reserve-selection | 仅对 type=selection 的列有效，类型为 Boolean，为 true 则代表会保留之前数据的选项，需要配合 Table 的 clearSelection 方法使用。 | Boolean | - | false |
|
||||
| selectable | 仅对 type=selection 的列有效，类型为 Function，Function 的返回值用来决定这一行的 CheckBox 是否可以勾选 | Function(row, index) | — | — |
|
||||
| reserve-selection | 仅对 type=selection 的列有效，类型为 Boolean，为 true 则代表会保留之前数据的选项，需要配合 Table 的 clearSelection 方法使用。 | Boolean | — | false |
|
||||
| filters | 数据过滤的选项，数组格式，数组中的元素需要有 text 和 value 属性。 | Array[{ text, value }] | — | — |
|
||||
| filter-multiple | 数据过滤的选项是否多选 | Boolean | — | true |
|
||||
| filter-method | 数据过滤使用的方法，如果是多选的筛选项，对每一条数据会执行多次，任意一次返回 true 就会显示。 | Function(value, row) | — | — |
|
||||
|
||||
@ -3,7 +3,6 @@
|
||||
data() {
|
||||
return {
|
||||
activeName: 'first',
|
||||
activeName2: '',
|
||||
tabs: [
|
||||
{label: '用户管理', content: '', name: 'first'},
|
||||
{label: '配置管理', content: '', name: 'second'},
|
||||
@ -41,6 +40,7 @@
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
activeName: 'first',
|
||||
tabs: [
|
||||
{label: '用户管理', content: '', name: 'first'},
|
||||
{label: '配置管理', content: '', name: 'second'},
|
||||
@ -75,8 +75,8 @@
|
||||
handleRemove(tab) {
|
||||
console.log(tab);
|
||||
},
|
||||
handleClick(tab) {
|
||||
console.log(tab);
|
||||
handleClick(tab, event) {
|
||||
console.log(tab, event);
|
||||
}
|
||||
}
|
||||
};
|
||||
@ -105,8 +105,8 @@
|
||||
handleRemove(tab) {
|
||||
console.log(tab);
|
||||
},
|
||||
handleClick(tab) {
|
||||
console.log(tab);
|
||||
handleClick(tab, event) {
|
||||
console.log(tab, event);
|
||||
}
|
||||
}
|
||||
};
|
||||
@ -132,8 +132,8 @@
|
||||
### Tabs Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| type | 风格类型 | string | card, border-card | — |
|
||||
| closable | 标签是否可关闭 | boolean | true, false | false |
|
||||
| type | 风格类型 | string | card/border-card | — |
|
||||
| closable | 标签是否可关闭 | boolean | — | false |
|
||||
| active-name | 选中选项卡的 name | string | — | 第一个选项卡的 name |
|
||||
|
||||
### Tabs Events
|
||||
|
||||
@ -89,7 +89,7 @@
|
||||
### Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| type | 主题 | string | 'primary', 'gray', 'success', 'warning', 'danger' | — |
|
||||
| type | 主题 | string | primary/gray/success/warning/danger | — |
|
||||
| closable | 是否可关闭 | boolean | — | false |
|
||||
| close-transition | 是否禁用关闭时的渐变动画 | boolean | — | false |
|
||||
| hit | 是否有边框描边 | boolean | — | false |
|
||||
|
||||
@ -14,10 +14,6 @@
|
||||
border-radius: var(--tag-border-radius);
|
||||
border: 1px solid var(--tag-border);
|
||||
|
||||
@when hit {
|
||||
border-color: var(--tag-primary-color);
|
||||
}
|
||||
|
||||
& .el-icon-close {
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
@ -42,6 +38,9 @@
|
||||
background-color: var(--tag-gray-fill);
|
||||
border-color: var(--tag-gray-border);
|
||||
color: var(--tag-gray-color);
|
||||
@when hit {
|
||||
border-color: var(--tag-gray-color);
|
||||
}
|
||||
|
||||
& .el-tag__close:hover {
|
||||
background-color: var(--tag-gray-color);
|
||||
@ -52,6 +51,9 @@
|
||||
background-color: var(--tag-primary-fill);
|
||||
border-color: var(--tag-primary-border);
|
||||
color: var(--tag-primary-color);
|
||||
@when hit {
|
||||
border-color: var(--tag-primary-color);
|
||||
}
|
||||
|
||||
& .el-tag__close:hover {
|
||||
background-color: var(--tag-primary-color);
|
||||
@ -62,6 +64,9 @@
|
||||
background-color: var(--tag-success-fill);
|
||||
border-color: var(--tag-success-border);
|
||||
color: var(--tag-success-color);
|
||||
@when hit {
|
||||
border-color: var(--tag-success-color);
|
||||
}
|
||||
|
||||
& .el-tag__close:hover {
|
||||
background-color: var(--tag-success-color);
|
||||
@ -72,6 +77,9 @@
|
||||
background-color: var(--tag-warning-fill);
|
||||
border-color: var(--tag-warning-border);
|
||||
color: var(--tag-warning-color);
|
||||
@when hit {
|
||||
border-color: var(--tag-warning-color);
|
||||
}
|
||||
|
||||
& .el-tag__close:hover {
|
||||
background-color: var(--tag-warning-color);
|
||||
@ -82,6 +90,9 @@
|
||||
background-color: var(--tag-danger-fill);
|
||||
border-color: var(--tag-danger-border);
|
||||
color: var(--tag-danger-color);
|
||||
@when hit {
|
||||
border-color: var(--tag-danger-color);
|
||||
}
|
||||
|
||||
& .el-tag__close:hover {
|
||||
background-color: var(--tag-danger-color);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user