Empty
Placeholder hints for empty states.
Basic usage
Custom image
Use image
prop to set image URL.
Image size
Use image-size
prop to control image size.
Bottom content
Use the default slot to insert content at the bottom.
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 |
API
Attributes
Name | Description | Type | Default |
---|---|---|---|
image | image URL of empty | string |
'' |
image-size | image size (width) of empty | number |
— |
description | description of empty | string |
'' |
Slots
Name | Description |
---|---|
default | content as bottom content |
image | content as image |
description | content as description |