Tabs
Tabs are an interactive component that organizes content into separate panes without leaving the current page. Each tab acts as a navigational item, allowing users to switch between different sections of content efficiently.
Tabs are ideal for compartmentalizing related information in a user-friendly manner, making them perfect for settings, multi-category displays, and reducing clutter in the user interface.
Examples
Various examples showcasing different configurations of the component
Examples
Property
Value
Options
[{"key":1,"label":"Tab 1"},{"key":2,"label":"Tab 2"},{"key":3,"label":"Tab 3"}]
Alignment
Property
Value
Options
[{"key":1,"label":"Tab 1"},{"key":2,"label":"Tab 2"},{"key":3,"label":"Tab 3"}]
Alignment
START
Sizes
Property
Value
Options
[{"key":1,"label":"Tab 1"},{"key":2,"label":"Tab 2"},{"key":3,"label":"Tab 3"}]
Size
LARGE
Icons
Property
Value
Options
[{"key":1,"label":"Tab 1","prefixIcon":"Search"},{"key":2,"label":"Tab 2","prefixIcon":"Home"},{"key":3,"label":"Tab 3","prefixIcon":"Settings"}]
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
Default Tab
The key for the default tab that should be selected.
String
Options
The options available for selection.
Array
Mode
The layout mode of the tabs.
Horizontal
String
Alignment
How the tabs are aligned inside the container.
Start
String
Size
The size of the tabs.
Medium
String
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 change
Handler called when the tab changes.