Tabs Component | Canonic

Introduction

The tabs component is usually paired with another component to switch between various property values.

Configuration Options

`Options`

The options determine which tabs are shown by this component. The options can either be pre-defined (static) or can dynamically come from a data point.

Static Options

When you know which options to use, you can predefine them under this section.

To add an option (tab) click on the + Option button to add a new option.

Each option has

Label Expected type: String The text to show in the tabs component
Value Expected type: String A unique identifier for use in other components such as to dynamically change this components currently selected tab.

Dynamic Options

Dynamic options can be used to render the tabs component dynamically based on some external data.

To add dynamic options, switch over to the dynamic tab under the options configuration. You can then configure it:

Datasource Expected type: Array | List A list of items for the where each item represents a tab. This can be fetched dynamically through workflows or other components.
Label Expected type: String The key from the above datasource to use for the label. Each item in the datasource must have this key set.
Value Expected type: String The key from the above datasource to use for the value. Each item in the datasource must have this key set.

Triggers

Tab Right Click: Triggers whenever a tab is right-clicked.
Change: Triggers whenever the active tab changes.

Theme Options

Text Align: The tab's text alignment. (Number | Pixels)
Text Color: The tab's text color. (String | Hex)
Background Color: The tab's background color. (String | Hex)
Tab Active Color: The tab's background color. (String | Hex)
Tab Inactive Color: The tab's color when not selected. (String | Hex)
Tab Underline Color: The color for the underline under the active tab. (String | Hex)
Text Style: The tab's text style. (Bold | Italic | Underline)
Text Size: The tab's text size. (Number | Pixels)
Padding: The tab's padding. (Number | Pixels)
Shadow: The tab's shadow. (Shadow)
Border: The tab's border. You can also specify the radius for the edges. (Border)
Background Color: The tab's background color. (String | Hex)