mirror of https://github.com/ElemeFE/element
Theme: releasing all variables
Leopoldthecoder
杨奕
parent
9553e1edba
commit
88868eebf7
|
|
@ -1,6 +1,6 @@
|
|||
var fs = require('fs');
|
||||
var path = require('path');
|
||||
var version = process.env.VERSION || require('../../package.json').version;
|
||||
var content = { '1.0.9': '1.0', '1.1.6': '1.1', '1.2.9': '1.2', '1.3.7': '1.3', '1.4.8': '1.4' };
|
||||
var content = { '1.0.9': '1.0', '1.1.6': '1.1', '1.2.9': '1.2', '1.3.7': '1.3', '1.4.9': '1.4' };
|
||||
if (!content[version]) content[version] = '2.0';
|
||||
fs.writeFileSync(path.resolve(__dirname, '../../examples/versions.json'), JSON.stringify(content));
|
||||
|
|
|
|||
|
|
@ -28,33 +28,14 @@ import './element-variables.scss'
|
|||
Vue.use(Element)
|
||||
```
|
||||
|
||||
Note that it is required to override icon font path to the relative path of Element's font files. You can edit the following variables in this way:
|
||||
:::tip
|
||||
Note that it is required to override icon font path to the relative path of Element's font files.
|
||||
:::
|
||||
|
||||
| Variable | Description | Default value |
|
||||
| ------ | ---- | ------ |
|
||||
| $--sm | `sm` breakpoint for responsive layout | 768px |
|
||||
| $--md | `md` breakpoint for responsive layout | 992px |
|
||||
| $--lg | `lg` breakpoint for responsive layout | 1200px |
|
||||
| $--xl | `xl` breakpoint for responsive layout | 1920px |
|
||||
| $--color-primary | theme color | #409EFF |
|
||||
| $--color-success | color for success | #67C23A |
|
||||
| $--color-warning | color for warning | #EB9E05 |
|
||||
| $--color-danger | color for danger | #FA5555 |
|
||||
| $--color-info | color for info | #878D99 |
|
||||
| $--color-text-primary | color for primary texts | #2D2F33 |
|
||||
| $--color-text-regular | color for regular texts | #5A5E66 |
|
||||
| $--color-text-secondary | color for secondary texts | #878D99 |
|
||||
| $--color-text-placeholder | color for placeholder texts | #B4BCCC |
|
||||
| $--border-color-base | base border color | #D8DCE5 |
|
||||
| $--border-color-light | light border color | #DFE4ED |
|
||||
| $--border-color-lighter | lighter border color | #E6EBF5 |
|
||||
| $--border-color-extra-light | extra light border color | #EDF2FC |
|
||||
| $--font-path | icon font file path | 'fonts' |
|
||||
### CLI theme tool
|
||||
If you project doesn't use SCSS, you can customize themes with our CLI theme tool:
|
||||
|
||||
### More customizations
|
||||
If you need more customization than just changing the theme color, please follow these steps:
|
||||
|
||||
#### <strong>Install related tool</strong>
|
||||
#### <strong>Install</strong>
|
||||
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 -g
|
||||
|
|
@ -78,23 +59,25 @@ et -i [custom output file]
|
|||
> ✔ Generator variables file
|
||||
```
|
||||
|
||||
In `element-variables.scss` you can find all the variables we used to style Element and they are defined in SCSS format:
|
||||
In `element-variables.scss` you can find all the variables we used to style Element and they are defined in SCSS format. Here's a snippet:
|
||||
```css
|
||||
$--color-primary: #409EFF !default;
|
||||
$--color-primary-light-1: mix($--color-white, $--color-primary, 10%); /* 53a8ff */
|
||||
$--color-primary-light-2: mix($--color-white, $--color-primary, 20%); /* 66b1ff */
|
||||
$--color-primary-light-3: mix($--color-white, $--color-primary, 30%); /* 79bbff */
|
||||
$--color-primary-light-4: mix($--color-white, $--color-primary, 40%); /* 8cc5ff */
|
||||
$--color-primary-light-5: mix($--color-white, $--color-primary, 50%); /* a0cfff */
|
||||
$--color-primary-light-6: mix($--color-white, $--color-primary, 60%); /* b3d8ff */
|
||||
$--color-primary-light-7: mix($--color-white, $--color-primary, 70%); /* c6e2ff */
|
||||
$--color-primary-light-8: mix($--color-white, $--color-primary, 80%); /* d9ecff */
|
||||
$--color-primary-light-9: mix($--color-white, $--color-primary, 90%); /* ecf5ff */
|
||||
$--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */
|
||||
$--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; /* 66b1ff */
|
||||
$--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default; /* 79bbff */
|
||||
$--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default; /* 8cc5ff */
|
||||
$--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default; /* a0cfff */
|
||||
$--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default; /* b3d8ff */
|
||||
$--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; /* c6e2ff */
|
||||
$--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /* d9ecff */
|
||||
$--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */
|
||||
|
||||
$--color-success: #67c23a !default;
|
||||
$--color-warning: #eb9e05 !default;
|
||||
$--color-danger: #fa5555 !default;
|
||||
$--color-info: #878d99 !default;
|
||||
|
||||
...
|
||||
```
|
||||
|
||||
#### <strong>Modify variables</strong>
|
||||
|
|
|
|||
|
|
@ -324,6 +324,13 @@ It includes all kinds of input items, such as `input`, `select`, `radio` and `ch
|
|||
```
|
||||
:::
|
||||
|
||||
:::tip
|
||||
[W3C](https://www.w3.org/MarkUp/html-spec/html-spec_8.html#SEC8.2) regulates that
|
||||
> <i>When there is only one single-line text input field in a form, the user agent should accept Enter in that field as a request to submit the form.</i>
|
||||
|
||||
To prevent this behavior, you can add `@submit.native.prevent` on `<el-form>`.
|
||||
:::
|
||||
|
||||
### Inline form
|
||||
|
||||
When the vertical space is limited and the form is relatively simple, you can put it in one line.
|
||||
|
|
|
|||
|
|
@ -17,6 +17,10 @@ Get the latest version from [unpkg.com/element-ui](https://unpkg.com/element-ui/
|
|||
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
|
||||
```
|
||||
|
||||
:::tip
|
||||
We recommend our users to lock Element's version when using CDN. Please refer to [unpkg.com](https://unpkg.com) for more information.
|
||||
:::
|
||||
|
||||
### Hello world
|
||||
If you are using CDN, a hello-world page is easy with Element. [Online Demo](https://jsfiddle.net/hzfpyvg6/14/)
|
||||
|
||||
|
|
|
|||
|
|
@ -27,31 +27,12 @@ import './element-variables.scss'
|
|||
Vue.use(Element)
|
||||
```
|
||||
|
||||
需要注意的是，覆盖字体路径变量是必需的，将其赋值为 Element 中 icon 图标所在的相对路径即可。使用这种方式可以自定义的变量为：
|
||||
:::tip
|
||||
需要注意的是，覆盖字体路径变量是必需的，将其赋值为 Element 中 icon 图标所在的相对路径即可。
|
||||
:::
|
||||
|
||||
| 变量名 | 含义 | 默认值 |
|
||||
| ------ | ---- | ------ |
|
||||
| $--sm | 响应式布局中 `sm` 的断点值 | 768px |
|
||||
| $--md | 响应式布局中 `md` 的断点值 | 992px |
|
||||
| $--lg | 响应式布局中 `lg` 的断点值 | 1200px |
|
||||
| $--xl | 响应式布局中 `xl` 的断点值 | 1920px |
|
||||
| $--color-primary | 主题色 | #409EFF |
|
||||
| $--color-success | 表示「成功」的状态色 | #67C23A |
|
||||
| $--color-warning | 表示「警告」的状态色 | #EB9E05 |
|
||||
| $--color-danger | 表示「危险」的状态色 | #FA5555 |
|
||||
| $--color-info | 表示「信息」的状态色 | #878D99 |
|
||||
| $--color-text-primary | 主要文字色 | #2D2F33 |
|
||||
| $--color-text-regular | 常规文字色 | #5A5E66 |
|
||||
| $--color-text-secondary | 次要文字色 | #878D99 |
|
||||
| $--color-text-placeholder | 占位文字色 | #B4BCCC |
|
||||
| $--border-color-base | 一级边框 | #D8DCE5 |
|
||||
| $--border-color-light | 二级边框 | #DFE4ED |
|
||||
| $--border-color-lighter | 三级边框 | #E6EBF5 |
|
||||
| $--border-color-extra-light | 四级边框 | #EDF2FC |
|
||||
| $--font-path | icon 字体图标路径 | 'fonts' |
|
||||
|
||||
### 深层次的定制
|
||||
如果仅仅改变以上变量不能满足你的需求，请按以下步骤进行更深层次的主题定制：
|
||||
### 命令行主题工具
|
||||
如果你的项目没有使用 SCSS，那么可以使用命令行主题工具进行深层次的主题定制：
|
||||
|
||||
#### <strong>安装工具</strong>
|
||||
首先安装「主题生成工具」，可以全局安装或者安装在当前项目下，推荐安装在项目里，方便别人 clone 项目时能直接安装依赖并启动，这里以全局安装做演示。
|
||||
|
|
@ -80,20 +61,22 @@ et -i [可以自定义变量文件]
|
|||
如果使用默认配置，执行后当前目录会有一个 `element-variables.scss` 文件。内部包含了主题所用到的所有变量，它们使用 SCSS 的格式定义。大致结构如下：
|
||||
```css
|
||||
$--color-primary: #409EFF !default;
|
||||
$--color-primary-light-1: mix($--color-white, $--color-primary, 10%); /* 53a8ff */
|
||||
$--color-primary-light-2: mix($--color-white, $--color-primary, 20%); /* 66b1ff */
|
||||
$--color-primary-light-3: mix($--color-white, $--color-primary, 30%); /* 79bbff */
|
||||
$--color-primary-light-4: mix($--color-white, $--color-primary, 40%); /* 8cc5ff */
|
||||
$--color-primary-light-5: mix($--color-white, $--color-primary, 50%); /* a0cfff */
|
||||
$--color-primary-light-6: mix($--color-white, $--color-primary, 60%); /* b3d8ff */
|
||||
$--color-primary-light-7: mix($--color-white, $--color-primary, 70%); /* c6e2ff */
|
||||
$--color-primary-light-8: mix($--color-white, $--color-primary, 80%); /* d9ecff */
|
||||
$--color-primary-light-9: mix($--color-white, $--color-primary, 90%); /* ecf5ff */
|
||||
$--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */
|
||||
$--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; /* 66b1ff */
|
||||
$--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default; /* 79bbff */
|
||||
$--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default; /* 8cc5ff */
|
||||
$--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default; /* a0cfff */
|
||||
$--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default; /* b3d8ff */
|
||||
$--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; /* c6e2ff */
|
||||
$--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /* d9ecff */
|
||||
$--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */
|
||||
|
||||
$--color-success: #67c23a !default;
|
||||
$--color-warning: #eb9e05 !default;
|
||||
$--color-danger: #fa5555 !default;
|
||||
$--color-info: #878d99 !default;
|
||||
|
||||
...
|
||||
```
|
||||
|
||||
#### <strong>修改变量</strong>
|
||||
|
|
|
|||
|
|
@ -318,6 +318,13 @@
|
|||
```
|
||||
:::
|
||||
|
||||
:::tip
|
||||
W3C 标准中有如下[规定](https://www.w3.org/MarkUp/html-spec/html-spec_8.html#SEC8.2)：
|
||||
> <i>When there is only one single-line text input field in a form, the user agent should accept Enter in that field as a request to submit the form.</i>
|
||||
|
||||
即：当一个 form 元素中只有一个输入框时，在该输入框中按下回车应提交该表单。如果希望阻止这一默认行为，可以在 `<el-form>` 标签上添加 `@submit.native.prevent`。
|
||||
:::
|
||||
|
||||
### 行内表单
|
||||
|
||||
当垂直方向空间受限且表单较简单时，可以在一行内放置表单。
|
||||
|
|
|
|||
|
|
@ -17,6 +17,10 @@ npm i element-ui -S
|
|||
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
|
||||
```
|
||||
|
||||
:::tip
|
||||
我们建议使用 CDN 引入 Element 的用户在链接地址上锁定版本，以免将来 Element 升级时受到非兼容性更新的影响。锁定版本的方法请查看 [unpkg.com](https://unpkg.com)。
|
||||
:::
|
||||
|
||||
### Hello world
|
||||
通过 CDN 的方式我们可以很容易地使用 Element 写出一个 Hello world 页面。[在线演示](https://jsfiddle.net/hzfpyvg6/14/)
|
||||
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -133,18 +133,4 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include e(tag) {
|
||||
display: inline-block;
|
||||
height: $--select-tag-height;
|
||||
line-height: $--select-tag-height;
|
||||
font-size: $--select-font-size;
|
||||
border-radius: $--border-radius-base;
|
||||
color: $--select-tag-color;
|
||||
background-color: $--select-tag-background;
|
||||
|
||||
& .el-icon-close {
|
||||
font-size: $--select-input-font-size;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue