Container

You can use the container component to make the style of all elements in the container more consistent, such as margins between elements.

Sample code

See the sample codes in different languages:

.json

copy
{
 "defaultTitle": "Container",
 "usingComponents": {
   "container": "mini-ali-ui/es/container/index",
   "title": "mini-ali-ui/es/title/index"
 }
}

.axml

copy
<view className="container">
  <container className="container-item"
    title="Customized title" 
    thumb="https://img.alicdn.com/tfs/TB1Go8lh9R26e4jSZFEXXbwuXXa-84-84.png"
    onActionTap="titleClick"
  >
    <view slot="operation" style="color: red;">is slot</view>
    <view class="item">The container component's own title properties. If the icon property is not specified, you can insert a slot named operation.</view>
  </container>

  <container className="container-item"
    title="Title with an arrow"
    icon="arrow"
    thumb="https://img.alicdn.com/tfs/TB1Q19sTNv1gK0jSZFFXXb0sXXa-112-112.png"
    onActionTap="titleClick"
  >
    <view class="item">The container component's own title properties</view>
  </container>

  <container className="container-item"
    title="Title with a close icon" 
    icon="close"
    thumb="https://img.alicdn.com/tfs/TB1Go8lh9R26e4jSZFEXXbwuXXa-84-84.png"
    onActionTap="titleClick"
  >
    <view class="item">The container component's own title properties</view>
  </container>

  <container className="container-item"
    title="Title with a more icon" 
    icon="more"
    thumb="https://img.alicdn.com/tfs/TB1Q19sTNv1gK0jSZFFXXb0sXXa-112-112.png"
    onActionTap="titleClick"
  >
    <view class="item">The container component's own title properties</view>
  </container>

  <container className="container-item"
    title="Title without icon" 
    thumb="https://img.alicdn.com/tfs/TB1Go8lh9R26e4jSZFEXXbwuXXa-84-84.png"
    onActionTap="titleClick"
  >
    <view class="item">The container component's own title properties</view>
  </container>
</view>

<view className="container">
  <container className="container-item">
    <view class="item">a1</view>
  </container>
  <container className="container-item">
    <view class="item">b1</view>
    <view class="item">b2</view>
  </container>
  <container className="container-item">
    <title slot="header" hasLine="true" showIcon="true" iconURL="https://example.com/mdn/miniProgram_mendian/afts/img/A*wiFYTo5I0m8AAAAAAAAAAABjAQAAAQ/original">Title without onActionType</title>
    <view class="item">c1</view>
    <view class="item">c2</view>
    <view class="item">c3</view>
    <view slot="footer" class="footer" style="padding-left: 12px;">Bottom display area</view> 
  </container>
  <container className="container-item">
    <title slot="header">slide</title> 
    <swiper indicator-dots="{{true}}" class="item">
      <block a:for="{{['#0abc80','#00b7f4']}}">
        <swiper-item>
          <view style="background-color: {{item}};width:100%;height:300rpx;border-radius:16rpx;"/>
        </swiper-item>
      </block>
    </swiper>
  </container>
  <container className="container-item" type="onewithtwo">
    <view class="grid-item" style ="height: 300rpx;" slot="first">first</view>
    <view class="grid-item" slot="second">second</view>
    <view class="grid-item" slot="third">third</view>
  </container>
</view>

.js

copy
Page({
  data: {},
  onLoad() {},
  titleClick() {
    my.alert({
      title: 'onActionTap callback', 
      content: 'Click the operation area after the title',
    });
  },
});

.acss

copy
.container {
  background: #F5F5F5;
  padding: 24rpx;
  height: 100%;
}

.container-item {
  margin-bottom: 24rpx;
}

.footer {
  color: #333;
  margin-top: 24rpx;
}

.item {
  background: #eeeeee;
  text-align: center;
  height: 200rpx;
  padding-top: 20rpx;
}

.grid-item {
  background: #eeeeee;
  text-align: center;
}

Parameters

Property

Type

Description

type

String

Layout type of container. Valid values are:

  • line
  • onewithtwo

The default value is line. When the value is line, all elements are equally divided into multiple rows or columns.

className

String

Customized style name.

title

String

Title name. The title component can be used if this property is specified.

thumb

String

URL of the icon in title.

icon

String

Icon on the right side of title. Valid values are:

  • arrow
  • close
  • more

onActionTap

EventHandle

The event that is triggered when users tap the icon on the right of title. The default value is () => {}.