modal
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 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/ẩn modal |
showClose | boolean | true | Hiển thị button đóng modal, Cần implement props onModalClose |
className | string | Thêm class cho modal | |
mask | boolean | true | Hiển thị mask |
topImage | string | undefined | Hiển thị hình ảnh ở trên top của modal |
topImageSize | 'lg', 'md', 'sm' | md | Quyết định size render của topImage |
buttons | Button[] | undefined | Custom 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 |
advice | boolean | false | Close button ở bottom |
onModalClick | event | () => void | Trigger function này khi click vào footer slot |
onMaskClick | event | () => void | Trigger function này khi click vào mask |
onModalClose | event | () => void | Function này sẽ được trigger khi click vào close button |
onButtonClick | event | (e:Object) => void | Function sẽ được bind và trigger khi click vào custom button |
buttons
Thuộc tính | Kiểu dữ liệu | Giá trị mặc định | Mô tả |
---|---|---|---|
type | string | solid | Kiểu button. Nhận các giá trị = [solid || outline || ghost]. |
text | string | '' | Hiển thị text button |
extClass | string | '' | Class cho button |
slots
Thuộc tính | Kiểu dữ liệu | Giá trị mặc định | Mô tả |
---|---|---|---|
header | boolean | false | Render component ở section header |
description | boolean | false | Render component ở dưới header và trên body |
footer | boolean | false | Render 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

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>
Top Image

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>