Toast

Toast giúp hiển thị các thông báo đơn giản và tự động ẩn sau một khoảng thời gian.

Tương tự như Dialog, để hiện toast ta sẽ sử dụng script API, chứ không phải Vue component.

Toast Methods

Các methods để làm việc với Toast:

Tạo một Toast instance

zmp.toast.create(parameters);

• parameters - object. Object chứa các toast parameters
• Trả về instance của toast vừa tạo

Hủy một Toast instance

zmp.toast.destroy(el);

• el - HTMLElement hoặc string (CSS Selector) hoặc object. Toast element hoặc Toast instance cần huy. zmp.toast.get(el)- Lấy Toast instance
• el - HTMLElement hoặc string (CSS Selector). Toast element.
• Trả về instance của toast

Hiển thị Toast

zmp.toast.open(el, animate);

• el - HTMLElement hoặc string (CSS Selector). Toast element cần mở.
• animate - boolean. Hiện toast cùng với animation.
• Trả về instance của toast

Đóng một Toast

zmp.toast.close(el, animate);

• el - HTMLElement hoặc string (CSS Selector). Toast element cần đóng
• animate - boolean. Đóng Toast cùng với animation.
• Trả về instance của toast

Tạo Toast instance và hiển thị ngay lập tức

zmp.toast.show(parameters);

• parameters - object. Object chứa các toast parameters
• Trả về instance của toast

Toast Parameters

Parameter	Type	Default	Description
el	HTMLElement		Toast element. Có thể tạo toast element sử dụng html string
icon	string		Toast icon. Ví dụ: <Icon zmp="zi-arrow-left" /> hoặc <img src="path/to/icon.png">
text	string		Nội dung bên trong toast
position	string	bottom	Vị trí toast xuất hiện. Có thể là bottom, center hoặc top
horizontalPosition	string	left	Căn vị trí toast xuất hiện trên màn hình rộng. Chỉ có hiệu lực đôi với top và bottom toasts. Có thể là left, center hoặc right
closeButton	boolean	false	Thêm close button
closeButtonColor	string		Một trong các màu tại màu sắc mặc định
closeButtonText	string	Ok	Chữ trên nút đóng
closeTimeout	number		Thời gian toast tự dộng đóng (tính theo ms)
cssClass	string		Thêm class cho toast element
destroyOnClose	boolean	false	Hủy toast instance sau khi đóng
render	function		Có thể tùy chỉnh render. Cần trả về đoạn mã html
on	object		Object chứa các Events Handlers

Tất cả các parameters bên trên có thể sử dụng global app parameters trong toast property để set mặc định cho tất cả toast:

<script>
  const zmpparams ={
    ...
    toast: {
      closeTimeout: 3000,
      closeButton: true,
    }
  };
</script>

<template>
  <zmp-app v-bind="zmpparams"></zmp-app>
</template>

Toast Instance Methods & Properties

Sau khi tạo toast bằng app method, ta được toast instance:

const toast = zmp.toast.create({
  /* tham số khởi tạo */
});

Sau khi có instance của toast đã tạo, chúng ta có thể sử dụng các thuộc tính, phương thức sau:

| Properties | | ------------ | -------------------------------------- | | toast.el | Toast HTML element | | toast.$el | zmpDom instance của toast HTML element | | toast.params | Các tham số của tast |

| Methods | | -------------------------- | -------------------------------------------- | | toast.open() | Mở toast | | toast.close() | Đóng toast | | toast.on(event, handler) | Thêm event handler | | toast.once(event, handler) | Thêm event handler và xoá ngay sau khi fired | | toast.off(event, handler) | Xoá event handler | | toast.off(event) | Xoá tất cả event hanlder trên event cụ thể | | toast.emit(event, ...args) | Tự kích hoạt event thông qua instance |

Toast Events

Event handlers được khai báo trong parameter on của toast hoặc global zmp instance (khi đó có thêm prefix toast):

const toast = zmp.toast.create({
  text: "Hello, how are you?",
  on: {
    opened: function () {
      console.log("Toast opened");
    }
  }
});
// Hoặc
zmp.on("toastOpened", function () {
  console.log("Toast opened");
});

Event	Arguments	Target	Description
closeButtonClick	toast	toast	Event khi người dùng click lên buton đóng toast. Với đôi số event handler nhận vào toast instance
toastCloseButtonClick	toast	app	Tương tự như closeButtonClick nhưng được register trên instance zmp
open	toast	toast	Event khi Toast bắt đầu quá trình mở. Với đối số event handler nhận vào toast instance
toastOpen	toast	app	Tương tự như open nhưng được register trên instance zmp
opened	toast	toast	Event sau khi Toast hoàn thành quá trình mở. Với đối số event handler nhận vào toast instance
toastOpened	toast	app	Tương tự như opened nhưng được register trên instance zmp
close	toast	toast	Event khi Toast bắt đầu quá trình đóng. Với đối số event handler nhận vào toast instance
toastClose	toast	app	Tương tự như close nhưng được register trên instance zmp
closed	toast	toast	Event sau khi Toast đóng hoàn toàn. Với đối số event handler nhận vào toast instance
toastClosed	toast	app	Tương tự như closed nhưng được register trên instance zmp
beforeDestroy	toast	toast	Event ngay trước khi Toast instance bị hủy. Với đối số event handler nhận vào toast instance
toastBeforeDestroy	toast	app	Tương tự như beforeDestroy nhưng được register trên instance zmp

Ví dụ

Code demo fallback when rendering server side!