ToggleButtonGroup
Overview
ToggleButtonGroup controls the selected state of its child buttons when given its own valuable property. Furthermore, ToggleButton would be able to be included in ToggleButtonGroup.
Please refer to this for more information: https://mui.com/material-ui/api/toggle-button-group/.
Import
import { ToggleButtonGroup } 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: None | The Default Style of the created component includes Color. |
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 | Type: None Size Unit: Px Full-width: False | The component Size of Width and Height with many selectable Size Units, and Type, Full-width. |
Layout | Position: None | The component Layout includes Position and Top - Right - Bottom - Left with many selectable Size Units. |
General | Visibility: None Disabled: false Orientation: None Opacity: 100% | The component General includes Visibility, Disabled, Orientation, Value, Opacity, and Background. |
Advanced Style | The component Advanced Style includes Classname and Inline Style addition. |
Code Sample:
<ToggleButtonGroup
color="primary"
sx={{':active': {'margin': '20px 15px 20px 20px','padding': '20px 20px 15px',
'width': '150px','height': '100px',
'position': 'relative','top': '15px','right': '15px','bottom': '30px','left': '30px',
'visibility': 'hidden',
'opacity': 0.53,
'backgroundColor': '#000000ff',},}}
size="medium"
fullWidth={true}
disabled={true}
orientation="horizontal"
value={15}>
</ToggleButtonGroup>
Related Component