mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-14 17:31:02 +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
88 lines
2.1 KiB
Markdown
88 lines
2.1 KiB
Markdown
---
|
|
title: Empty
|
|
lang: 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 |
|