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
SnackbarContext
SnackbarAction
SnackbarOptions
Type
SnackbarPosition
| Name | Description |
|---|---|
'top' | Mở Snackbar phía trên |
'bottom' | Mở Snackbar phía dưới |
SnackbarType
| Name | Description |
|---|---|
'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 from "react";
import { Route } from "react-router-dom";
import { SnackbarProvider, AnimationRoutes, App, ZMPRouter } from "zmp-ui";
export default function MyApp(props) {
return (
<SnackbarProvider>
<ZMPRouter>
<AnimationRoutes>
} />
</AnimationRoutes>
</ZMPRouter>
</SnackbarProvider>
);
}
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 (
<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>
);
}