> For the complete documentation index, see [llms.txt](https://blueeast.gitbook.io/bluerain-plugin-material-ui/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://blueeast.gitbook.io/bluerain-plugin-material-ui/src/components/tabs.md).

# Tabs

## Compatibility

| 🌏 Web | 🖥 Electron | 📱 React Native |
| :----: | :---------: | :-------------: |
|   ✔️   |      ✖      |        ✖        |

## Screenshots

|                   🌏 Web                  | 🖥 Electron | 📱 React Native |
| :---------------------------------------: | :---------: | :-------------: |
| ![web image](/files/-LTbI-EBn76nKyLFhPvC) |     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

```javascript
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>
  );
}
```


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://blueeast.gitbook.io/bluerain-plugin-material-ui/src/components/tabs.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.