Snackbar

Overview

Snackbar is used to inform users of a process that a module has performed or will perform. Furthermore, Snackbars provide brief messages about module processes at the bottom of the screen.

Please refer to this for more information: https://mui.com/material-ui/react-snackbar/.

Import

CODE

import { Snackbar } from '@mui/material';

The above source will be imported automatically after dragging and dropping the Basic Component to the UI Preview Panel.

Property

Property:

Name	Default	Description
Id-name	Placeholder: <id-name>	The Id-name of the created component.
State	State: Normal	The State of the created Component.
Margin and Padding	Size Unit: Px	The component Margin and Padding with many selectable Size Units.
Size	Size Unit: Px	The component Size includes Width and Height with many selectable Size Units.
Layout	Position: None Size Unit: Px	The component Layout includes Position and Top - Right - Bottom - Left with many selectable Size Units.
Text	Text: None Font-family: None Size Unit: Px Font-weight: None Text align: Left	The component Text includes Text, Font-family, Font-size, Font-weight, Size Unit, Font-color, Text-align.
General	Open: False Visibility: None Opacity: 100%	The component General includes Open, Visibility, Opacity, and Background.
Advanced Style		The component Advanced Style includes Classname and Inline Style addition.

Code Sample:

CODE

<Snackbar
            id="Snackbar1"
            sx={{':active': {'margin': '15px 20px 20px 15px',
                'padding': '15px 20px 20px 15px',
                'width': '150px','height': '200px',
                'position': 'absolute',
                'top': '15px','right': '25px','bottom': '15px','left': '25px',
                'fontFamily': 'Noto-Sans','fontSize': '15px','fontWeight': 'lighter',
                'color': '#fa0000ff','textAlign': 'center',
                'visibility': 'visible',
                'opacity': 0.77,
                'backgroundColor': '#000000ff',},}}label="Text1"
                 open={true}>
</Snackbar>

Related Components