Links

Tabs

The Tabs is also available as an Experience Cloud Component.

📘 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.
Horizontal vs Vertical Tabs

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.

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 colors
  • Border: to customize border styling.
  • Item: to customize the item styling
  • Label: to customize the label styling.
  • Subtitle: to customize the subtitle styling.
  • Overflow Buttons: to customize the overflow buttons styling.

🎛️ Specification

🎚️ Attributes
Events
🎨 Styling Hooks
Name
Type
Description
Active Tab Value
String
The value of the tab to open by default.
Scrollable
Boolean
If present, allows scroll to reveal the hidden items instead of showing an overflow button menu.
Scoped
Boolean
Changes the appearance of the tabs giving them a closed container with a defined border
Orientation
Boolean
Choose an orientation of the tabs
Label
Boolean
The text displayed in the tab
Value
String
The unique value for the tab (useful to use the tabs properly)
Tooltip
Integer
Displays tooltip text when the mouse moves over the element.
Subtitle
Integer
The subtitle can include text, and is displayed under the label.
Left Icon Name
Integer
To add an icon on the left of the label
Right Icon Name
Boolean
To add an icon on the right of the label
Top Icon Name
Boolean
To add an icon on the top of the label
Name
Description
active tab
The event that is fired when a tab is selected.

Size

Name
Description
Width
Set a width to the Tabs component
Height
Set a height to the Tabs component
Min Width
Set a min width to the Tabs component
Max Width
Set a max width to the Tabs component
Min Height
Set a min height to the Tabs component
Max Height
Set a max height to the Tabs component

Background

Name
Description
Color
Define a background color for your tabs
Color Active
Define a background color for the active tab

Border

Name
Description
Size
Define a border size
Size Active/Hover
Define a border size for the active tab
Color
Define a border color
Color Active
Define a border color for the active tab
Color Hover
Define a hover border color

Label

Name
Description
Vertical Alignment
Customize the label text color
Width
Set a width for items
Max Width
Set a max width for items
Height
Set a height for items
Line Height
Set a line height for items
Spacing Left
To add space to the left of the item label
Spacing Right
To add space to the right of the item label

Item

Name
Description
Color
Define a label color
Color Active
Define a label color when active
Font Size
Define a label font size
Font Size Active
Define a label font size when active
Font Family
Define a label font family
Font Family Active
Define a label font family when active
Font Weight
Define a label font weight
Font Weight Active
Define a label font weight when active
Text Shadow
Define a text shadow
Text Shadow Active
Define a text shadow when active

Subtitle

Name
Description
Color
Define a subtitle color
Color Active
Define a subtitle color when tab is active
Font Size
Define a subtitle font size subtitle
Font Size Active
Define a subtitle font size when tab is active
Font Family
Define a subtitle font family
Font Family Active
Define a subtitle font family when tab is active
Font Weight
Define a subtitle font weight
Font Weight Active
Define a subtitle font weight when tab is active
Text Shadow
Define a text shadow
Text Shadow Active
Define a text shadow when tab is active

Overflow Buttons

Name
Description
Overflow Button Text Color
Define a text color for the overflow button
Scroll Button Start Background
Scroll Button End Background
Last modified 3mo ago