Switch

Overview

Switch allows the user to toggle the state of a single setting on or off.

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

Import

CODE

import { Switch } 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.
Default Style	Color: Primary	The Default Style of the created component includes Color.
State	State: Normal	The State of the created Component.
Margin	Size Unit: Px	The component Margin with many selectable Size Units.
Size	Size Unit: Px	The component Size of 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.
General	Visibility: None Disabled: False Checked: False Opacity: 100%	The component General includes Disabled, Visibility, Checked, Opacity, and Background.
Advanced Style		The component Advanced Style includes Classname and Inline Style addition.

Code Sample:

CODE

<Switch
              id="Switch"
          sx={{'backgroundColor': '#060000ff',':hover': {'marginTop': '15px','marginRight': '15px','marginLeft': '15px',
              'position': 'absolute','top': '15px','right': '15px','bottom': '20px','left': '20px',
              'visibility': 'visible',
              'opacity': 0.51,
              'backgroundColor': '#f81111ff',},}}
               checked={true}
               color="secondary">
</Switch>