Empty Empty state
introduce
Placeholder prompt when empty.
Code Demo
Basic usage
<z-empty description="Description text" />
Image type
The Empty component has a variety of placeholder image types built in, which can be used in different business scenarios.
<!-- General error -->
<z-empty image="error" description="Description text" />
<!-- Network error -->
<z-empty image="network" description="description text" />
<!-- Search tips -->
<z-empty image="search" description="Description text" />
Custom size
The size of the image via the image-size
attribute.
<z-empty image-size="500rpx" description="Description text" />
Set image-size
to array format, and you can set the width and height separately. The first item in the array corresponds to the width, and the second item in the array corresponds to the height.
<z-empty :image-size="[60, 40]" description="Description text" />
Custom pictures
When you need to customize the image, you can pass in any image URL in the image attribute.
<z-empty
image="https://cdn.zebraui.com/zebra-ui/images/swipe-demo/swipe1.jpg"
:image-size="80"
description="description text"
/>
Bottom content
Content can be inserted below the Empty component through the default slot.
<z-empty description="description text">
<z-button
type="primary"
round
:custom-style="{ width: '300rpx' }"
class="bottom-button"
>
button
</z-button>
</z-empty>
API
Props
Parameters | Description | Type | Default value |
---|---|---|---|
image | Image type, optional values are error network search , supports passing in image URL | string | default |
image-size | Image size, default unit is px | number | string | Array | - |
description | Description text under the image | string | - |
Slots
Name | Description |
---|---|
default | Custom bottom content |
image | custom icon |
description | Custom description text |
Theme customization
Style variables
The component provides the following CSS variables, which can be used to customize styles. For usage, please refer to ConfigProvider component.
Name | Default | Description |
---|---|---|
--z-empty-padding | var(--z-padding-xl) 0 | - |
--z-empty-image-size | 320rpx | - |
--z-empty-description-margin-top | var(--z-padding-md) | - |
--z-empty-description-padding | 0 120rpx | - |
--z-empty-description-color | var(--z-text-color-2) | - |
--z-empty-description-font-size | var(--z-font-size-md) | - |
--z-empty-description-line-height | var(--z-line-height-md) | - |
--z-empty-bottom-margin-top | 48rpx | - |