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

VariableColor
--el-empty-fill-color-0var(--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

NameDescriptionTypeDefault
imageimage URL of emptystring''
image-sizeimage size (width) of emptynumber
descriptiondescription of emptystring''

Slots

NameDescription
defaultcontent as bottom content
imagecontent as image
descriptioncontent as description

Source

ComponentDocs

Contributors