Tabs are used to communicate a state that affects a system, feature or page.
NativeBase exports 5 modal-related components:
- Tabs: Provides context and state for all components
- Tabs.Bar: Wrapper for the
- Tabs.Tab: element that serves as a label for one of the tab view and can be activated to display that panel.
- Tabs.Views: Wrapper for the
- Tabs.View: element that contains the content associated with a tab
Tabs implements Box, so all the Box Props can be passed to it.
|align||The alignments of the tab.|
|colorScheme||string||The color of the radio when it's checked. This should be one of the color keys in the theme (e.g."green", "red").||-|
|defaultIndex||number||The index of the open tab.||-|
|index||number||If given, update the default open tab.||0|
|size||The size of the tab.|
|isFitted||boolean||The tabs will spread in the TabBar.||-|
|onChange||function||The callback invoked when tab is changed.||-|
|variant||The variant of the tabs style to use.|
Tabs.View all implement
Box, all the props of Box can be passed to it.
ArrowRightMoves focus to the next tab
ArrowLeftMoves focus to the previous tab
TabWhen focus moves into the tab list, places focus on the active tab element
HomeMoves focus to the first tab
EndMoves focus to the last tab
- Tab has role set to
aria-selectedis set to true when a tab is selected and all other Tabs have it set to false
aria-controlsis set to the tabpanel's id
- Tablist has
- TabPanel has
aria-labelledbyis set to the id of the Tab that labels the TabPanel