Empty

Placeholder hints for empty states.

Basic usage

description

Custom image

Use image prop to set image URL.

No Data

Image size

Use image-size prop to control image size.

No Data

Bottom content

Use the default slot to insert content at the bottom.

No Data

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

Source

Component Style Docs

Contributors