1377 lines
73 KiB
JavaScript
1377 lines
73 KiB
JavaScript
import React, { useEffect, useState } from 'react'
|
|
import { Button, Toast } from 'react-bootstrap';
|
|
|
|
const Toasts = () => {
|
|
const [showTopLeftToast, setShowTopLeftToast] = useState(false);
|
|
|
|
const handleTopLeftButtonClick = () => {
|
|
setShowTopLeftToast(true);
|
|
};
|
|
|
|
const handleTopLeftToastClose = () => {
|
|
setShowTopLeftToast(false);
|
|
};
|
|
useEffect(() => {
|
|
const timeoutId = setTimeout(() => {
|
|
setShowTopLeftToast(false);
|
|
}, 6000);
|
|
return () => clearTimeout(timeoutId);
|
|
}, [showTopLeftToast]);
|
|
|
|
const [showTopCenterToast, setShowTopCenterToast] = useState(false);
|
|
|
|
const handleTopCenterButtonClick = () => {
|
|
setShowTopCenterToast(true);
|
|
};
|
|
|
|
const handleTopCenterToastClose = () => {
|
|
setShowTopCenterToast(false);
|
|
};
|
|
useEffect(() => {
|
|
const timeoutId = setTimeout(() => {
|
|
setShowTopCenterToast(false);
|
|
}, 6000);
|
|
return () => clearTimeout(timeoutId);
|
|
}, [showTopCenterToast]);
|
|
|
|
const [showTopEndToast, setShowTopEndToast] = useState(false);
|
|
|
|
const handleTopEndButtonClick = () => {
|
|
setShowTopEndToast(true);
|
|
};
|
|
|
|
const handleTopEndToastClose = () => {
|
|
setShowTopEndToast(false);
|
|
};
|
|
|
|
useEffect(() => {
|
|
const timeoutId = setTimeout(() => {
|
|
setShowTopEndToast(false);
|
|
}, 6000);
|
|
return () => clearTimeout(timeoutId);
|
|
}, [showTopEndToast]);
|
|
|
|
const [showMiddleLeftToast, setShowMiddleLeftToast] = useState(false);
|
|
|
|
const handleMiddleLeftButtonClick = () => {
|
|
setShowMiddleLeftToast(true);
|
|
};
|
|
|
|
const handleMiddleLeftToastClose = () => {
|
|
setShowMiddleLeftToast(false);
|
|
};
|
|
|
|
useEffect(() => {
|
|
const timeoutId = setTimeout(() => {
|
|
setShowMiddleLeftToast(false);
|
|
}, 6000);
|
|
return () => clearTimeout(timeoutId);
|
|
}, [showMiddleLeftToast]);
|
|
const [showMiddleCenterToast, setShowMiddleCenterToast] = useState(false);
|
|
|
|
const handleMiddleCenterButtonClick = () => {
|
|
setShowMiddleCenterToast(true);
|
|
};
|
|
|
|
const handleMiddleCenterToastClose = () => {
|
|
setShowMiddleCenterToast(false);
|
|
};
|
|
|
|
useEffect(() => {
|
|
const timeoutId = setTimeout(() => {
|
|
setShowMiddleCenterToast(false);
|
|
}, 6000);
|
|
return () => clearTimeout(timeoutId);
|
|
}, [showMiddleCenterToast]);
|
|
|
|
const [showMiddleRightToast, setShowMiddleRightToast] = useState(false);
|
|
|
|
const handleMiddleRightButtonClick = () => {
|
|
setShowMiddleRightToast(true);
|
|
};
|
|
|
|
const handleMiddleRightToastClose = () => {
|
|
setShowMiddleRightToast(false);
|
|
};
|
|
|
|
useEffect(() => {
|
|
const timeoutId = setTimeout(() => {
|
|
setShowMiddleRightToast(false);
|
|
}, 6000);
|
|
return () => clearTimeout(timeoutId);
|
|
}, [showMiddleRightToast]);
|
|
const [showBottomLeftToast, setShowBottomLeftToast] = useState(false);
|
|
|
|
const handleBottomLeftButtonClick = () => {
|
|
setShowBottomLeftToast(true);
|
|
};
|
|
|
|
const handleBottomLeftToastClose = () => {
|
|
setShowBottomLeftToast(false);
|
|
};
|
|
|
|
useEffect(() => {
|
|
const timeoutId = setTimeout(() => {
|
|
setShowBottomLeftToast(false);
|
|
}, 6000);
|
|
return () => clearTimeout(timeoutId);
|
|
}, [showBottomLeftToast]);
|
|
|
|
const [showBottomCenterToast, setShowBottomCenterToast] = useState(false);
|
|
|
|
const handleBottomCenterButtonClick = () => {
|
|
setShowBottomCenterToast(true);
|
|
};
|
|
|
|
const handleBottomCenterToastClose = () => {
|
|
setShowBottomCenterToast(false);
|
|
};
|
|
|
|
useEffect(() => {
|
|
const timeoutId = setTimeout(() => {
|
|
setShowBottomCenterToast(false);
|
|
}, 6000);
|
|
return () => clearTimeout(timeoutId);
|
|
}, [showBottomCenterToast]);
|
|
|
|
const [showBottomRightToast, setShowBottomRightToast] = useState(false);
|
|
|
|
const handleBottomRightButtonClick = () => {
|
|
setShowBottomRightToast(true);
|
|
};
|
|
|
|
const handleBottomRightToastClose = () => {
|
|
setShowBottomRightToast(false);
|
|
};
|
|
|
|
useEffect(() => {
|
|
const timeoutId = setTimeout(() => {
|
|
setShowBottomRightToast(false);
|
|
}, 6000);
|
|
return () => clearTimeout(timeoutId);
|
|
}, [showBottomRightToast]);
|
|
|
|
const [showLiveToast, setShowLiveToast] = useState(false);
|
|
|
|
const handleLiveToastButtonClick = () => {
|
|
setShowLiveToast(true);
|
|
};
|
|
useEffect(() => {
|
|
const timeoutId = setTimeout(() => {
|
|
setShowLiveToast(false);
|
|
}, 6000);
|
|
return () => clearTimeout(timeoutId);
|
|
}, [showLiveToast]);
|
|
|
|
const handleLiveToastClose = () => {
|
|
setShowLiveToast(false);
|
|
};
|
|
const [showPrimaryToast, setShowPrimaryToast] = useState(false);
|
|
|
|
const handlePrimaryToastButtonClick = () => {
|
|
setShowPrimaryToast(true);
|
|
};
|
|
|
|
const handlePrimaryToastClose = () => {
|
|
setShowPrimaryToast(false);
|
|
};
|
|
useEffect(() => {
|
|
const timeoutId = setTimeout(() => {
|
|
setShowPrimaryToast(false);
|
|
}, 6000);
|
|
return () => clearTimeout(timeoutId);
|
|
}, [showPrimaryToast]);
|
|
|
|
const [showSecondaryToast, setShowSecondaryToast] = useState(false);
|
|
|
|
const handleSecondaryToastButtonClick = () => {
|
|
setShowSecondaryToast(true);
|
|
};
|
|
|
|
const handleSecondaryToastClose = () => {
|
|
setShowSecondaryToast(false);
|
|
};
|
|
useEffect(() => {
|
|
const timeoutId = setTimeout(() => {
|
|
setShowSecondaryToast(false);
|
|
}, 6000);
|
|
return () => clearTimeout(timeoutId);
|
|
}, [showSecondaryToast]);
|
|
|
|
const [showWarningToast, setShowWarningToast] = useState(false);
|
|
|
|
const handleWarningToastButtonClick = () => {
|
|
setShowWarningToast(true);
|
|
};
|
|
|
|
const handleWarningToastClose = () => {
|
|
setShowWarningToast(false);
|
|
};
|
|
useEffect(() => {
|
|
const timeoutId = setTimeout(() => {
|
|
setShowWarningToast(false);
|
|
}, 6000);
|
|
return () => clearTimeout(timeoutId);
|
|
}, [showWarningToast]);
|
|
|
|
const [showInfoToast, setShowInfoToast] = useState(false);
|
|
const handleInfoToastButtonClick = () => {
|
|
setShowInfoToast(true);
|
|
};
|
|
const handleInfoToastClose = () => {
|
|
setShowInfoToast(false);
|
|
};
|
|
useEffect(() => {
|
|
const timeoutId = setTimeout(() => {
|
|
setShowInfoToast(false);
|
|
}, 6000);
|
|
return () => clearTimeout(timeoutId);
|
|
}, [showInfoToast]);
|
|
|
|
const [showSuccessToast, setShowSuccessToast] = useState(false);
|
|
|
|
const handleSuccessToastButtonClick = () => {
|
|
setShowSuccessToast(true);
|
|
};
|
|
useEffect(() => {
|
|
const timeoutId = setTimeout(() => {
|
|
setShowSuccessToast(false);
|
|
}, 6000);
|
|
return () => clearTimeout(timeoutId);
|
|
}, [showSuccessToast]);
|
|
|
|
const handleSuccessToastClose = () => {
|
|
setShowSuccessToast(false);
|
|
};
|
|
const [showDangerToast, setShowDangerToast] = useState(false);
|
|
|
|
const handleDangerToastButtonClick = () => {
|
|
setShowDangerToast(true);
|
|
};
|
|
useEffect(() => {
|
|
const timeoutId = setTimeout(() => {
|
|
setShowDangerToast(false);
|
|
}, 6000);
|
|
return () => clearTimeout(timeoutId);
|
|
}, [showDangerToast]);
|
|
|
|
const handleDangerToastClose = () => {
|
|
setShowDangerToast(false);
|
|
};
|
|
const [showSolidPrimaryToast, setShowSolidPrimaryToast] = useState(false);
|
|
|
|
const handleSolidPrimaryToastButtonClick = () => {
|
|
setShowSolidPrimaryToast(true);
|
|
};
|
|
useEffect(() => {
|
|
const timeoutId = setTimeout(() => {
|
|
setShowSolidPrimaryToast(false);
|
|
}, 6000);
|
|
return () => clearTimeout(timeoutId);
|
|
}, [showSolidPrimaryToast]);
|
|
|
|
const handleSolidPrimaryToastClose = () => {
|
|
setShowSolidPrimaryToast(false);
|
|
};
|
|
const [showSolidSecondaryToast, setShowSolidSecondaryToast] = useState(false);
|
|
|
|
const handleSolidSecondaryToastButtonClick = () => {
|
|
setShowSolidSecondaryToast(true);
|
|
};
|
|
useEffect(() => {
|
|
const timeoutId = setTimeout(() => {
|
|
setShowSolidSecondaryToast(false);
|
|
}, 6000);
|
|
return () => clearTimeout(timeoutId);
|
|
}, [showSolidSecondaryToast]);
|
|
|
|
const handleSolidSecondaryToastClose = () => {
|
|
setShowSolidSecondaryToast(false);
|
|
};
|
|
|
|
const [showSolidWarningToast, setShowSolidWarningToast] = useState(false);
|
|
|
|
const handleSolidWarningToastButtonClick = () => {
|
|
setShowSolidWarningToast(true);
|
|
};
|
|
|
|
const handleSolidWarningToastClose = () => {
|
|
setShowSolidWarningToast(false);
|
|
};
|
|
useEffect(() => {
|
|
const timeoutId = setTimeout(() => {
|
|
setShowSolidWarningToast(false);
|
|
}, 6000);
|
|
return () => clearTimeout(timeoutId);
|
|
}, [showSolidWarningToast]);
|
|
|
|
const [showSolidInfoToast, setShowSolidInfoToast] = useState(false);
|
|
|
|
const handleSolidInfoToastButtonClick = () => {
|
|
setShowSolidInfoToast(true);
|
|
};
|
|
|
|
const handleSolidInfoToastClose = () => {
|
|
setShowSolidInfoToast(false);
|
|
};
|
|
useEffect(() => {
|
|
const timeoutId = setTimeout(() => {
|
|
setShowSolidInfoToast(false);
|
|
}, 6000);
|
|
return () => clearTimeout(timeoutId);
|
|
}, [showSolidInfoToast]);
|
|
|
|
const [showSolidSuccessToast, setShowSolidSuccessToast] = useState(false);
|
|
|
|
const handleSolidSuccessToastButtonClick = () => {
|
|
setShowSolidSuccessToast(true);
|
|
};
|
|
|
|
const handleSolidSuccessToastClose = () => {
|
|
setShowSolidSuccessToast(false);
|
|
};
|
|
useEffect(() => {
|
|
const timeoutId = setTimeout(() => {
|
|
setShowSolidSuccessToast(false);
|
|
}, 6000);
|
|
return () => clearTimeout(timeoutId);
|
|
}, [showSolidSuccessToast]);
|
|
|
|
const [showSolidDangerToast, setShowSolidDangerToast] = useState(false);
|
|
|
|
const handleSolidDangerToastButtonClick = () => {
|
|
setShowSolidDangerToast(true);
|
|
};
|
|
|
|
const handleSolidDangerToastClose = () => {
|
|
setShowSolidDangerToast(false);
|
|
};
|
|
useEffect(() => {
|
|
const timeoutId = setTimeout(() => {
|
|
setShowSolidDangerToast(false);
|
|
}, 6000);
|
|
return () => clearTimeout(timeoutId);
|
|
}, [showSolidDangerToast]);
|
|
|
|
return (
|
|
<div>
|
|
{/* Page Wrapper */}
|
|
<div className="page-wrapper">
|
|
<div className="content">
|
|
<div className="page-header">
|
|
<div className="page-title">
|
|
<h4>Toastr</h4>
|
|
</div>
|
|
</div>
|
|
<div className="row">
|
|
{/* Toastr */}
|
|
<div className="col-xl-4">
|
|
<div className="card">
|
|
<div className="card-header justify-content-between">
|
|
<div className="card-title">Live Example</div>
|
|
</div>
|
|
<div className="card-body">
|
|
<button
|
|
type="button"
|
|
className="btn btn-primary btn-wave"
|
|
id="liveToastBtn"
|
|
onClick={handleLiveToastButtonClick}
|
|
>
|
|
Show live toast
|
|
</button>
|
|
|
|
<div className="toast-container position-fixed top-0 end-0 p-3">
|
|
<Toast
|
|
show={showLiveToast}
|
|
onClose={handleLiveToastClose}
|
|
id="liveToast"
|
|
className="toast"
|
|
role="alert"
|
|
aria-live="assertive"
|
|
aria-atomic="true"
|
|
>
|
|
<Toast.Header closeButton className="text-default">
|
|
<strong className="me-auto">Toast</strong>
|
|
<small>11 mins ago</small>
|
|
</Toast.Header>
|
|
<Toast.Body>Hello, world! This is a toast message.</Toast.Body>
|
|
</Toast>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="card">
|
|
<div className="card-header justify-content-between">
|
|
<div className="card-title">Color schemes</div>
|
|
</div>
|
|
<div className="card-body">
|
|
<div
|
|
className="toast align-items-center text-bg-primary border-0 fade show mb-4"
|
|
role="alert"
|
|
aria-live="assertive"
|
|
aria-atomic="true"
|
|
>
|
|
<div className="d-flex">
|
|
<div className="toast-body">
|
|
Hello, world! This is the Primary toast message.
|
|
</div>
|
|
<button
|
|
type="button"
|
|
className="btn-close btn-close-white me-2 m-auto"
|
|
data-bs-dismiss="toast"
|
|
aria-label="Close"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div
|
|
className="toast align-items-center text-bg-secondary border-0 fade show mb-4"
|
|
role="alert"
|
|
aria-live="assertive"
|
|
aria-atomic="true"
|
|
>
|
|
<div className="d-flex">
|
|
<div className="toast-body">
|
|
Hello, world! This is the Secondary toast.
|
|
</div>
|
|
<button
|
|
type="button"
|
|
className="btn-close btn-close-white me-2 m-auto"
|
|
data-bs-dismiss="toast"
|
|
aria-label="Close"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div
|
|
className="toast align-items-center text-bg-success border-0 fade show mb-4"
|
|
role="alert"
|
|
aria-live="assertive"
|
|
aria-atomic="true"
|
|
>
|
|
<div className="d-flex">
|
|
<div className="toast-body">
|
|
Hello, world! This is the Success toast message.
|
|
</div>
|
|
<button
|
|
type="button"
|
|
className="btn-close btn-close-white me-2 m-auto"
|
|
data-bs-dismiss="toast"
|
|
aria-label="Close"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div
|
|
className="toast align-items-center text-bg-info border-0 fade show"
|
|
role="alert"
|
|
aria-live="assertive"
|
|
aria-atomic="true"
|
|
>
|
|
<div className="d-flex">
|
|
<div className="toast-body">
|
|
Hello, world! This is the info toast message.
|
|
</div>
|
|
<button
|
|
type="button"
|
|
className="btn-close btn-close-white me-2 m-auto"
|
|
data-bs-dismiss="toast"
|
|
aria-label="Close"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/* /Toastr */}
|
|
{/* Toastr */}
|
|
<div className="col-xl-4">
|
|
<div className="card">
|
|
<div className="card-header justify-content-between">
|
|
<div className="card-title">Basic example</div>
|
|
</div>
|
|
<div className="card-body">
|
|
<div
|
|
className="toast fade show"
|
|
role="alert"
|
|
aria-live="assertive"
|
|
aria-atomic="true"
|
|
>
|
|
<div className="toast-header text-default">
|
|
<strong className="me-auto">Toast</strong>
|
|
<small>11 mins ago</small>
|
|
<button
|
|
type="button"
|
|
className="btn-close"
|
|
data-bs-dismiss="toast"
|
|
aria-label="Close"
|
|
/>
|
|
</div>
|
|
<div className="toast-body">
|
|
Hello, world! This is a toast message.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="card">
|
|
<div className="card-header justify-content-between">
|
|
<div className="card-title">Stacking</div>
|
|
</div>
|
|
<div className="card-body">
|
|
<div className="toast-container position-static">
|
|
<div
|
|
className="toast fade show"
|
|
role="alert"
|
|
aria-live="assertive"
|
|
aria-atomic="true"
|
|
>
|
|
<div className="toast-header text-default">
|
|
<strong className="me-auto">Toast</strong>
|
|
<small className="text-muted">just now</small>
|
|
<button
|
|
type="button"
|
|
className="btn-close"
|
|
data-bs-dismiss="toast"
|
|
aria-label="Close"
|
|
/>
|
|
</div>
|
|
<div className="toast-body">See? Just like this.</div>
|
|
</div>
|
|
<div
|
|
className="toast fade show"
|
|
role="alert"
|
|
aria-live="assertive"
|
|
aria-atomic="true"
|
|
>
|
|
<div className="toast-header text-default">
|
|
<strong className="me-auto">Toast</strong>
|
|
<small className="text-muted">2 seconds ago</small>
|
|
<button
|
|
type="button"
|
|
className="btn-close"
|
|
data-bs-dismiss="toast"
|
|
aria-label="Close"
|
|
/>
|
|
</div>
|
|
<div className="toast-body">
|
|
Heads up, toasts will stack automatically
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/* /Toastr */}
|
|
{/* Translucent */}
|
|
<div className="col-xl-4">
|
|
<div className="card">
|
|
<div className="card-header justify-content-between">
|
|
<div className="card-title">Translucent</div>
|
|
</div>
|
|
<div className="card-body">
|
|
<div
|
|
className="toast fade show"
|
|
role="alert"
|
|
aria-live="assertive"
|
|
aria-atomic="true"
|
|
>
|
|
<div className="toast-header text-default">
|
|
<strong className="me-auto">Toast</strong>
|
|
<small className="text-muted">11 mins ago</small>
|
|
<button
|
|
type="button"
|
|
className="btn-close"
|
|
data-bs-dismiss="toast"
|
|
aria-label="Close"
|
|
/>
|
|
</div>
|
|
<div className="toast-body">
|
|
Hello, world! This is a toast message.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="card">
|
|
<div className="card-header justify-content-between">
|
|
<div className="card-title">Custom content</div>
|
|
</div>
|
|
<div className="card-body">
|
|
<div
|
|
className="toast align-items-center fade show mb-3"
|
|
role="alert"
|
|
aria-live="assertive"
|
|
aria-atomic="true"
|
|
>
|
|
<div className="d-flex">
|
|
<div className="toast-body">
|
|
Hello, world! This is a toast message.
|
|
</div>
|
|
<button
|
|
type="button"
|
|
className="btn-close me-2 m-auto"
|
|
data-bs-dismiss="toast"
|
|
aria-label="Close"
|
|
></button>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<span className="my-4 text-muted">
|
|
Alternatively, you can also add additional controls and
|
|
components to toasts.
|
|
</span>
|
|
</div>
|
|
<div
|
|
className="toast fade show mt-2"
|
|
role="alert"
|
|
aria-live="assertive"
|
|
aria-atomic="true"
|
|
>
|
|
<div className="toast-body">
|
|
Hello, world! This is a toast message.
|
|
<div className="mt-2 pt-2 border-top">
|
|
<button
|
|
type="button"
|
|
className="btn btn-primary btn-sm btn-wave me-2"
|
|
>
|
|
Take action
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className="btn btn-secondary btn-sm btn-wave"
|
|
data-bs-dismiss="toast"
|
|
>
|
|
Close
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/* /Translucent */}
|
|
</div>
|
|
<div className="row">
|
|
{/* Color Variants Live */}
|
|
<div className="col-xl-6">
|
|
<div className="card">
|
|
<div className="card-header justify-content-between">
|
|
<div className="card-title">Color Variants Live</div>
|
|
</div>
|
|
<div className="card-body">
|
|
<div className="btn-list">
|
|
|
|
<button
|
|
type="button"
|
|
className="btn btn-primary-light me-2 btn-wave"
|
|
id="primaryToastBtn"
|
|
onClick={handlePrimaryToastButtonClick}
|
|
>
|
|
Primary
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className="btn btn-secondary me-2 btn-wave"
|
|
id="secondaryToastBtn"
|
|
onClick={handleSecondaryToastButtonClick}
|
|
>
|
|
Secondary
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className="btn btn-warning me-2 btn-wave"
|
|
id="warningToastBtn"
|
|
onClick={handleWarningToastButtonClick}
|
|
>
|
|
Warning
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className="btn btn-info me-2 btn-wave"
|
|
id="infoToastBtn"
|
|
onClick={handleInfoToastButtonClick}
|
|
>
|
|
Info
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className="btn btn-success me-2 btn-wave"
|
|
id="successToastBtn"
|
|
onClick={handleSuccessToastButtonClick}
|
|
>
|
|
Success
|
|
</button>
|
|
|
|
<button
|
|
type="button"
|
|
className="btn btn-danger me-2 btn-wave"
|
|
id="dangerToastBtn"
|
|
onClick={handleDangerToastButtonClick}
|
|
>
|
|
Danger
|
|
</button>
|
|
</div>
|
|
<div className="toast-container position-fixed top-0 end-0 p-3">
|
|
<Toast
|
|
show={showPrimaryToast}
|
|
onClose={handlePrimaryToastClose}
|
|
id="primaryToast"
|
|
className="colored-toast bg-primary-transparent"
|
|
role="alert"
|
|
aria-live="assertive"
|
|
aria-atomic="true"
|
|
>
|
|
<Toast.Header closeButton className="bg-primary text-fixed-white">
|
|
<strong className="me-auto">Toast</strong>
|
|
<Button
|
|
variant="close"
|
|
onClick={handlePrimaryToastClose}
|
|
aria-label="Close"
|
|
/>
|
|
</Toast.Header>
|
|
<Toast.Body>
|
|
{/* Add your toast content here */}
|
|
Hello, world! This is a primary toast message.
|
|
</Toast.Body>
|
|
</Toast>
|
|
<Toast
|
|
show={showSecondaryToast}
|
|
onClose={handleSecondaryToastClose}
|
|
id="secondaryToast"
|
|
className="colored-toast bg-secondary-transparent"
|
|
role="alert"
|
|
aria-live="assertive"
|
|
aria-atomic="true"
|
|
>
|
|
<Toast.Header closeButton className="bg-secondary text-fixed-white">
|
|
<strong className="me-auto">Toast</strong>
|
|
<Button
|
|
variant="close"
|
|
onClick={handleSecondaryToastClose}
|
|
aria-label="Close"
|
|
/>
|
|
</Toast.Header>
|
|
<Toast.Body>
|
|
{/* Add your toast content here */}
|
|
Your toast message here.
|
|
</Toast.Body>
|
|
</Toast>
|
|
|
|
<Toast
|
|
show={showWarningToast}
|
|
onClose={handleWarningToastClose}
|
|
id="warningToast"
|
|
className="colored-toast bg-warning-transparent"
|
|
role="alert"
|
|
aria-live="assertive"
|
|
aria-atomic="true"
|
|
>
|
|
<Toast.Header closeButton className="bg-warning text-fixed-white">
|
|
<strong className="me-auto">Toast</strong>
|
|
<Button
|
|
variant="close"
|
|
onClick={handleWarningToastClose}
|
|
aria-label="Close"
|
|
/>
|
|
</Toast.Header>
|
|
<Toast.Body>
|
|
{/* Add your toast content here */}
|
|
Your toast message here.
|
|
</Toast.Body>
|
|
</Toast>
|
|
|
|
<Toast
|
|
show={showInfoToast}
|
|
onClose={handleInfoToastClose}
|
|
id="infoToast"
|
|
className="colored-toast bg-info-transparent"
|
|
role="alert"
|
|
aria-live="assertive"
|
|
aria-atomic="true"
|
|
>
|
|
<Toast.Header closeButton className="bg-info text-fixed-white">
|
|
<strong className="me-auto">Toast</strong>
|
|
<Button
|
|
variant="close"
|
|
onClick={handleInfoToastClose}
|
|
aria-label="Close"
|
|
/>
|
|
</Toast.Header>
|
|
<Toast.Body>
|
|
{/* Add your toast content here */}
|
|
Your toast message here.
|
|
</Toast.Body>
|
|
</Toast>
|
|
<Toast
|
|
show={showSuccessToast}
|
|
onClose={handleSuccessToastClose}
|
|
id="successToast"
|
|
className="colored-toast bg-success-transparent"
|
|
role="alert"
|
|
aria-live="assertive"
|
|
aria-atomic="true"
|
|
>
|
|
<Toast.Header closeButton className="bg-success text-fixed-white">
|
|
<strong className="me-auto">Toast</strong>
|
|
<Button
|
|
variant="close"
|
|
onClick={handleSuccessToastClose}
|
|
aria-label="Close"
|
|
/>
|
|
</Toast.Header>
|
|
<Toast.Body>
|
|
{/* Add your toast content here */}
|
|
Your toast message here.
|
|
</Toast.Body>
|
|
</Toast>
|
|
<Toast
|
|
show={showDangerToast}
|
|
onClose={handleDangerToastClose}
|
|
id="dangerToast"
|
|
className="colored-toast bg-danger-transparent"
|
|
role="alert"
|
|
aria-live="assertive"
|
|
aria-atomic="true"
|
|
>
|
|
<Toast.Header closeButton className="bg-danger text-fixed-white">
|
|
<strong className="me-auto">Toast</strong>
|
|
<Button
|
|
variant="close"
|
|
onClick={handleDangerToastClose}
|
|
aria-label="Close"
|
|
/>
|
|
</Toast.Header>
|
|
<Toast.Body>
|
|
{/* Add your toast content here */}
|
|
Your toast message here.
|
|
</Toast.Body>
|
|
</Toast>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/* /Color Variants Live */}
|
|
{/* Solid Background Toasts */}
|
|
<div className="col-xl-6">
|
|
<div className="card">
|
|
<div className="card-header justify-content-between">
|
|
<div className="card-title">Solid Background Toasts</div>
|
|
</div>
|
|
<div className="card-body">
|
|
<div className="btn-list">
|
|
<button
|
|
type="button"
|
|
className="btn btn-primary me-2 btn-wave"
|
|
id="solidPrimaryToastBtn"
|
|
onClick={handleSolidPrimaryToastButtonClick}
|
|
>
|
|
Primary
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className="btn btn-secondary me-2 btn-wave"
|
|
id="solidSecondaryToastBtn"
|
|
onClick={handleSolidSecondaryToastButtonClick}
|
|
>
|
|
Secondary
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className="btn btn-warning me-2 btn-wave"
|
|
id="solidWarningToastBtn"
|
|
onClick={handleSolidWarningToastButtonClick}
|
|
>
|
|
Warning
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className="btn btn-info me-2 btn-wave"
|
|
id="solidInfoToastBtn"
|
|
onClick={handleSolidInfoToastButtonClick}
|
|
>
|
|
Info
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className="btn btn-success me-2 btn-wave"
|
|
id="solidSuccessToastBtn"
|
|
onClick={handleSolidSuccessToastButtonClick}
|
|
>
|
|
Success
|
|
</button>
|
|
<Button
|
|
type="button"
|
|
className="btn btn-danger me-2 btn-wave"
|
|
id="solidDangerToastBtn"
|
|
onClick={handleSolidDangerToastButtonClick}
|
|
>
|
|
Danger
|
|
</Button>
|
|
</div>
|
|
<div className="toast-container position-fixed top-0 end-0 p-3">
|
|
<Toast
|
|
show={showSolidPrimaryToast}
|
|
onClose={handleSolidPrimaryToastClose}
|
|
id="solidPrimaryToast"
|
|
className="colored-toast bg-primary text-fixed-white"
|
|
role="alert"
|
|
aria-live="assertive"
|
|
aria-atomic="true"
|
|
>
|
|
<Toast.Header closeButton className="bg-primary text-fixed-white">
|
|
<strong className="me-auto">Toast</strong>
|
|
<Button
|
|
variant="close"
|
|
onClick={handleSolidPrimaryToastClose}
|
|
aria-label="Close"
|
|
/>
|
|
</Toast.Header>
|
|
<Toast.Body>
|
|
{/* Add your toast content here */}
|
|
Your toast message here.
|
|
</Toast.Body>
|
|
</Toast>
|
|
<Toast
|
|
show={showSolidSecondaryToast}
|
|
onClose={handleSolidSecondaryToastClose}
|
|
id="solidSecondaryToast"
|
|
className="colored-toast bg-secondary text-fixed-white"
|
|
role="alert"
|
|
aria-live="assertive"
|
|
aria-atomic="true"
|
|
>
|
|
<Toast.Header closeButton className="bg-secondary text-fixed-white">
|
|
<strong className="me-auto">Toast</strong>
|
|
<Button
|
|
variant="close"
|
|
onClick={handleSolidSecondaryToastClose}
|
|
aria-label="Close"
|
|
/>
|
|
</Toast.Header>
|
|
<Toast.Body>
|
|
{/* Add your toast content here */}
|
|
Your toast message here.
|
|
</Toast.Body>
|
|
</Toast>
|
|
|
|
<Toast
|
|
show={showSolidWarningToast}
|
|
onClose={handleSolidWarningToastClose}
|
|
id="solidWarningToast"
|
|
className="colored-toast bg-warning text-fixed-white"
|
|
role="alert"
|
|
aria-live="assertive"
|
|
aria-atomic="true"
|
|
>
|
|
<Toast.Header closeButton className="bg-warning text-fixed-white">
|
|
<strong className="me-auto">Toast</strong>
|
|
<Button
|
|
variant="close"
|
|
onClick={handleSolidWarningToastClose}
|
|
aria-label="Close"
|
|
/>
|
|
</Toast.Header>
|
|
<Toast.Body>
|
|
{/* Add your toast content here */}
|
|
Your toast message here.
|
|
</Toast.Body>
|
|
</Toast>
|
|
<Toast
|
|
show={showSolidInfoToast}
|
|
onClose={handleSolidInfoToastClose}
|
|
id="solidInfoToast"
|
|
className="colored-toast bg-info text-fixed-white"
|
|
role="alert"
|
|
aria-live="assertive"
|
|
aria-atomic="true"
|
|
>
|
|
<Toast.Header closeButton className="bg-info text-fixed-white">
|
|
<strong className="me-auto">Toast</strong>
|
|
<Button
|
|
variant="close"
|
|
onClick={handleSolidInfoToastClose}
|
|
aria-label="Close"
|
|
/>
|
|
</Toast.Header>
|
|
<Toast.Body>
|
|
{/* Add your toast content here */}
|
|
Your toast message here.
|
|
</Toast.Body>
|
|
</Toast>
|
|
<Toast
|
|
show={showSolidSuccessToast}
|
|
onClose={handleSolidSuccessToastClose}
|
|
id="solidSuccessToast"
|
|
className="colored-toast bg-success text-fixed-white"
|
|
role="alert"
|
|
aria-live="assertive"
|
|
aria-atomic="true"
|
|
>
|
|
<Toast.Header closeButton className="bg-success text-fixed-white">
|
|
<strong className="me-auto">Toast</strong>
|
|
<Button
|
|
variant="close"
|
|
onClick={handleSolidSuccessToastClose}
|
|
aria-label="Close"
|
|
/>
|
|
</Toast.Header>
|
|
<Toast.Body>
|
|
{/* Add your toast content here */}
|
|
Your toast message here.
|
|
</Toast.Body>
|
|
</Toast>
|
|
<Toast
|
|
show={showSolidDangerToast}
|
|
onClose={handleSolidDangerToastClose}
|
|
id="solidDangerToast"
|
|
className="colored-toast bg-danger text-fixed-white"
|
|
role="alert"
|
|
aria-live="assertive"
|
|
aria-atomic="true"
|
|
>
|
|
<Toast.Header closeButton className="bg-danger text-fixed-white">
|
|
<strong className="me-auto">Toast</strong>
|
|
<Button
|
|
variant="close"
|
|
onClick={handleSolidDangerToastClose}
|
|
aria-label="Close"
|
|
/>
|
|
</Toast.Header>
|
|
<Toast.Body>
|
|
{/* Add your toast content here */}
|
|
Your toast message here.
|
|
</Toast.Body>
|
|
</Toast>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/* /Solid Background Toasts */}
|
|
</div>
|
|
{/* Toast Placements */}
|
|
<div className="row">
|
|
<div className="col-xl-12">
|
|
<div className="card">
|
|
<div className="card-header justify-content-between">
|
|
<div className="card-title">Toast Placements</div>
|
|
</div>
|
|
<div className="card-body">
|
|
<div className="btn-list">
|
|
<Button
|
|
variant="outline-primary me-2 btn-wave"
|
|
id="topleftToastBtn"
|
|
onClick={handleTopLeftButtonClick}
|
|
>
|
|
Top Left
|
|
</Button>
|
|
<button
|
|
type="button"
|
|
className="btn btn-outline-primary me-2 btn-wave"
|
|
id="topcenterToastBtn"
|
|
onClick={handleTopCenterButtonClick}
|
|
>
|
|
Top Center
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className="btn btn-outline-primary me-2 btn-wave"
|
|
id="topendToastBtn"
|
|
onClick={handleTopEndButtonClick}
|
|
>
|
|
Top Right
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className="btn btn-outline-primary me-2 btn-wave"
|
|
id="middleleftToastBtn"
|
|
onClick={handleMiddleLeftButtonClick}
|
|
>
|
|
Middle Left
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className="btn btn-outline-primary me-2 btn-wave"
|
|
id="middlecenterToastBtn"
|
|
onClick={handleMiddleCenterButtonClick}
|
|
>
|
|
Middle Center
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className="btn btn-outline-primary me-2 btn-wave"
|
|
id="middlerightToastBtn"
|
|
onClick={handleMiddleRightButtonClick}
|
|
>
|
|
Middle Right
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className="btn btn-outline-primary me-2 btn-wave"
|
|
id="bottomleftToastBtn"
|
|
onClick={handleBottomLeftButtonClick}
|
|
>
|
|
Bottom Left
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className="btn btn-outline-primary me-2 btn-wave"
|
|
id="bottomcenterToastBtn"
|
|
onClick={handleBottomCenterButtonClick}
|
|
>
|
|
Bottom Center
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className="btn btn-outline-primary me-2 btn-wave"
|
|
id="bottomrightToastBtn"
|
|
onClick={handleBottomRightButtonClick}
|
|
>
|
|
Bottom End
|
|
</button>
|
|
</div>
|
|
<div className="toast-container position-fixed top-0 start-0 p-3">
|
|
<Toast className="toast colored-toast bg-primary-transparent text-primary"
|
|
show={showTopLeftToast}
|
|
onClose={handleTopLeftToastClose}
|
|
id="topleft-Toast"
|
|
bg="primary-transparent"
|
|
text="text-primary"
|
|
>
|
|
<Toast.Header className="toast-header bg-primary text-fixed-white" text="text-fixed-white">
|
|
<strong className="me-auto">Toast</strong>
|
|
<Button
|
|
variant="close"
|
|
onClick={handleTopLeftToastClose}
|
|
aria-label="Close"
|
|
/>
|
|
</Toast.Header>
|
|
<Toast.Body>Your ,toast message here.</Toast.Body>
|
|
</Toast>
|
|
</div>
|
|
<div className="toast-container position-fixed top-0 start-50 translate-middle-x p-3">
|
|
<Toast
|
|
show={showTopCenterToast}
|
|
onClose={handleTopCenterToastClose}
|
|
id="topcenter-Toast"
|
|
className="top-0 start-50 translate-middle-x"
|
|
bg="primary-transparent"
|
|
text="text-primary"
|
|
>
|
|
<Toast.Header closeButton className="bg-primary text-fixed-white">
|
|
<strong className="me-auto">Toast</strong>
|
|
<Button
|
|
variant="close"
|
|
onClick={handleTopCenterToastClose}
|
|
aria-label="Close"
|
|
/>
|
|
</Toast.Header>
|
|
<Toast.Body>Your, toast message here.</Toast.Body>
|
|
</Toast>
|
|
</div>
|
|
|
|
<div className="toast-container position-fixed top-0 end-0 p-3">
|
|
<Toast
|
|
show={showTopEndToast}
|
|
onClose={handleTopEndToastClose}
|
|
id="topend-Toast"
|
|
className="colored-toast bg-primary-transparent text-primary"
|
|
role="alert"
|
|
aria-live="assertive"
|
|
aria-atomic="true"
|
|
>
|
|
<Toast.Header closeButton className="bg-primary text-fixed-white">
|
|
<strong className="me-auto">Toast</strong>
|
|
<Button
|
|
variant="close"
|
|
onClick={handleTopEndToastClose}
|
|
aria-label="Close"
|
|
/>
|
|
</Toast.Header>
|
|
<Toast.Body>Your, toast message here.</Toast.Body>
|
|
</Toast>
|
|
|
|
|
|
</div>
|
|
<div className="toast-container position-fixed top-50 start-0 translate-middle-y p-3">
|
|
<Toast
|
|
show={showMiddleLeftToast}
|
|
onClose={handleMiddleLeftToastClose}
|
|
id="middleleft-Toast"
|
|
className="colored-toast bg-primary-transparent text-primary"
|
|
role="alert"
|
|
aria-live="assertive"
|
|
aria-atomic="true"
|
|
>
|
|
<Toast.Header closeButton className="bg-primary text-fixed-white">
|
|
<strong className="me-auto">Toast</strong>
|
|
<Button
|
|
variant="close"
|
|
onClick={handleMiddleLeftToastClose}
|
|
aria-label="Close"
|
|
/>
|
|
</Toast.Header>
|
|
<Toast.Body>Your, toast message here.</Toast.Body>
|
|
</Toast>
|
|
|
|
|
|
</div>
|
|
<div className="toast-container position-fixed top-50 start-50 translate-middle">
|
|
<Toast
|
|
show={showMiddleCenterToast}
|
|
onClose={handleMiddleCenterToastClose}
|
|
id="middlecenter-Toast"
|
|
className="colored-toast bg-primary-transparent text-primary"
|
|
role="alert"
|
|
aria-live="assertive"
|
|
aria-atomic="true"
|
|
>
|
|
<Toast.Header closeButton className="bg-primary text-fixed-white">
|
|
<strong className="me-auto">Toast</strong>
|
|
<Button
|
|
variant="close"
|
|
onClick={handleMiddleCenterToastClose}
|
|
aria-label="Close"
|
|
/>
|
|
</Toast.Header>
|
|
<Toast.Body>Your, toast message here.</Toast.Body>
|
|
</Toast>
|
|
</div>
|
|
<div className="toast-container position-fixed top-50 end-0 translate-middle-y p-3">
|
|
<Toast
|
|
show={showMiddleRightToast}
|
|
onClose={handleMiddleRightToastClose}
|
|
id="middleright-Toast"
|
|
className="colored-toast bg-primary-transparent text-primary"
|
|
role="alert"
|
|
aria-live="assertive"
|
|
aria-atomic="true"
|
|
>
|
|
<Toast.Header closeButton className="bg-primary text-fixed-white">
|
|
<strong className="me-auto">Toast</strong>
|
|
<Button
|
|
variant="close"
|
|
onClick={handleMiddleRightToastClose}
|
|
aria-label="Close"
|
|
/>
|
|
</Toast.Header>
|
|
<Toast.Body>Your, toast message here.</Toast.Body>
|
|
</Toast>
|
|
|
|
</div>
|
|
<div className="toast-container position-fixed bottom-0 start-0 p-3">
|
|
<Toast
|
|
show={showBottomLeftToast}
|
|
onClose={handleBottomLeftToastClose}
|
|
id="bottomleft-Toast"
|
|
className="colored-toast bg-primary-transparent text-primary"
|
|
role="alert"
|
|
aria-live="assertive"
|
|
aria-atomic="true"
|
|
>
|
|
<Toast.Header closeButton className="bg-primary text-fixed-white">
|
|
<strong className="me-auto">Toast</strong>
|
|
<Button
|
|
variant="close"
|
|
onClick={handleBottomLeftToastClose}
|
|
aria-label="Close"
|
|
/>
|
|
</Toast.Header>
|
|
<Toast.Body>Your, toast message here.</Toast.Body>
|
|
</Toast>
|
|
</div>
|
|
<div className="toast-container position-fixed bottom-0 start-50 translate-middle-x p-3">
|
|
<Toast
|
|
show={showBottomCenterToast}
|
|
onClose={handleBottomCenterToastClose}
|
|
id="bottomcenter-Toast"
|
|
className="colored-toast bg-primary-transparent text-primary"
|
|
role="alert"
|
|
aria-live="assertive"
|
|
aria-atomic="true"
|
|
>
|
|
<Toast.Header closeButton className="bg-primary text-fixed-white">
|
|
<strong className="me-auto">Toast</strong>
|
|
<Button
|
|
variant="close"
|
|
onClick={handleBottomCenterToastClose}
|
|
aria-label="Close"
|
|
/>
|
|
</Toast.Header>
|
|
<Toast.Body>Your, toast message here.</Toast.Body>
|
|
</Toast>
|
|
|
|
</div>
|
|
<div className="toast-container position-fixed bottom-0 end-0 p-3">
|
|
<Toast
|
|
show={showBottomRightToast}
|
|
onClose={handleBottomRightToastClose}
|
|
id="bottomright-Toast"
|
|
className="colored-toast bg-primary-transparent text-primary"
|
|
role="alert"
|
|
aria-live="assertive"
|
|
aria-atomic="true"
|
|
>
|
|
<Toast.Header closeButton className="bg-primary text-fixed-white">
|
|
<strong className="me-auto">Toast</strong>
|
|
<Button
|
|
variant="close"
|
|
onClick={handleBottomRightToastClose}
|
|
aria-label="Close"
|
|
/>
|
|
</Toast.Header>
|
|
<Toast.Body>Your, toast message here.</Toast.Body>
|
|
</Toast>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/* Toast Placements */}
|
|
{/* Aligning Toast Using Flexbox */}
|
|
<div className="row">
|
|
<div className="col-xl-12">
|
|
<div className="card">
|
|
<div className="card-header justify-content-between">
|
|
<div className="card-title">Aligning Toast Using Flexbox</div>
|
|
</div>
|
|
<div className="card-body">
|
|
<div className="bd-example bd-example-toasts d-flex p-2">
|
|
<div
|
|
aria-live="polite"
|
|
aria-atomic="true"
|
|
className="d-flex justify-content-center align-items-center w-100"
|
|
>
|
|
<div
|
|
className="toast fade show shadow-lg"
|
|
role="alert"
|
|
aria-live="assertive"
|
|
aria-atomic="true"
|
|
>
|
|
<div className="toast-header text-default">
|
|
<strong className="me-auto">Toast</strong>
|
|
<small>11 mins ago</small>
|
|
<button
|
|
type="button"
|
|
className="btn-close"
|
|
data-bs-dismiss="toast"
|
|
aria-label="Close"
|
|
/>
|
|
</div>
|
|
<div className="toast-body">
|
|
Hello, world! This is a toast message.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/* Aligning Toast Using Flexbox */}
|
|
</div>
|
|
</div>
|
|
{/* /Page Wrapper */}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Toasts
|