Skip to main content

toast-bar

Last updated on
  • toast-bar là component trong tini-ui hỗ trợ show toast. Bạn có thể dùng jsAPI showToast với chức năng cũng gần tương tự

Cài đặt tini-ui:

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

Thuộc tính

Thuộc tínhKiểu dữ liệuGiá trị mặc địnhMô tả
type'success' | 'error' | 'info''success'Loại toast bar, mỗi type sẽ có một màu khác nhau
iconLeftstring''Icon phía bên trái, hỗ trợ các giá trị trong icon component
showbooleanfalseCho phép hiển thị toast bar hay không
classNamestring''Custom class cho toast bar
stylestring''Style cho toast bar
contentstring''Nội dung của toast bar
textColorstring''Nội dung của toast bar
placement'top' | 'bottom''bottom'Vị trí hiển thị của tooltip
topstring'24px'Vị trí của toast bar đi từ top của page, có tác dụng khi placement là top
bottomstring'24px'Vị trí của toast bar đi từ bottom của page, có tác dụng khi placement là bottom
durationnumber3000Thời gian toast bar xuất hiện
animationDurationnumber300Thời gian animation của toast bar
zIndexnumber999z-index của toast bar
onTapActionfunctionSự kiện được gọi khi bấm vào action trên toast bar
onClosefunctionSự kiện được gọi khi bấm vào icon close

Sample Code

index.json
{
"defaultTitle": "Toast Bar",
"usingComponents": {
"toast-bar": "@tiki.vn/tini-ui/es/toast-bar/index"
}
}
index.txml
<button onTap="onShowToast">Show Toast</button>
<toast-bar
onClose="onCloseToast"
show="{{showToast}}"
duration="{{3000}}"
content="Toast Bar"
animation="{{true}}"
bottom="200px"
type="error" />
index.js
Page({
data: {
showToast: false
},
onShowToast() {
this.setData({ showToast: true });
},
onCloseToast() {
this.setData({ showToast: false });
}
});