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

CODE

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:

CODE

 <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}/>