Container

2024-04-12 07:34

Mini-program developers can use the Container component to hold various contents, including lists, images, and text paragraphs. It also enables consistent styling across these contents, such as uniform margins between elements, enhancing the browsing experience for users. This topic covers the user experience, attribute details, and sample code for the Container component.

User experience

The following image shows different containers on a mini-program interface:

Attributes

Attribute	Data type	Default	Description
className	String	N/A	The class name for the component.
style	String	N/A	The style for the component.
title	String, Slot	N/A	The title of the container.
headerInBox	Boolean	`true`	Whether the header is displayed within the container.
headerRight	Slot	N/A	The content on the right side of the header.

Sample code

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

.axml

copy
<ant-container title="Basic container">
  <view class="content" />
</ant-container>

<ant-container headerInBox="{{ false }}">
  <view slot="title">
    <view class="icon">
      <ant-icon
        type="SmileOutline"
        style="margin-right: 8px" />
      Outside header
    </view>
  </view>
  <view slot="headerRight">Content on the right</view>
  <view class="content" />
</ant-container>

<ant-container title="Container with boxes">
  <view slot="headerRight">Content on the right</view>
  <view class="content">
    <view class="box" />
    <view class="box" />
    <view class="box" />
  </view>
</ant-container>

<ant-container>
  <view class="content" />
  <view slot="headerRight">Content on the right</view>
</ant-container>

<ant-container>
  <view class="content" />
</ant-container>

.js

copy
Page({});

.acss

copy
page {
  padding: 12px;
  color: #333333;
}
.content {
  height: 70px;
  display: flex;
}
.content .box {
  background-color: #eeeeee;
  flex: 1;
  border-radius: 4px;
}
.content .box:not(:first-of-type) {
  margin-left: 8px;
}

.json

copy
{
  "defaultTitle": "Container",
  "usingComponents": {
    "ant-icon": "antd-mini/es/Icon/index",
    "ant-container": "antd-mini/es/Container/index"
  }
}