Empty

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:

empty.jpg

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"
  }
}