Empty

Placeholder hint in empty state.

Code Demo

Basic usage

<press-empty description="Description text" />

Image Type

The Empty component has a variety of built-in placeholder image types that can be used in different business scenarios.

<!-- Generic error -->
<press-empty image="error" description="Description text" />
<!-- Network Error -->
<press-empty image="network" description="Description text" />
<!-- Search Tips -->
<press-empty image="search" description="Description text" />

Custom Image

When a custom image is required, any image URL can be passed in the image attribute.

<press-empty
   class="custom-image"
   image="https://mike-1255355338.cos.ap-guangzhou.myqcloud.com/press%2Fimg%2Fcustom-empty-image.png"
   description="Description text"
/>

Bottom content

Content can be inserted below the Empty component through the default slot.

<press-empty description="Description text">
   <press-button round type="danger" class="bottom-button">button</press-button>
</press-empty>

<style>
   .bottom-button {
     width: 160px;
     height: 40px;
   }
</style>

E-SPORT

Added e-sport type.

<press-empty type="e-sport" />

API

Props

Parameter	Description	Type	Default
image	Image type, optional values are error network search, support for incoming image URL	string	default
description	The description text below the image	string	-

Slots

Name	Description
-	Customize Bottom Content
image	custom icon
description	custom description text

Theme customization

--empty-padding：

--empty-image-size：

--empty-description-margin-top：

--empty-description-padding：

--empty-description-color：

--empty-description-font-size：

--empty-description-line-height：

--empty-bottom-margin-top：