popup
Cập nhật lần cuối vào
Hiển thị popup menu
Quét mã để trải nghiệm
Xem code mẫu trên Tini StudioDemo
Trải nghiệm thử với trình giả lập bên dưới
Thuộc tính
Thuộc tính | Kiểu dữ liệu | Giá trị mặc định | Mô tả |
---|---|---|---|
show | boolean | false | Hiển thị popup hay không |
className | string | Thêm class cho popup | |
animation | boolean | true | Popup show với animation |
mask | boolean | true | Hiển thị mask, sử dụng với props onClose để đóng popup khi click vào mask |
position | string | "top","right","bottom","left" | Vị trí hiển thị popup |
onClose | event | Mask=true, khi click vào mask sẽ trigger function onClose |
Sample Code:
Khai báo components:
{
"defaultTitle": "Popup",
"usingComponents": {
"popup": "@tiki.vn/tini-ui/es/popup/index"
}
}
Shape: circle
index.txml
<view>
<popup
position="{{position}}"
show="{{show}}"
mask="{{mask}}"
disableScroll
zIndex="10"
onClose="onCancel"
>
<view style="
background:#fff,
display:flex;
width:{{(position==='right'||position=='left') ? '250px': '100%' }};
height:{{(position==='right'||position=='left') ? '100%': '200px' }};
justify-content:center;
flex-direction:column;
align-items:center
">
<view style="padding:0 16px;text-align:center">{{title}}</view>
<view style="
display:flex;
flex-direction:row;
justify-content:space-between;
aligh-items:center;
margin-top:32px;
">
<button
onTap="onCancel"
size="big"
style="
width:150px;
"
type="primary">Close</button>
</view>
</view>
</popup>
</view>
Khai báo các button để mở các loại popup khác nhau
<view class="button-wrapper">
<button size="big" type="primary" data-popup="{{
show:true,
position:'top',
mask:true,
title: 'Click on mask to close popup',
disableScroll:true
}}"
onTap="onTap"
>OpenTop</button>
<button size="big" type="primary" data-popup="{{
show:true,
position:'right',
mask:true,
disableScroll: false,
title:'With mask, click on mask to close popup',
}}"
onTap="onTap"
>OpenRight</button>
<button
onTap="onTap"
size="big" type="primary" data-popup="{{
show:true,
position:'bottom',
}}">OpenBottom</button>
<button
onTap="onTap"
size="big" type="primary" data-popup="{{
show:true,
mask:true,
title:'With mask, click on mask to close popup',
disableScroll:true,
position:'left',
}}">OpenLeft</button>
</view>
index.js
Page({
data: {
show: false,
position: 'top',
animation: true,
mask: true,
zIndex: 10,
disableScroll: true
},
onLoad() {},
onOk() {
this.setData({ show: false });
},
onCancel() {
this.setData({ show: false });
},
onTap(e) {
this.setData({ ...e.target.dataset.popup });
}
});
Result: With mask




Result: Without mask



