Tabs

Tabs make it easy to explore and switch between different views.

Basic Tabs

To show this type of Cards you will need this code in down here.

    
 <AppBar className="bg-primary" position="static">
    <Tabs value={value} onChange={this.handleChange} scrollable scrollButtons="on">
        <Tab className="tab" label="Item One" />
        <Tab className="tab" label="Item Two" />
        <Tab className="tab" label="Item Three" />
    </Tabs>
</AppBar>
    {value === 0 &&
    <TabContainer>
        {'Item One'}
    </TabContainer>}
    {value === 1 &&
    <TabContainer>
        {'Item Two'}
    </TabContainer>}
    {value === 2 &&
    <TabContainer>
        {'Item Three'}
    </TabContainer>}

Icon Tabs

     
 <Tabs
     value={this.state.value}
     onChange={this.handleChange}
     fullWidth
     indicatorColor="secondary"
     textColor="secondary"
     scrollable
     scrollButtons="on" >
    <Tab icon={<PhoneIcon />} label="RECENTS" />
    <Tab icon={<FavoriteIcon />} label="FAVORITES" />
    <Tab icon={<PersonPinIcon />} label="NEARBY" />
</Tabs>

Available parameters, type and descriptions are down below.

Name	Type	Default	Description
action	func		Callback fired when the component mounts. This is useful when you want to trigger an action programmatically. It currently only supports `updateIndicator()` action. Signature: `function(actions: object) => void` actions: This object contains all possible actions that can be triggered programmatically.
centered	bool	false	If `true`, the tabs will be centered. This property is intended for large views.
children	node		The content of the component.
classes	object		Useful to extend the style applied to components.
fullWidth	bool	false	If `true`, the tabs will grow to use all the available space. This property is intended for small views, like on mobile.
indicatorColor	enum: 'secondary' \| 'primary'	'secondary'	Determines the color of the indicator.
onChange	func		Callback fired when the value changes. Signature: `function(event: object, value: number) => void` event: The event source of the callback value: We default to the index of the child
scrollable	bool	false	True invokes scrolling properties and allow for horizontally scrolling (or swiping) the tab bar.
ScrollButtonComponent	union: string \| func	TabScrollButton	The component used to render the scroll buttons.
scrollButtons	enum: 'auto' \| 'on' \| 'off'	'auto'	Determine behavior of scroll buttons when tabs are set to scroll `auto` will only present them on medium and larger viewports `on` will always present them `off` will never present them
TabIndicatorProps	object		Properties applied to the `TabIndicator` element.
textColor	enum: 'secondary' \| 'primary' \| 'inherit'	'inherit'	Determines the color of the `Tab`.
value	any		The value of the currently selected `Tab`. If you don't want any selected `Tab`, you can set this property to `false`.