Empty Empty state

introduce

Placeholder prompt when empty.

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>

Props

Slots

Style variables

The component provides the following CSS variables, which can be used to customize styles. For usage, please refer to ConfigProvider component.