import React, { useState } from 'react'; import { Button, Card, Col, Container, Form, Row, Toast} from 'react-bootstrap'; import { ToastContainer, toast } from 'react-toastify'; import 'react-toastify/dist/ReactToastify.css'; // Import Content import UiContent from '../../../Components/Common/UiContent'; //import Components import BreadCrumb from '../../../Components/Common/BreadCrumb'; import PreviewCardHeader from '../../../Components/Common/PreviewCardHeader'; // Import Images import logosm from "../../../../images/logo-sm.png"; import { BootstrapToastsExample, ToastPlacementExample, BorderIconExample, ToastifyExample } from './UiNotificationsCode'; import { Head, Link } from '@inertiajs/react'; import Layout from '../../../Layouts'; const UiNotifications = () => { const [toast1, setToast1] = useState(true); const [toast2, setToast2] = useState(true); const [toast3, setToast3] = useState(true); const [toast4, setToast4] = useState(true); const [toast5, setToast5] = useState(true); const [toast6, setToast6] = useState(true); const [toast7, setToast7] = useState(false); const [toast8, setToast8] = useState(false); const [toast9, setToast9] = useState(false); const [toast10, setToast10] = useState(false); const [toast11, setToast11] = useState(true); const [position, setPosition] = useState(); const defaultnotify = () => toast("Welcome Back! This is a Toast Notification", { position: "top-right", hideProgressBar: true, className: 'bg-primary text-white' }); const successnotify = () => toast("Your application was successfully sent", { position: "top-center", hideProgressBar: true, closeOnClick: false, className: 'bg-success text-white' }); const warningnotify = () => toast("Warning ! Something went wrong try again", { position: "top-center", hideProgressBar: true, closeOnClick: false, className: 'bg-warning text-white' }); const errornotify = () => toast("Error ! An error occurred.", { position: "top-center", hideProgressBar: true, closeOnClick: false, className: 'bg-danger text-white' }); const topleftnotify = () => toast("Welcome Back ! This is a Toast Notification", { position: "top-left", hideProgressBar: true, className: 'bg-success text-white' }); const topcenternotify = () => toast("Welcome Back ! This is a Toast Notification", { position: "top-center", hideProgressBar: true, className: 'bg-success text-white' }); const toprightnotify = () => toast("Welcome Back ! This is a Toast Notification", { position: "top-right", hideProgressBar: true, className: 'bg-success text-white' }); const bottomleftnotify = () => toast("Welcome Back ! This is a Toast Notification", { position: "bottom-left", hideProgressBar: true, className: 'bg-success text-white' }); const bottomcenternotify = () => toast("Welcome Back ! This is a Toast Notification", { position: "bottom-center", hideProgressBar: true, className: 'bg-success text-white' }); const bottomrightnotify = () => toast("Welcome Back ! This is a Toast Notification", { position: "bottom-right", hideProgressBar: true, className: 'bg-success text-white' }); const offsetnotify = () => toast("Welcome Back ! This is a Toast Notification", { position: "top-right", hideProgressBar: true, className: 'bg-success text-white m-5' }); const closeiconnotify = () => toast("Welcome Back ! This is a Toast Notification", { position: "top-right", hideProgressBar: true, className: 'bg-success text-white' }); const durationnotify = () => toast("Toast Duration 5s", { position: "top-right", hideProgressBar: false, className: 'bg-success text-white' }); return (

Default Toast

setToast1(!toast1)}>

Velzon 06 mins ago Hello, world! This is a toast message.

Translucent

Toasts are slightly translucent, too, so they blend over whatever they might appear over.

setToast2(!toast2)}>

Velzon 11 mins ago Hello, world! This is a toast message.

Stacking

When you have multiple toasts, we default to vertically stacking them in a readable manner.

setToast3(!toast3)}>

Velzon Just now See? Just like this. setToast4(!toast4)}>

Velzon 2 seconds ago Heads up, toasts will stack automatically

Placement

Place toasts with custom CSS as you need them. The top right is often used for notifications, as is the top middle. If you’re only ever going to show one toast at a time, put the positioning styles right on the .toast.

setToast5(!toast5)}>

Velzon 06 mins ago Hello, world! This is a toast message.

You can also get fancy with flexbox utilities to align toasts horizontally and/or vertically.

setToast6(!toast6)}>

Velzon 11 mins ago Hello, world! This is a toast message.

Various example of toast placement.

setToast11(!toast11)}>

Velzon 11 mins ago Hello, world! This is a toast message.

Use toast-border- with below-mentioned color variation to set a toast with border and icon.

Your application was successfully sent.

Yey! Everything worked!

Something went wrong, try again.

Something is very wrong! See detailed report.

Display Position

Offset Position

Close icon Display

Duration

); }; UiNotifications.layout = (page:any) => export default UiNotifications;