支付寶小程序擴(kuò)展組件 容器·Container

容器依據(jù)最佳實踐統(tǒng)一了子元素的間距、圓角。

掃碼體驗

示例代碼

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

<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://gw.alipayobjects.com/mdn/miniProgram_mendian/afts/img/A*wiFYTo5I0m8AAAAAAAAAAABjAQAAAQ/original">內(nèi)部標(biāo)題無操作</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;">底部展示區(qū)</view>
 </container>
 <container className="container-item">
   <title slot="header">滑動</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>

.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;
}
.grid-item {
 background: #eeeeee;
 text-align: center;
}

屬性