Nhảy tới nội dung

modal

Cập nhật lần cuối vào

Khi ứng dụng cần cảnh báo hoặc nhắc nhở người dùng, yêu cầu thao tác của người dùng mà không phải chuyển trang, bạn có thể sử dụng modal. Người dùng cần thực hiện các thao tác trên modal trước khi đóng.

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

Xem code mẫu trên Tini Studio

Demo

Thuộc tính

Thuộc tínhKiểu dữ liệuGiá trị mặc địnhMô tả
showbooleanfalseHiện/ẩn modal
showClosebooleantrueHiển thị button đóng modal, Cần implement props onModalClose
classNamestringThêm class cho modal
maskbooleantrueHiển thị mask
topImagestringundefinedHiển thị hình ảnh ở trên top của modal
topImageSize'lg', 'md', 'sm'mdQuyết định size render của topImage
buttonsButton[]undefinedCustom bottom buttons, implement props onButtonClick bind function vào button
buttonsLayout'horizontal','vertical''horizontal'Mask=true, khi click vào mask sẽ trigger function onClose
advicebooleanfalseClose button ở bottom
onModalClickevent() => voidTrigger function này khi click vào footer slot
onMaskClickevent() => voidTrigger function này khi click vào mask
onModalCloseevent() => voidFunction này sẽ được trigger khi click vào close button
onButtonClickevent(e:Object) => voidFunction sẽ được bind và trigger khi click vào custom button

buttons

Thuộc tínhKiểu dữ liệuGiá trị mặc địnhMô tả
typestringsolidKiểu button. Nhận các giá trị = [solid || outline || ghost].
textstring''Hiển thị text button
extClassstring''Class cho button

slots

Thuộc tínhKiểu dữ liệuGiá trị mặc địnhMô tả
headerbooleanfalseRender component ở section header
descriptionbooleanfalseRender component ở dưới header và trên body
footerbooleanfalseRender component ở section footer

Sample Code

index.json
{
"defaultTitle": "Modal",
"usingComponents": {
"modal": "@tiki.vn/tini-ui/es/modal/index"
}
}
index.js
Page({
data: {
show: false
},

handleShowModal() {
this.setData({ show: true });
},

handleHideModal() {
this.setData({ show: false });
},

handleTapButton(event) {
const { item } = event.target.dataset;
my.alert({ content: JSON.stringify(item) });
this.handleHideModal();
}
});

Basic Modal

index.txml
<button onTap="handleShowModal">Show modal</button>

<modal
show="{{show}}"
buttons="{{[{'text': 'Close'}]}}"
onMaskClick="handleHideModal"
onButtonClick="handleTapButton"
>
<view slot="header">Title</view>
<view slot="description">Description</view>
<view class="modal-content">
Swap me!!!
</view>
</modal>

Image Modal

index.txml
<button onTap="handleShowModal">Show modal</button>

<modal
show="{{show}}"
topImage="http://placeimg.com/640/480"
topImageSize="lg"
buttons="{{[{'text': 'Cancel', type: 'outline'}, {'text': 'OK'}]}}"
onMaskClick="handleHideModal"
onButtonClick="handleTapButton"
>
<view slot="header">Title</view>
<view slot="description">Description</view>
<view class="modal-content">
Swap me!!!
</view>
</modal>

Custom Button

index.txml
<button onTap="handleShowModal">Show modal</button>

<modal
show="{{show}}"
buttons="{{[{'text': 'Close', type: 'ghost'}, {'text': 'Cancel', type: 'outline'}, {'text': 'OK'}]}}"
buttonsLayout="vertical"
onMaskClick="handleHideModal"
onButtonClick="handleTapButton"
>
<view slot="header">Title</view>
<view slot="description">Description</view>
</modal>