SnackbarProvider
import { SnackbarProvider } from "zmp-ui";
Dùng để tạo thông báo nhanh hiển thị lên trên giao diện ứng dụng, sự dụng thông báo về thông tin thêm, trạng thái thành công hoặc lỗi xảy ra khi sử dụng một hành động, quá trình download, trạng thái kết nối,...
Ví dụ
Bảng thuộc tính
SnackbarProps
| Property | Type | Required | Description |
|---|---|---|---|
| children | ReactNode | No | Nội dung cần được hiển thị trong snackbar |
| zIndex | number | No | Tuỳ chỉnh độ sâu của snackbar, sử dụng khi có nhiều phần tử overlay lên nhau. |
SnackbarContext
| Property | Type | Required | Description |
|---|---|---|---|
| openSnackbar | (options: SnackbarOptions) => void | No | Hàm để tạo mới và mở một Snackbar. Có thể mở Snackbar với các |
| closeSnackbar | () => void | No | Hàm để đóng một Snackbar, có thể sử dụng để đóng nhanh khi chưa hết thời gian hiển thị. |
| setDownloadProgress | (completed: number) => void | No | Cập nhật phần trăm tiến trình download (0 - 100) khi sử dụng với `type` là `download`. |
SnackbarAction
| Property | Type | Required | Description |
|---|---|---|---|
| close | boolean | No | |
| text | string | No | |
| onClick | (event: React.MouseEvent) => void | No |
SnackbarOptions
| Property | Type | Required | Description |
|---|---|---|---|
| position | SnackbarPosition | No | |
| duration | number | No | |
| text | string | No | |
| type | SnackbarType | No | |
| action | SnackbarAction | No | |
| prefixIcon | ReactNode | No | |
| icon | boolean | No | |
| verticalAction | boolean | No | |
| zIndex | number | No | |
| onClose | () => void | No |