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
The active tab value is a property of a tabbed user interface that indicates which tab is currently being displayed.
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.
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
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.
No events are available