Container

Properties

Property	Type	Required	Default value	Description
title	string	No	-	The title.
image	string	No	-	The thumbnail URL.
icon	string	No	-	The icon on the right.
className	string	No	-	The class name.

Events

Event name	Description	Type
onIconTap	Callback triggered when the upper-right icon is tapped.	() => void

Slots

Slot name	Description
title	Custom title content. Ignored if the title property is set.

Style classes

Class name	Description
amd-container	The style of the entire component.
amd-container-header	The style of the title bar.
amd-container-header-image	The style of the image in the title bar.
amd-container-header-title	The style of the title in the title bar.
amd-container-header-icon	The style of the icon in the title bar.
amd-container-content	The style of the content area.

Code examples

Basic usage

Example for the index.axml file:

<view class="demo-container">
  <container
    title="Basic Usage"
    image="{{imageUrl}}"
    icon="SetOutline"
    onIconTap="onIconTap"
  >
    <view class="demo-container-container">
      This is the custom content of the container.
    </view>
  </container>
</view>

Example for the index.js file:

Page({
  data: {
    imageUrl: 'https://gw.alipayobjects.com/mdn/rms_226d75/afts/img/A*06fDQa9nxDkAAAAAAAAAAAAAARQnAQ'
  },
  onIconTap() {
    my.alert({
      title: 'icon onTap',
      content: 'You tapped the icon in the upper-right corner!'
    })
  }
});

Example for the index.acss file:

.demo-container {
  padding-top: 24rpx;
}

.demo-container-container {
  padding: 24rpx;
}

Example for the index.json file:

{
  "defaultTitle": "Container",
  "usingComponents": {
    "container": "antd-mini/es/Container/index"
  }
}