mirror of
https://github.com/element-plus/element-plus.git
synced 2026-03-13 07:51:17 +08:00
5ee184fdfd
* 更新var.scss，提取empty的fill-color
将fill的color提取出来，作为变量，方便后续修改，修改如下：
'fill-color-0': var(--el-color-white),
'fill-color-1': #FCFCFD,
'fill-color-2': #F8F9FB,
'fill-color-3': #F7F8FC,
'fill-color-4': #EEEFF3,
'fill-color-5': #EDEEF2,
'fill-color-6': #E9EBEF,
'fill-color-7': #E5E7E9,
'fill-color-8': #E0E3E9,
'fill-color-9': #D5D7DE,
* 修改Empty的fillcolor作为变量引用，方便后续的色彩搭配更改
修改Empty的fillcolor作为变量引用，方便后续的色彩搭配更改
* 修改rate下的配色提取到变量里
修改rate下的配色提取到变量里，提取如下：
'void-color': #c6d1de,
'rate-color': #F7BA2A,
* 提取rate的色彩作为变量
提取rate的色彩作为变量
* 修改rate的色彩变量
修改和提取rate变量为：
'void-color': #c6d1de,
'star-color': #F7BA2A,
'disable-void-color': #EFF2F7,
'text-color': #1f2d3d,
* replace space to enter
替換空格为回车
* lint change
lint change
* Missing Pretty error
color 颜色小写
* Add CustomStyles infomation
Add CustomStyles infomation
* Change CustomStyles
Change CustomStyles
* Add CustomStyles
Add CustomStyles
* Change rate to empty
Change rate to empty
* Modify CustomStyles after Bottom content
Modify CustomStyles after Bottom content
* Change Custom styles
Change Custom styles
* feat: format rate.md
2.1 KiB
2.1 KiB
title, lang
| title | lang |
|---|---|
| Empty | en-US |
Empty
Placeholder hints for empty states.
Basic usage
:::demo
empty/basic-usage
:::
Custom image
Use image prop to set image URL.
:::demo
empty/custom-image
:::
Image size
Use image-size prop to control image size.
:::demo
empty/image-size
:::
Bottom content
Use the default slot to insert content at the bottom.
:::demo
empty/bottom-content
:::
Custom styles
Now you can set custom style for empty component.
Use css/scss language to change the global or local color. We set some global color variables: --el-empty-fill-color-0, --el-empty-fill-color-1, --el-empty-fill-color-2, ......, --el-empty-fill-color-9. You can use like: :root { --el-empty-fill-color-0: red; --el-empty-fill-color-1: blue; }.
But usually, if you want to change style, you need to change all color, because these colors are a combination.
Default Variables
| Variable | Color |
|---|---|
| --el-empty-fill-color-0 | var(--el-color-white) |
| --el-empty-fill-color-1 | #fcfcfd |
| --el-empty-fill-color-2 | #f8f9fb |
| --el-empty-fill-color-3 | #f7f8fc |
| --el-empty-fill-color-4 | #eeeff3 |
| --el-empty-fill-color-5 | #edeef2 |
| --el-empty-fill-color-6 | #e9ebef |
| --el-empty-fill-color-7 | #e5e7e9 |
| --el-empty-fill-color-8 | #e0e3e9 |
| --el-empty-fill-color-9 | #d5d7de |
:::
Empty Attributes
| Attribute | Description | Type | Acceptable Value | Default |
|---|---|---|---|---|
| image | image URL | string | — | — |
| image-size | image size (width) | number | — | — |
| description | description | string | — | — |
:::
Empty Slots
| Name | Description |
|---|---|
| default | Custom bottom content |
| image | Custom image |
| description | Custom description |