Skip to main content

bottom-sheet

Bottom Sheet là component được sử dụng để hiển thị modal show từ dưới lên.

image

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

Cài đặt

Để sử dụng bottom-sheet bạn cần phải cài đặt thư viện tini-ui.

$> yarn add @tiki.vn/tini-ui

Chi tiết

Mỗi một bottom-shet sẽ có các thành phần như hình vẽ dưới đây

bottom-item-structure

Trong đó header, additionContent, default, và footer là các slot.

Nếu trong trường hợp, chúng ta không truyền vào headerfooter slot, thì chúng ta có thể custom các thuộc tính title, và buttonTitle

Thuộc tính

Thuộc tínhKiểu dữ liệuGiá trị mặc địnhMô tả
titlestring'Bottom sheet'header title
buttonTitlestring'OK'title của footer button
buttonShape'pill', 'rounded', 'circle', 'square''rounded'shape của footer button. Hỗ trợ từ version 0.2.1-rc trở lên
buttonClsstring''class của footer button. Hỗ trợ từ version 0.2.1-rc trở lên
markbooleantrueGiống thuộc tính mark của popup
animationbooleantrueGiống thuộc tính animation của popup
showbooleantrueGiống thuộc tính show của popup
disableScrollbooleanfalseGiống thuộc tính disableScroll của popup
zIndexnumber2Giống thuộc tính zIndex của popup
disableFromTopnumber50Khoảng cách từ navigation title tới bottom sheet
onCloseeventnoXử lý sự kiện close bottom sheet
onClickeventnoXử lý sự kiện click vào button ở footer

Sample Code

Chi tiết sample code, có thể tham khảo ở https://github.com/tikivn/miniapp-getting-started/tree/main/api-demo/src/pages/component/advance/feedback/bottom-sheet

Khai báo sử dụng trong file .json

{
"defaultTitle": "List",
"usingComponents": {
"bottom-sheet": "@tiki.vn/tini-ui/es/bottom-sheet/index"
}
}

Sử dụng trong txml

<template name="bottom-sheet-list">
<radio-group>
<label tiki:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]}}">
<list-item padding>
<view slot="prefix" class="list-item-prefix">
<radio value="{{item}}" />
</view>
<view class=" list-item-title">Label
</view>
<view slot="suffix" class="list-item-suffix">
<view>Data</view>
</view>
</list-item>
</label>
</radio-group>
</template>

<view class="page-bottom-sheet">
<block-header title="Usage"
description="Bottom sheets are used to display content that temporarily blocks interactions with the main view of an application. Bottom sheets should be used sparingly only to provide complex actions when we want users stay on the current screen." />
<block-variant header="Variants">
<view class="list-button">
<tu-button onTap="onShowBottomSheetList">Bottom sheet with list</tu-button>
<tu-button onTap="onShowBottomSheetText">Bottom sheet with text</tu-button>
<tu-button onTap="onShowBottomSheetPicker">Bottom sheet with picker</tu-button>
</view>
<bottom-sheet show="{{show}}" title="List" buttonTitle="OK" distanceFromTop="{{100}}" onClose="onClose" onClick="onClick">
<template is="bottom-sheet-{{template}}" />
</bottom-sheet>
</block-variant>
</view>

Đoạn code trên sẽ tạo ra giao diện như sau

image