The TabBar component provides a tab-based navigation system for switching between multiple views or content sections within an application. Each tab can contain its own content, icon, and behavior, making it suitable for organizing forms, dashboards, or grouped data.
1. Basic Properties
- Name: Unique identifier for the component (e.g.,
TabBar1). - Tab panels: Define the individual tabs (e.g.,
Tab panels 1,Tab panels 2). - Default selected value: The tab that is selected when the component is first rendered.
States
- Disabled: Disables interaction with the TabBar.
- Hidden: Hides the TabBar from the UI while keeping it available in logic.
- Centered: Aligns tabs in the center of the container.
- Disable indicator tab: Hides the tab selection indicator.
2. Layout
Controls grid placement and spacing across responsive designs.
📘 See Common Properties → Layout.
3. Events
- onChange: Triggered when a tab is selected or changed.
4. Orientation
- Horizontal: Default layout for displaying tabs side by side.
- Vertical: Stacks tabs vertically (useful for side navigation).
5. Variant
- fullWidth: Tabs expand to fill the entire width.
- scrollable: Allows horizontal scrolling when there are many tabs.
- standard: Default tab layout with fixed width.
6. Colors
- Indicator color: Sets the color of the active tab indicator (
primary,secondary). - Text color: Controls the color of tab labels (
primary,secondary,inherit).
7. Borders & Effects
- Show tabs border left / top / right / bottom: Toggle border visibility around tabs.
- Show tabs box shadow: Adds a shadow effect under the tabs for emphasis.
8. Tab Panel Properties
Each tab panel has its own configuration:
- Label: The displayed text of the tab (e.g.,
Tab panels 1). - Value: The internal identifier used when referencing the tab (e.g.,
tabpanel1). - Disabled: Makes the tab inactive.
- Wrapped: Allows long tab labels to wrap into multiple lines.
- Icon: Assigns an icon to the tab.
- Icon position: Places the icon relative to the label (
top,start,end,bottom). - Disable focus ripple: Removes the ripple effect on focus.
- Disable ripple: Removes the ripple effect on click.
9. Style
Custom styles can be applied for further visual adjustments.
📘 See Common Properties → Style.
✅ The TabBar component is ideal for creating clean, structured navigation between related sections of content, supporting both horizontal and vertical layouts with rich customization options.