Overview
Vertical Tabs are a design option that arranges tabs in a vertical layout, typically on the left side of the canva. This layout allows users to switch between different sections or components vertically, rather than using the traditional horizontal tab format.
...
Basic Attribute Name | Description |
|---|
Component Size | This allows users to modify the size of a specific component according to the grid size of layout. This feature allows for flexible customization, enabling users to resize components to fit their specific needs within the defined grid structure.
| Panel |
|---|
| panelIconId | 1f5e8 |
|---|
| panelIcon | :speech_left: |
|---|
| panelIconText | 🗨️ |
|---|
| bgColor | #F4F5F7 |
|---|
| For example,
If the layout grid size is 3 then layout is divided into 3 sections then you can changes the components size between 1 to 3. |
|
Layout Type | It is used to set the layout type in two ways as: Grid: The Grid Layout Type provides a grid-based layout system consisting of rows and columns. This layout simplifies the process of designing and structuring a layout, allowing for precise placement and alignment of components within the gridtype divides a component into a specified number of columns. The grid size determines the number of available columns. Flow: The Flow Layout Type is used for positioning and formatting components within a layout. This layout type allows components to be positioned in relation to each other.
Note: By default, this attribute is set to a value of Grid Layout Type. |
Default Tab | If you have multiple tabs, select the number to set the default tab. |
Overflow Limit | This feature lets you control the number of tab to show. | Panel |
|---|
| panelIconId | 1f5e8 |
|---|
| panelIcon | :speech_left: |
|---|
| panelIconText | 🗨️ |
|---|
| bgColor | #F4F5F7 |
|---|
| For example,
Setting the limit to 1 will show only one tab, with other appearing in a dropdown menu. |
|
Show tabs on right checkbox | If this checkbox is selected, the tab location will change from the left side to the right side. |
Base UI:
...
| Include Page |
|---|
| UI Attributes |
|---|
| UI Attributes |
|---|
|
UI State:
...
Attribute Group | Attribute Name | Description |
|---|
Visibility | Visibility Type | It determines whether a component is visible on the layout. It offers the following visibility types: Always: The component will always be visible. Conditional: The component's visibility is determined based on specific criteria, which can make it either visible or hidden as needed.
You can explore more about Visibility here
|
Component | Component Label | It simply shows the name of the component. |
| Include Page |
|---|
| Visibility and Disability |
|---|
| Visibility and Disability |
|---|
|
Events