Tabs

Overview
The Avonni Tabs Flow Screen 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 Flow Screen 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
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
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
Events
No events are available
Styling Hooks
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
Item
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
Label
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
​

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
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

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

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

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

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

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

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