Important Note
This is the documentation for gluestack-ui v2 (beta). For @gluestack-ui/themed (stable) documentation, refer to gluestack-ui v1.
Anatomy
The structure provided below can help you identify and understand a Tabs component's various parts.
export default () => (<Tabs><TabsList><TabsTrigger><TabsText /></TabsTrigger></TabsList><TabsContents><TabsContent /></TabsContents></Tabs>)
API Reference
The following section contains a comprehensive list of the component's references, including descriptions, properties, types, and default behavior. This information is readily available for you to access, helping you effectively utilize the component library in your projects.
Tabs
It inherits all the properties of React Native's View component.
Prop | Type | Default | Description |
---|---|---|---|
defaultValue | string | - | The value of the tab that should be active when initially rendered. Use when you do not need to control the state of the tabs. |
value | string | - | The controlled value of the tab to activate. Should be used in conjunction with onValueChange. |
onValueChange | function | - | Event handler called when the value changes |
orientation | "horizontal" | "vertical" | "horizontal" | The orientation of the tabs. |
TabsList
Contains the triggers that are aligned along the edge of the active content.
Prop | Type | Default | Description |
---|---|---|---|
loop | boolean | true | When true, keyboard navigation will loop from last tab to first, and vice versa. |
TabsTrigger
The button that activates its associated content. Must be wrapped with TabsList.
Prop | Type | Default | Description |
---|---|---|---|
value | string | - | A unique value that associates the trigger with a content. |
isDisabled | boolean | false | When true, prevents the user from interacting with the tab. |
TabsText
Must be wrapped with TabsTrigger. It inherits all the properties of React Native's Text component.
TabsContents
Wraps all the TabsContent components. It inherits all the properties of React Native's View component.
TabsContent
Contains the content associated with each trigger. It inherits all the properties of React Native's View component.
Prop | Type | Default | Description |
---|---|---|---|
value | string | - | A unique value that associates the content with a trigger. |
Accessibility
Adheres to the Tabs WAI-ARIA design pattern.
We have outlined the various features that ensure the Tabs component is accessible to all users, including those with disabilities. These features help ensure that your application is inclusive and meets accessibility standards.
- The element that serves as the container for the set of tabs has role tablist.
- Each element that serves as a tab has role tab and is contained within the element with role tablist.
- Each element that contains the content panel for a tab has role tabpanel.
- If the tab list has a visible label, the element with role tablist has aria-labelledby set to a value that refers to the labelling element. Otherwise, the tablist element has a label provided by aria-label.
- Each element with role tab has the property aria-controls referring to its associated tabpanel element.
- The active tab element has the state aria-selected set to true and all other tab elements have it set to false.
- Each element with role tabpanel has the property aria-labelledby referring to its associated tab element.
- If the tablist element is vertically oriented, it has the property aria-orientation set to vertical. The default value of aria-orientation for a tablist element is horizontal.
Keyboard Interactions
- Space or Enter - Activates the tab if it was not activated automatically on focus.
- Tab - When focus moves onto the tabs, focuses the active trigger. When a trigger is focused, moves focus to the active content.
- ArrowDown - Moves focus to the next trigger depending on orientation and activates its associated content.
- ArrowUp - Moves focus to the previous trigger depending on orientation and activates its associated content.
- ArrowRight - Moves focus to the next trigger depending on orientation and activates its associated content.
- ArrowLeft - Moves focus to the previous trigger depending on orientation and activates its associated content.
- Home - Moves focus to the first trigger and activates its associated content.
- End - Moves focus to the last trigger and activates its associated content.
Unstyled
We provide in-depth information on how to customize and extend the component's functionality to meet your needs. Below, we describe how to modify the component to suit your requirements.
Customizing the Tabs
We have a function called createTabs which can be used to create a custom tabs component. This function takes in a configuration object which contains the styled components that you want to use for the Tabs You can refer gluestack.io/style on how to use styled components.
You can read more on how to animate components here.
Usage
Default styling of all these components can be found in the components/core/tabs file. For reference, you can view the source code of the styled Tabs components.
// import the styled componentsimport {Root,List,Trigger,Content,Contents,Text,} from "components/core/tabs/styled-components"// import the createTabs functionimport { createTabs } from "@gluestack-ui/tabs"// Understanding the APIexport const Tabs = createTabs({Root,List,Trigger,Content,Contents,Text,})// Using the tabs componentexport default () => (<Tabs><TabsList><TabsTrigger value="tab1"><TabsText>Tab 1</TabsText></TabsTrigger><TabsTrigger value="tab2"><TabsText>Tab 2</TabsText></TabsTrigger><TabsTrigger value="tab3"><TabsText>Tab 2</TabsText></TabsTrigger></TabsList><TabsContents><TabsContent value="tab1"><Text>Content 1</Text></TabsContent><TabsContent value="tab2"><Text>Content 2</Text></TabsContent><TabsContent value="tab3"><Text>Content 3</Text></TabsContent></TabsContents></Tabs>)