Appearance
Tabs Component
A flexible tabs component for organizing content into selectable sections.
Overview
The Tabs component provides:
- A horizontal tab navigation system
- Support for both single and multiple tab selection
- Customizable tab content through slots
- Internationalization support for tab labels
- Icon support for visual tab indicators
- Animated bottom line indicator
- Single packed container style
- Prepend and append icon slots
When to Use
Use the Tabs component when you need to:
- Organize content into distinct, selectable sections
- Create a navigation system for different views or panels
- Allow users to switch between different content areas
- Implement a tabbed interface for forms, settings, or content organization
- Create a segmented control for option groups
- Build a navigation bar with animated indicators
Key Features
- Single or Multiple Selection: Choose between single tab selection or multiple tab selection mode
- Internationalization Support: Built-in support for i18n string translation
- Icon Support: Use icons before, after, or instead of text labels
- Customizable: Use slots to completely customize tab appearance
- Reactive: Fully reactive to changes in selected tabs or tab items
- Bottom Line Style: Animated bottom line indicator for navigation tabs
- Single Packed Style: Shared border container for option groups
- Dark Gold Theme: Built-in dark gold color scheme option