From c0e331d210252fed0ae711c149af9d8570334b77 Mon Sep 17 00:00:00 2001 From: Leopoldthecoder Date: Sun, 13 Nov 2016 11:58:45 +0800 Subject: [PATCH] Review: steps/switch/tabs/tag/table --- examples/docs/en-US/custom-theme.md | 41 +- examples/docs/en-US/i18n.md | 32 +- examples/docs/en-US/installation.md | 39 +- examples/docs/en-US/quickstart.md | 257 ++++++--- examples/docs/en-US/steps.md | 45 +- examples/docs/en-US/switch.md | 51 +- examples/docs/en-US/table.md | 828 ++++++++++++++++------------ examples/docs/en-US/tabs.md | 107 ++-- examples/docs/en-US/tag.md | 58 +- examples/docs/zh-CN/custom-theme.md | 7 +- examples/docs/zh-CN/i18n.md | 22 +- examples/docs/zh-CN/installation.md | 10 +- examples/docs/zh-CN/quickstart.md | 43 +- examples/docs/zh-CN/steps.md | 2 +- examples/docs/zh-CN/switch.md | 2 +- examples/docs/zh-CN/table.md | 33 +- examples/docs/zh-CN/tabs.md | 14 +- examples/docs/zh-CN/tag.md | 2 +- packages/theme-default/src/tag.css | 19 +- 19 files changed, 930 insertions(+), 682 deletions(-) diff --git a/examples/docs/en-US/custom-theme.md b/examples/docs/en-US/custom-theme.md index 69a22323e..44bf13f16 100644 --- a/examples/docs/en-US/custom-theme.md +++ b/examples/docs/en-US/custom-theme.md @@ -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 Quick Start. For more details, check out the [project repository](https://github.com/ElementUI/element-theme) of `element-theme`. diff --git a/examples/docs/en-US/i18n.md b/examples/docs/en-US/i18n.md index b564a7a57..09f97c7f7 100644 --- a/examples/docs/en-US/i18n.md +++ b/examples/docs/en-US/i18n.md @@ -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: + + +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. diff --git a/examples/docs/en-US/installation.md b/examples/docs/en-US/installation.md index e4ccedf9f..a1700a0e4 100644 --- a/examples/docs/en-US/installation.md +++ b/examples/docs/en-US/installation.md @@ -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 - - - - + + + + ``` ### 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 - - + +
- 按钮 + Button -

欢迎使用 Element

+

Try Element
- - - - + + + + ``` -如果是通过 npm 安装，并希望配合 webpack 使用，请阅读下一节：快速上手。 +If you are using npm and wish to apply webpack, please continue to the next page: Quick Start. \ No newline at end of file diff --git a/examples/docs/en-US/quickstart.md b/examples/docs/en-US/quickstart.md index d7f288876..31c1b897a 100644 --- a/examples/docs/en-US/quickstart.md +++ b/examples/docs/en-US/quickstart.md @@ -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 }] + ] +} +``` + +
+ +**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" + } +} +``` + +
+ +**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 \ and \ 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 - - - - - - - - - +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. diff --git a/examples/docs/en-US/steps.md b/examples/docs/en-US/steps.md index f0828cddc..26d619b43 100644 --- a/examples/docs/en-US/steps.md +++ b/examples/docs/en-US/steps.md @@ -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 @@ -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 @@ -73,19 +73,18 @@ There is description for each step. :::demo ```html - - - + + + ``` ::: ### 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 @@ -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
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
custom icons | string | — | ### Step Slot -| name | Description | +| Name | Description | |----|----| -| icon | Icon | -| title | Title | -| description | Description | +| icon | custom icon | +| title | step title | +| description | step description | diff --git a/examples/docs/en-US/switch.md b/examples/docs/en-US/switch.md index 7f6f92356..5c42cb1b9 100644 --- a/examples/docs/en-US/switch.md +++ b/examples/docs/en-US/switch.md @@ -1,12 +1,22 @@ -## switch + -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 #20A0FF -off-color | If component is in 'off' state, set the background color of component | string | --- | #C0CCDA -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 diff --git a/examples/docs/en-US/table.md b/examples/docs/en-US/table.md index 3feba4add..627cf2da7 100644 --- a/examples/docs/en-US/table.md +++ b/examples/docs/en-US/table.md @@ -1,5 +1,4 @@ +``` +::: + ### Table Attributes -| Attribute | Description | Type | Options | Default | +| Attribute | Description | Type | Accepted Values | Default | |---------- |-------------- |---------- |-------------------------------- |-------- | -| data | data to display | array | — | — | -| height | table 's height, default is null, meaning height is set automatically | string | — | — | -| stripe | whether stripe table or not| boolean | — | false | -| border | whether has border in vertical orientation or not | boolean | — | false | -| fit | whether width of column automatically distract or not | boolean | — | true | -| selection-mode | select mode | string | single/multiple/none | none | -| allow-no-selection | whether is allowed to be empty or not in Single Select | boolean | — | false | -| fixed-column-count | fixed columns counts | number | — | 0 | +| data | table data | array | — | — | +| height | table's height. By default | string/number | — | — | +| stripe | whether table is striped | boolean | — | false | +| border | whether table has vertical border | boolean | — | false | +| fit | whether width of column automatically fits its container | boolean | — | true | +| highlight-current-row | whether current row is highlighted | boolean | — | false | +| row-class-name | function that returns custom class names for a row | Function(row, index) | — | — | +| row-key | Key of row data, used for optimizing rendering. Required if `reserve-selection` is on | Function(row)/String | — | — | ### Table Events -| Event | Description | Paramters | +| Event Name | Description | Parameters | | ---- | ---- | ---- | -| selectionchange | triggered when selection changes | selected | -| cellmouseenter | triggered when hovering on cell| row, column, cell, event | -| cellmouseleave | triggered when hovering leave cell | row, column, cell, event | -| cellclick | triggered when clicking cell| row, column, cell, event | +| select | triggers when user clicks the checkbox in a row | selection, row | +| select-all | triggers when user clicks the checkbox in table header | selection | +| selection-change | triggers when selection changes | selection | +| cell-mouse-enter | triggers when hovering into a cell| row, column, cell, event | +| cell-mouse-leave | triggers when hovering out of a cell | row, column, cell, event | +| cell-click | triggers when clicking a cell | row, column, cell, event | +| row-click | triggers when clicking a row | row, event | +| sort-change | triggers when Table's sorting changes | { column, prop, order } | +| current-change | triggers when current row changes | currentRow, oldCurrentRow | + +### Table Methods +| Method | Description | Parameter | +|------|--------|-------| +| clearSelection | clear selection, might be useful when `reserve-selection` is on | selection | +| toggleRowSelection | toggle if a certain row is selected. With the second parameter, you can directly set if this row is selected | row, selected | ### Table-column Attributes -| Paramters | Description | Type | Options | Default | +| Attribute | Description | Type | Accepted Values | Default | |---------- |-------------- |---------- |-------------------------------- |-------- | -| label | title | string | — | — | -| property | field name corresponding to the column name | string | — | — | +| type | type of the column. If set to `selection`, the column will display checkbox. If set to `index`, the column will display index of the row (staring from 1) | string | selection/index | — | +| label | column label | string | — | — | +| prop | field name. You can also use its alias: `property` | string | — | — | | width | column width | string | — | — | -| sortable | whether can be sort or not | boolean | — | false | -| resizable | whether width of the column will change when dragged (If need it, you should set attribute `border` of `el-table` to true) ） | boolean | — | false | -| type | type of the column. If set to `selection`, the column will display checkbox. If set to `index`, the column will display index of the row (staring with 1) | string | selection/index | — | -| formatter | function that formats content, which has two parameters row and column | function | — | — | -| show-tooltip-when-overflow | if cell content is too long , the extra content will hide. Hovering on it the extra content will show in tooltip | Boolean | — | false | -| inline-template | when using the attribute, you could customize the content which the column. Refer to the date column in Multiple Select, getting row data by `row` object, getting current context by _self in JSX. In this case you don't need set the attribute `property`. | — | — | -| align | Alignment | String | left, center, right | left | - - - - - +| min-width | column minimum width. Columns with `width` has a fixed width, while columns with `min-width` has a width that is distributed in proportion | string | — | — | +| fixed | whether column is fixed at left/right. Will be fixed at left if `true` | string/boolean | true/left/right | — | +| render-header | render function for table header of this column | Function(h, { column, $index }) | — | — | +| sortable | whether column can be sorted | boolean | — | false | +| sort-method | sorting method, works when `sortable` is `true` | Function(a, b) | — | — | +| resizable | whether column width can be resized, works when `border` of `el-table` is `true` | boolean | — | false | +| formatter | function that formats content | Function(row, column) | — | — | +| show-overflow-tooltip | whether to hide extra content and show them in a tooltip when hovering on the cell | boolean | — | false | +| inline-template | by using this attribute, you can customize column template. Row data can be accessed by `row` object, and current context can be accessed by `_self` in JSX. In this case you don't need to set `prop`. In your template, you have access to the following: `{ row (current row), column (current column), $index (row index), _self( context), store (table store) }` | — | — | +| align | alignment | string | left/center/right | left | +| selectable | function that determines if a certain row can be selected, works when `type` is 'selection' | Function(row, index) | — | — | +| reserve-selection | whether to reserve selection after data refreshing, works when `type` is 'selection' | boolean | — | false | +| filters | an array of data filtering options. For each element in this array, `text` and `value` are required | Array[{ text, value }] | — | — | +| filter-multiple | whether data filtering supports multiple options | Boolean | — | true | +| filter-method | data filtering method. If `filter-multiple` is on, this method will be called multiple times for each row, and a row will display if one of the calls returns `true` | Function(value, row) | — | — | +| filtered-value | filter value for selected data, might be useful when table header is rendered with `render-header` | Array | — | — | diff --git a/examples/docs/en-US/tabs.md b/examples/docs/en-US/tabs.md index a49c43be6..4c88e97d1 100644 --- a/examples/docs/en-US/tabs.md +++ b/examples/docs/en-US/tabs.md @@ -1,27 +1,54 @@ + + ## 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 + ``` ### Hello world @@ -26,7 +26,7 @@ npm i element-ui -D - +
@@ -37,9 +37,9 @@ npm i element-ui -D
- + - +