Tabs
Compatibility
🌏 Web
🖥 Electron
📱 React Native
✔️
✖
✖
Screenshots
🌏 Web
🖥 Electron
📱 React Native
TBD
TBD
Tabs Props
Name
Type
Default
Description
action
func
Callback fired when the component mounts.
children
ReactNode
Children of component.
classes
object
Override or extend the styles applied to the component.
component
string , func, object
The component used for the root node. Either a string to use a DOM element or component.
value
any
The value of the currently selected Tab.
classes
object
Override or extend the styles applied to the component.
textColor
'secondary', 'primary', 'inherit'
Determines the color of the Tab.
TabIndicatorProps
object
Properties applied to the TabIndicator element.
scrollButtons
'auto', 'on', 'off'
Determine behavior of scroll buttons when tabs are set to scroll.
ScrollButtonComponent
string, func, object
TabScrollButton The component used to render the scroll buttons.
scrollable
bool
True invokes scrolling properties and allow for horizontally scrolling (or swiping) the tab bar.
Signature
function(event: object, value: number) => void
Override or extend the styles applied to the component.
onChange
func
Callback fired when the value changes.
indicatorColor
'secondary', 'primary', 'secondary'
Determines the color of the indicator.
fullWidth
bool
If true, the tabs will grow to use all the available space.
centered
bool
If true, the tabs will be centered. This property is intended for large views.
Tab Props
Name
Type
Default
Description
children
ReactNode
The content of the component.
classes
object
Override or extend the styles applied to the component.
component
string, func, object
The component used for the root node. Either a string to use a DOM element or a component.
disabled
bool
false
If true, the tab will be disabled.
icon
ReactNode
The icon element.
label
ReactNode
The label element.
value
any
You can provide your own value.
How to use
import * as React from 'react';
import BR from '@blueeast/bluerain-os';
const Tabs = BR.Components.get('Tabs');
const Tab = BR.Components.get('Tab');
handleChange = (event: any ) => {
value =event.target.value;
};
const SampleTabs = () => {
return(
<Tabs
value={value}
onChange={handleChange}
scrollable
scrollButtons="on"
indicatorColor="primary"
textColor="primary"
>
<Tab label="Item One" />
<Tab label="Item Two" />
<Tab label="Item Three"/>
<Tab label="Item Four" />
<Tab label="Item Five" />
<Tab label="Item Six" />
<Tab label="Item Seve" />
</Tabs>
);
}
Last updated