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

ParametersDescriptionTypeDefault value
imageImage type, optional values are error network search, supports passing in image URLstringdefault
image-sizeImage size, default unit is pxnumber | string | Array-
descriptionDescription text under the imagestring-

Slots

NameDescription
defaultCustom bottom content
imagecustom icon
descriptionCustom 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.

NameDefaultDescription
--z-empty-paddingvar(--z-padding-xl) 0-
--z-empty-image-size320rpx-
--z-empty-description-margin-topvar(--z-padding-md)-
--z-empty-description-padding0 120rpx-
--z-empty-description-colorvar(--z-text-color-2)-
--z-empty-description-font-sizevar(--z-font-size-md)-
--z-empty-description-line-heightvar(--z-line-height-md)-
--z-empty-bottom-margin-top48rpx-