Tab
Overview
Tab is used to render and display subsections to users. Tab is a graphical user interface object that allows multiple documents or panels to be contained within a single window, using tabs as a navigational widget for switching between sets of documents.
Please refer to this for more information: https://mui.com/material-ui/api/tab/.
Import
import { Tab } 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 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. |
Label | Text: New Tab 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. |
Value | The component Value Includes Value. | |
General | Visibility: None Disabled: False Opacity: 100% | The component General includes Disabled, Visibility, Opacity, and Background. |
Advanced Style | The component Advanced Style includes Classname and Inline Style addition. |
Code Sample:
<Tab label="New Tab"
sx={{':active': {'margin': '15px','padding': '15px',
'width': '150px','height': '200px',
'position': 'relative','top': '15px','right': '20px','bottom': '20px','left': '15px',
'fontFamily': 'Noto-Sans',
'fontSize': '15px',
'fontWeight': 'lighter',
'color': '#d10000ff',
'visibility': 'visible',
'opacity': 0.62,
'backgroundColor': '#000000ff',},}}
value={150}
disabled={true}/>