popup

Cập nhật lần cuối vào 21/6/2022

Hiển thị popup menu

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/popup/index

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 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 });
  }
});