Nhảy tới nội dung
Phiên bản: 1.10.0

Snackbar

Snackbar Giúp 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,...

Properties

SnackbarProvider

NameTypeDefaultDescription
zIndexnumberTuỳ chỉnh z-index cho snackbar

SnackbarContext

SnackbarProvider cung cấp các hooks

NameTypeDefaultDescription
openSnackbarfunctionFunction để trigger tạo mới và mở một Snackbar. Có thể mở Snackbar với các SnackbarOptions
closeSnackbarfunctionFunction để đóng một Snackbar, có thể sử dụng để đóng nhanh khi chưa hết thời gian hiển thị
setDownloadProgressfunctionSet phần trăm tiến trình download (0 - 100) khi type="download"

SnackbarAction

NameTypeDefaultDescription
closebooleanAction close
textstringPhần text hiển thị cho action
onClickfunctionThêm event handler cho click event khi user nhấn vào action

SnackbarOptions

NameTypeDefaultDescription
positionSnackbarPositionVị trí snackbar
durationnumberThời gian tồn tại của snackbar tính theo ms
textstringPhần text hiển thị trên snackbar
typeSnackbarTypeLoại snackbar
actionSnackbarActionThêm action cho snackbar
prefixIconReactNodeThêm lead icon cho snackbar
iconbooleanHiển thị icon cho snackbar trường hợp type default
verticalActionbooleanHiển thị action tại hàng mới, thường sử dụng khi action có độ dài text dài
zIndexnumberTuỳ chỉnh z-index cho snackbar
onClosefunctionThêm event handler khi snackbar đóng

Type

SnackbarPosition

NameDescription
"top"Mở Snackbar phía trên
"bottom"Mở Snackbar phía dưới

SnackbarType

NameDescription
"default"Snackbar mặc định
"success"Snackbar dùng hiển thị khi thực hiện một tác vụ thành công
"info"Snackbar dùng để hiển thị thông tin
"error"Snackbar dùng để hiển thị phản hồi một tác vụ thực hiện bị lỗi
"warning"Snackbar dùng để đưa ra cảnh báo
"loading"Snackbar dùng để hiển thị trạng thái loading
"download"Snackbar hiển thị tiến trình download
"countdown"Snackbar hiển thị với countdowwn
"wifi-connected"Snackbar hiển thị khi network kết nối
"wifi-disconnected"Snackbar hiẻn thị khi network ngắt kết nối

Example

import React, { useRef, useEffect } from "react";
import { useSnackbar, Button, Page, Box, Text } from "zmp-ui";

export default function HomePage() {
  const { openSnackbar, setDownloadProgress, closeSnackbar } = useSnackbar();
  const timmerId = useRef();

  useEffect(
    () => () => {
      closeSnackbar();
      clearInterval(timmerId.current);
    },
    []
  );

  return (
    <Page className='section-container'>
      <Text.Title size='small'>Snackbar</Text.Title>

      <Box mr={2} mt={6}>
        <Button
          variant='secondary'
          type='highlight'
          onClick={() => {
            openSnackbar({
              icon: true,
              text: " Snackbar",
              action: {
                text: "close",
                close: true
              },
              duration: 10000000
            });
          }}
        >
          Default with Action
        </Button>
      </Box>
      <Box mr={2} mt={6}>
        <Button
          variant='secondary'
          type='highlight'
          onClick={() => {
            openSnackbar({
              text: "text"
            });
          }}
        >
          Text Only
        </Button>
      </Box>
      <Box mt={6}>
        <Button
          variant='secondary'
          type='highlight'
          onClick={() => {
            openSnackbar({
              text: "Vertical action",
              action: {
                text: "close",
                close: true
              },
              verticalAction: true,
              icon: true,
              duration: 10000000
            });
          }}
        >
          Vertical action
        </Button>
      </Box>
      <Box mt={6}>
        <Button
          variant='secondary'
          type='highlight'
          onClick={() => {
            openSnackbar({
              text: "Default top snackbar",
              position: "top"
            });
          }}
        >
          Default Top
        </Button>
      </Box>
      <Box mt={6}>
        <Button
          variant='secondary'
          type='highlight'
          onClick={() => {
            openSnackbar({
              text: "Error",
              type: "error"
            });
          }}
        >
          Error
        </Button>
      </Box>
      <Box mt={6}>
        <Button
          variant='secondary'
          type='highlight'
          onClick={() => {
            openSnackbar({
              text: "Success",
              type: "success"
            });
          }}
        >
          Success
        </Button>
      </Box>
      <Box mt={6}>
        <Button
          variant='secondary'
          type='highlight'
          onClick={() => {
            openSnackbar({
              text: "Waring",
              type: "warning",
              duration: 10000
            });
          }}
        >
          Warning
        </Button>
      </Box>
      <Box mt={6}>
        <Button
          variant='secondary'
          type='highlight'
          onClick={() => {
            openSnackbar({
              text: "Loading...",
              type: "loading"
            });
          }}
        >
          Loading
        </Button>
      </Box>
      <Box mt={6}>
        <Button
          variant='secondary'
          type='highlight'
          onClick={() => {
            openSnackbar({
              text: "loading...",
              type: "countdown",
              duration: 5000
            });
          }}
        >
          Countdown
        </Button>
      </Box>
      <Box mt={6}>
        <Button
          variant='secondary'
          type='highlight'
          onClick={() => {
            let i = 0;
            timmerId.current = setInterval(() => {
              if (i === 0) {
                openSnackbar({
                  text: "download...",
                  type: "download",
                  duration: 10000000,
                  onClose() {
                    clearInterval(timmerId.current);
                  }
                });
              }
              if (i < 100) {
                // eslint-disable-next-line no-plusplus
                setDownloadProgress(++i);
              }
              if (i === 100) {
                setTimeout(() => {
                  closeSnackbar();
                  clearInterval(timmerId.current);
                }, 1000);
              }
            }, 100);
          }}
        >
          Download
        </Button>
      </Box>
      <Box mt={6}>
        <Button
          variant='secondary'
          type='highlight'
          onClick={() => {
            openSnackbar({
              text: "Connected!",
              type: "wifi-connected"
            });
          }}
        >
          Connect Wifi
        </Button>
      </Box>
      <Box mt={6}>
        <Button
          variant='secondary'
          type='highlight'
          onClick={() => {
            openSnackbar({
              text: "Disconnected!",
              type: "wifi-disconnected"
            });
          }}
        >
          Disconnect Wifi
        </Button>
      </Box>
    </Page>
  );
}