Tabs
Overview
To understand the Tabs
component better, please refer to the MUI Tabs Documentation.
Tabs component is modified to make it more attractive and easier to use.
This documentation covers only the additional properties we've introduced. You're welcome to utilize all the standard props available in MUI's Tabs component as well.
Tabs pills
You can use the pill='true'
prop to get the pills style. Here is an example of how to use the pills:
// MUI Imports
import Tab from '@mui/material/Tab'
import TabContext from '@mui/lab/TabContext'
import Typography from '@mui/material/Typography'
// Component Imports
import CustomTabList from '@core/components/mui/TabList'
<TabContext value={value}>
<CustomTabList pill='true' onChange={handleChange} aria-label='customized tabs example'>
<Tab value='1' label='Tab 1' />
<Tab value='2' label='Tab 2' />
<Tab value='3' label='Tab 3' />
</CustomTabList>
<TabPanel value='1'>
<Typography>
...
</Typography>
</TabPanel>
<TabPanel value='2'>
<Typography>
...
</Typography>
</TabPanel>
<TabPanel value='3'>
<Typography>
...
</Typography>
</TabPanel>
</TabContext>
Props
Prop | Type | Default | Required | Description |
---|---|---|---|---|
color | 'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'info' | 'primary' | No | Color theme for badge (works only when pill='true' ) |
pill | 'true' | 'false' | 'false' | No | Set to 'true' to enable the pills style |
Styled Component
In our implementation, we've gone a step beyond the standard Tabs
component by incorporating it into a styled component. This approach allows us to add custom styles, enhancing the visual appeal and user experience of the tabs.
Our modifications ensure that the Tabs
not only functions optimally but also aligns aesthetically with the overall design of our application.