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.
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.
### 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 i element-theme -g
```
Then install the default theme from npm or GitHub.
...
...
@@ -20,7 +20,7 @@ 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.
```shell
node_modules/.bin/et -i[custom output directory]
et -i[custom output directory]
> ✔ Generator variables file
```
...
...
@@ -53,7 +53,7 @@ Just edit `element-variables.css`, e.g. changing the theme color to red:
### Build theme
After saving the variable file, use `et` to build your theme. You can activate `watch` mode by adding a parameter `-w`:
::: demo Add `size` attribute to change the size of Input. In addition to the default size, there are three other options: `large`, `small` and `mini`.
```html
<divclass="inline-input">
<div>
<el-input
class="inline-input"
size="large"
placeholder="Please input"
v-model="input6">
</el-input>
<el-input
class="inline-input"
placeholder="Please input"
v-model="input7">
</el-input>
<el-input
class="inline-input"
size="small"
placeholder="Please input"
v-model="input8">
</el-input>
<el-input
class="inline-input"
size="mini"
placeholder="Please input"
v-model="input9">
...
...
@@ -349,10 +350,11 @@ You can get some recommended tips based on the current input.
::: demo Autocomplete component provides input suggestions. The `fetch-suggestions` attribute is a method that returns suggested input. In this example, `querySearch(queryString, cb)` returns suggestions to Autocomplete via `cb(data)` when suggestions are ready.
```html
<el-rowclass="inline-input border-grid">
<el-rowclass="border-grid">
<el-col:span="12"class="tac">
<divclass="text">list suggestions when activated</div>
<el-autocomplete
class="inline-input"
v-model="state1"
:fetch-suggestions="querySearch"
placeholder="Please input"
...
...
@@ -362,6 +364,7 @@ You can get some recommended tips based on the current input.
@@ -22,7 +22,7 @@ Menu that provides navigation for your website.
Top bar NavMenu can be used in a variety of scenarios.
::: demo
::: demo By default Menu is vertical, but you can change it to horizontal by setting the mode prop to 'horizontal'. In addition, you can use the submenu component to create a second level menu.
@@ -62,7 +62,7 @@ Top bar NavMenu can be used in a variety of scenarios.
Vertical NavMenu with sub-menus.
::: demo
::: demo You can use the el-menu-item-group component to create a menu group, and the name of the group is determined by the title prop or a named slot.
| 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-class-name | function that returns custom class names for a row, or a string assigning class names for every row | Function(row, index)/String | — | — |
| row-style | function that returns custom style for a row, or a string assigning custom style for every row | Function(row, index)/Object | — | — |
| row-key | key of row data, used for optimizing rendering. Required if `reserve-selection` is on | Function(row)/String | — | — |
| context | context of Table, e.g. `_self` refers to the current context, `$parent` parent context, `$root` root context, can be overridden by `context` in `el-table-column` | Object | - | current context where Table lies |
@@ -140,6 +163,7 @@ on-success | hook function when uploaded successfully | function(response, file,
on-error | hook function when some errors occurs | function(err, response, file) | — | —
before-upload | hook function before uploading with the file to be uploaded as its parameter. If `false` or a `Promise` is returned, uploading will be aborted | function(file) | — | —
