Tabs
This component allows for the organisation and presentation of content or functionality into separate tabs or sections. It provides a way for users to switch between different tabs to access distinct sets of information or perform specific actions.
Here are some key aspects of a Tabs component:
- Tab Headers: Tabs are displayed as a row or vertical list of tab headers, representing the different sections or categories of content or functionality. Each tab header is clickable and serves as a navigation element to switch between tabs.
- Tab Content: Each tab corresponds to a specific section of content or functionality. When a user selects a tab, the associated content or functionality is displayed in the main content area of the UI, replacing the previously shown content.
- Active Tab: The active tab represents the currently selected tab. It is visually distinguished from the inactive tabs, by a different background color, to highlight the user's current context.
- Tab Interaction: Users can interact with the Tabs component by clicking on the tab headers to switch between tabs.
- Customisation and Configuration: Tabs components can be customised and configured to suit the specific design and functionality requirements of your application. This includes options to customize the appearance, behaviour, and order of the tabs, as well as the ability to add or remove tabs dynamically.
Properties
| Name | Type | Description |
|---|---|---|
| tabs | CometChatTabItem[] | Array of tab items that contains multiple objects representing individual tabs |
| tabAlignment | TabAlignment | Group of constants representing the alignment options |
| tabsStyle | TabsStyle | Styling properties and values of the component |