empty.md 2.1 KB
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
| Name | 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 |