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.
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
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.
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:
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:
If you are unfamiliar with `babel-plugin-component`, please refer to <ahref="./#/en-US/component/quickstart">Quick Start</a>. For more details, check out the [project repository](https://github.com/ElementUI/element-theme) of `element-theme`.
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
importVuefrom'vue'
importElementUIfrom'element-ui'
importlocalefrom'element-ui/lib/locale/lang/en'
...
...
@@ -11,26 +10,25 @@ import locale from 'element-ui/lib/locale/lang/en'
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:
Currently Element ships with the following languages:
<ulclass="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.
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.
### Register components
If you prefer not to use them, please read the following.
Import all element-ui components
### Config files
```javascript
importVuefrom'vue'
importElementfrom'element-ui'
import'element-ui/lib/theme-default/index.css'
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
```
Typical configurations for these config files are:
// use Vue.use to register a plugin
Vue.use(element)
**.babelrc**
```json
{
"presets":[
["es2015",{"modules":false}]
]
}
```
Or just import some components you need
use [babel-plugin-component](https://github.com/QingWei-Li/babel-plugin-component)
You can import Element entirely, or just import what you need. Let's start with fully import.
#### Fully import
In main.js:
```javascript
importSelectfrom'element-ui/lib/select';
import'element-ui/lib/theme-default/select.css';
importButtonfrom'element-ui/lib/button';
import'element-ui/lib/theme-default/button.css';
importVuefrom'vue'
importElementUIfrom'element-ui'
import'element-ui/lib/theme-default/index.css'
importAppfrom'./App.vue'
Vue.component(Select.name,Select);
Vue.component(Button.name,Button);
Vue.use(MintUI)
newVue({
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.
### Use babel-plugin-component
First, install babel-plugin-component:
Configure `.bablerc`
```bash
npm install babel-plugin-component -D
```
Then edit .babelrc:
```json
{
"plugins":["xxx",["component",[
"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
importVuefrom'vue'
import{Button,Select}from'element-ui'
importAppfrom'./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.
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.
:::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.
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`.
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 | --- | <spanstyle="background-color: #20A0FF">#20A0FF</span>
off-color | If component is in 'off' state, set the background color of component | string | --- | <spanstyle="background-color: #C0CCDA">#C0CCDA</span>
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.
| 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' |
::: 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-tagtype="gray">Label Two</el-tag>
<el-tagtype="primary">Label Three</el-tag>
<el-tagtype="success">Label Four</el-tag>
<el-tagtype="warning">Label Five</el-tag>
<el-tagtype="danger">Label Six</el-tag>
<el-tag>Tag One</el-tag>
<el-tagtype="gray">Tag Two</el-tag>
<el-tagtype="primary">Tag Three</el-tag>
<el-tagtype="success">Tag Four</el-tag>
<el-tagtype="warning">Tag Five</el-tag>
<el-tagtype="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.
