Start sharing components as a team!Share components as a team!Join Bit to build your applications faster.Get Started Free

tab

v0.86.0arrow_drop_down
v0.86.0
v0.85.0
v0.84.0
STATUS
Passing
DOWNLOADS
1,587
LICENSE
MIT
VISIBILITY
Public
PUBLISHED
9 months ago
SIZE
76 KB
Called on tab change.
1 contributor
Use tab in your project ?
Copied
npm i @bit/semantic-org.semantic-ui-react.tab
Set Bit as a scoped registryLearn more
npm config set '@bit:registry' https://node.bit.dev
Component Example
React
React
Vue
Angular
React Native
Add dependency... help_outline
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';
toggle layout
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
chevron_left
chevron_right

Called on tab change.

Array of objects describing each Menu.Item and Tab.Pane: { menuItem: 'Home’, render: () => <Tab.Pane>Welcome!</Tab.Pane>, } or { menuItem: 'Home’, pane: 'Welcome’, }

Tab ()

A Tab is a hidden section of content activated by a Menu.

TabPane ()

A tab pane holds the content of a tab.

Properties
NameTypeDefault valueDescription
as
custom

An element type to render as (string or function).

defaultActiveIndex
number | string

The initial activeIndex.

activeIndex
number | string

Index of the currently active tab.

menu
object{ attached: true, tabular: true }

Shorthand props for the Menu. tabular, if true, will derive final value from menuPosition, otherwise set ‘left’ or ‘right’ explicitly.

menuPosition
'left' | 'right'

Align vertical menu

grid
object{ paneWidth: 12, tabWidth: 4 }

Shorthand props for the Grid.

onTabChange
function

React’s original SyntheticEvent.

panes
{"menuItem":"custom","pane":"custom","render":"function"}[]

Array of objects describing each Menu.Item and Tab.Pane: { menuItem: 'Home’, render: () => <Tab.Pane /> } or { menuItem: 'Home’, pane: ‘Welcome’ }

renderActiveOnly
booltrue

A Tab can render only active pane.

as
customSegment

An element type to render as (string or function).

active
booltrue

A tab pane can be active.

children
node

Primary content.

className
string

Additional classes.

content
custom

Shorthand for primary content.

loading
bool

A Tab.Pane can display a loading indicator.