Tabs
📘 Overview
The Avonni Tabs Component helps you organize and display information on a single page. It allows you to separate information into different tabs, making it easier for users to find what they want. The component is fully customizable, so you can change the tab orientation, make it scrollable, and choose from various styling options.
Here are some of the key features of the Avonni Tabs Component:
Organizes and displays information on a single page
Separates information into different tabs
It makes it easier for users to find what they are looking for
Fully customizable
🎚️ Changing the properties
Active Tab Value
The active tab value is a property of a tabbed user interface that indicates which tab is currently being displayed.
Make your tabs scrollable
Scrollable tabs allow users to swipe left or right to view additional tabs when too many tabs fit on the screen. Alternatively, buttons can be displayed to scroll through hidden tabs. Buttons indicate the number of available tabs and make it easier for users to navigate them. However, scrollable tabs without buttons can be more visually appealing and give users more control over their navigation experience.
Here are the options for displaying tabs:
Scrollable: Users can swipe left or right to view additional tabs.
Show Scroll buttons: Buttons are displayed to scroll through hidden tabs.
Which option you choose depends on your design goals and the needs of your users. If you want to make your tabs more visually appealing and give users more control over their navigation experience, you may want to choose scrollable tabs without buttons. If you make it easier for users to see the number of tabs available, you may want to select buttons.
Ultimately, the best option for you will depend on your specific situation.
Changing the orientation
Tabs can be set horizontally or vertically, with horizontal tabs being best for users who expect them at the top/bottom of the screen and vertical tabs useful for displaying many tabs simultaneously. The choice depends on factors like screen space and UI design preferences.
Interactions
Interactions define what will happen when users interact with the tab component. Here are the available interactions for the List component:
On
Active Tab
: The event is fired when a tab is active.
Explore available interactions.
How to use Avonni Tabs?
🎨 Styling
From the Styles panel, you can customize styling attributes for the Slider component:
Size
: to customize the width and height.Background
: to customize background colorsBorder
: to customize border styling.Item
: to customize the item stylingLabel
: to customize the label styling.Subtitle
: to customize the subtitle styling.Overflow Buttons
: to customize the overflow buttons styling.
🎛️ Specification
Name | Type | Description |
---|---|---|
| String | The value of the tab to open by default. |
| Boolean | If present, allows scroll to reveal the hidden items instead of showing an overflow button menu. |
| Boolean | Changes the appearance of the tabs giving them a closed container with a defined border |
| Boolean | Choose an orientation of the tabs |
| Boolean | The text displayed in the tab |
| String | The unique value for the tab (useful to use the tabs properly) |
| Integer | Displays tooltip text when the mouse moves over the element. |
| Integer | The subtitle can include text, and is displayed under the label. |
| Integer | To add an icon on the left of the label |
| Boolean | To add an icon on the right of the label |
| Boolean | To add an icon on the top of the label |
Last updated