ContainerTabbed
This component organizes content into tabbed sections, allowing users to navigate between different views within the same context.
Each tab can contain distinct content, making it a space-efficient way to present related information. It's widely used in user interfaces where categorization and ease of access are important, such as in settings, dashboards, or product details.
Examples
Various examples showcasing different configurations of the component
Examples
Property
Value
Elevation
1
Tabs
[{"title":"Tab 1","viewId":"tab1"},{"title":"Tab 2","viewId":"tab2"},{"title":"Tab 3","viewId":"tab3"}]
Alignment
Property
Value
Elevation
1
Size
SMALL
Alignment
END
Tabs
[{"title":"Tab 1","viewId":"tab1","suffixIcon":"Search"},{"title":"Tab 2","viewId":"tab2","suffixIcon":"Home"},{"title":"Tab 3","viewId":"tab3","suffixIcon":"AccountCircle"}]
Sizes
Property
Value
Elevation
1
Size
LARGE
Tabs
[{"title":"Tab 1","viewId":"tab1","suffixIcon":"Search"},{"title":"Tab 2","viewId":"tab2","suffixIcon":"Home"},{"title":"Tab 3","viewId":"tab3","suffixIcon":"AccountCircle"}]
Icons
Property
Value
Elevation
1
Tabs
[{"title":"Tab 1","viewId":"tab1","prefixIcon":"Search"},{"title":"Tab 2","viewId":"tab2","prefixIcon":"Home"},{"title":"Tab 3","viewId":"tab3","prefixIcon":"AccountCircle"}]
Vertical Alignment
Property
Value
Elevation
1
Size
SMALL
Mode
VERTICAL
Alignment
END
Tabs
[{"title":"Tab 1","viewId":"tab1","suffixIcon":"Search"},{"title":"Tab 2","viewId":"tab2","suffixIcon":"Home"},{"title":"Tab 3","viewId":"tab3","suffixIcon":"AccountCircle"}]
Properties
Each component can be customized and configured based on product requirements. You can modify the component on Canonic by clicking on the component and opening the configuration panel.
Property
Description
Default Value
Type
Elevation
The elevation level of the container.
1
String
BG Color
The background color of the container.
#FFFFFF
Color
Size
The size of the tabs.
Medium
String
Alignment
How the tabs are aligned inside the container.
Start
String
Mode
The layout mode of the tabs.
Horizontal
String
Default tab
The default tab to show.
DEFAULT
String
Tabs
The tabs to display in the container.
List
Triggers
Components expose certain events such as clicking. You can use these events to perform actions such as navigation, fetching data and controlling other components. The events exposed by this component are listed below.
Property
Description
On click
Triggered when the card is clicked.
On double click
Triggered when the card is double clicked.