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

Hoặc sử dụng link
https://tiki.vn/apps/vn.tiki.miniapp.demo?page=pages/component/advance/modal/index

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í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>