Nhảy tới nội dung

popup

Hiển thị popup menu

Quét mã để trải nghiệm

Xem code mẫu trên Tini Studio

Demo

Trải nghiệm thử với trình giả lập bên dưới

Thuộc tính

Thuộc tínhKiểu dữ liệuGiá trị mặc địnhMô tả
showbooleanfalseHiển thị popup hay không
classNamestringThêm class cho popup
animationbooleantruePopup show với animation
maskbooleantrueHiển thị mask, sử dụng với props onClose để đóng popup khi click vào mask
positionstring"top","right","bottom","left"Vị trí hiển thị popup
onCloseeventMask=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

popuppopuppopuppopup

Result: Without mask

popuppopuppopuppopup