Tabs

Overview

Tabs allows the content author to organize page content within multiple tabs.

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

Import

CODE

import { Tabs } 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	Variant: None Orientation: None	The Component Default Style includes Variant and Orientation.
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.
General	Visibility: None Opacity: 100%	The component General includes Visibility, Opacity, and Background.
Advanced Style		The component Advanced Style includes Classname and Inline Style addition.

Code Sample:

CODE

<Tabs
          id="Tabs1"
          sx={{':hover': {'margin': '20px 15px 20px 20px','padding': '20px 15px 20px 20px',
               'width': '150px','height': '130px','position': 'absolute',
               'top': '15px','right': '20px','bottom': '25px','left': '20px',
               'visibility': 'hidden',
               'opacity': 0.76,
               'backgroundColor': '#ff0000ff',},}}
          orientation="horizontal"
          variant="fullWidth"
          value={150}>
        </Tabs>