Empty

2024-04-12 07:34

Mini-program developers can use the Empty component to create empty states to inform users of the absence of content and provide necessary guidance. The component offers flexibility to create both full-page and section-specific empty states. This topic covers the user experience, attribute details, and sample code for the Empty component.

User experience

The following image shows some examples of empty states:

Attributes

Attribute	Data type	Default	Description
className	String	N/A	The class name for the root node of the component.
style	String	N/A	The style for the empty state.
image	String, Slot	See the Basic style image in User experience.	The image in the empty state.
title	String, Slot	N/A	The title of the empty state.
message	String, Slot	N/A	The description text in the empty state.

Sample code

The following sample code demonstrates how to create the empty states that are shown in User experience:

.axml

copy
<ant-container title="Basic style">
  <ant-empty
    title="Nothing found here"
    message="Explore other options" />
</ant-container>

<ant-container title="With action buttons">
  <ant-empty
    title="Nothing found here"
    message="Explore other options">
    <view slot="extra">
      <ant-button
        size="small"
        inline>
        Button 1
      </ant-button>
      <ant-button
        type="primary"
        size="small"
        inline
        style="margin-left: 12px">
        Button 2
      </ant-button>
    </view>
  </ant-empty>
</ant-container>

<ant-container title="Custom image">
  <ant-empty
    title="Nothing found here"
    message="Explore other options"
    image="https://gw.alipayobjects.com/mdn/rms_7cc883/afts/img/A*PG7NQoXbN38AAAAAAAAAAAAAARQnAQ" />
</ant-container>

.js

copy
Page({
  data: {
    imageUrl: 'https://gw.alipayobjects.com/mdn/rms_7cc883/afts/img/A*PG7NQoXbN38AAAAAAAAAAAAAARQnAQ',
    mode: 'page',
    modeList: [{
      label: 'Full-page empty state',
      value: 'page',
    }, {
      label: 'Section-specific empty state',
      value: 'section',
    }]
  },
});

.acss

copy
page {
  padding: 12px;
}

.json

copy
{
  "defaultTitle": "Empty",
  "usingComponents": {
    "ant-empty": "antd-mini/es/Empty/index",
    "ant-container": "antd-mini/es/Container/index",
    "ant-button": "antd-mini/es/Button/index"
  }
}