tabs

v4.9.10

v4.5.2

v3.9.2

STATUS

Passing

DOWNLOADS

30,003

LICENSE

MIT

VISIBILITY

Public

PUBLISHED

4 years ago

SIZE

36 KB

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

2 contributors

Install tabs as a package?

Copied

npm i @bit/mui-org.material-ui.tabs

Set Bit as a scoped registryLearn more

npm config set '@bit:registry' https://node.bit.cloud

Component Example

React

Vue

Angular

React Native

Add dependency...

Just

import

any of the 1 million components

and packages in Bit or NPM to the example.

import Button from '@bit/grommet.grommet.button';
import Lodash from 'lodash';

modifieddraft

Demos:

Tabs

API:

Tabs API

Properties

Name	Type	Description
onChange (required)	`function`
classes (required)	`object`	Override or extend the styles applied to the component. See CSS API below for more details.
className	`string`
color (required)	`'primary' \| 'secondary'`	The color of the tab indicator.
orientation (required)	`'horizontal' \| 'vertical'`	The tabs orientation (layout flow direction).
classes (required)	`object`	Override or extend the styles applied to the component. See CSS API below for more details.
className	`string`
direction (required)	`'left' \| 'right'`	Which direction should the button indicate?
orientation (required)	`'horizontal' \| 'vertical'`	The tabs orientation (layout flow direction).
visible (required)	`bool`	Should the button be present or just consume space.
action	`custom`	This object contains all possible actions that can be triggered programmatically.
centered	`bool`	If `true`, the tabs will be centered. This property is intended for large views.
children	`node`	The content of the component.
classes (required)	`object`	Override or extend the styles applied to the component. See CSS API below for more details.
className	`string`
component	`elementType`	The component used for the root node. Either a string to use a DOM element or a component.
indicatorColor	`'secondary' \| 'primary'`	Determines the color of the indicator.
onChange	`function`	The event source of the callback
orientation	`'horizontal' \| 'vertical'`	The tabs orientation (layout flow direction).
ScrollButtonComponent	`elementType`	The component used to render the scroll buttons.
scrollButtons	`'auto' \| 'desktop' \| 'on' \| 'off'`	Determine behavior of scroll buttons when tabs are set to scroll: `auto` will only present them when not all the items are visible. `desktop` will only present them on medium and larger viewports. `on` will always present them. `off` will never present them.
TabIndicatorProps	`object`	Props applied to the tab indicator element.
textColor	`'secondary' \| 'primary' \| '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`.
variant	`'standard' \| 'scrollable' \| 'fullWidth'`	Determines additional display behavior of the tabs: `scrollable` will invoke scrolling properties and allow for horizontally scrolling (or swiping) of the tab bar. -`fullWidth` will make the tabs grow to use all the available space, which should be used for small views, like on mobile. `standard` will render the default state.