UIKit tab components
Tab components are used for adding tabbed content to a layout. There are three tab components included with the UIKit, each of which is documented below.
Tabs container - horizontal tabs component
The Tabs container - horizontal tabs provide the container for each Tab item to be displayed in a row above the content. Important information to understand about the component is listed below.
Layout canvas elements
- Container - The container must optionally add a margin below the tabbed content or add a background color to the tabbed content.
- Accordion tabs container - The Accordion tabs container provides the tabs' functionality and the style for the tabs navigation.
The style for the tabs navigation would normally be applied to each Tab item. For the UIKit, the style has been applied to the Accordion tabs container to make it more convenient for content authors to apply the style in one place. This has been achieved using Custom styles that target the tab navigation elements. These styles within the Generic custom style category and are: Accordion tabs keyline light text, Accordion tabs keyline dark text, and Accordion tabs solid.
Component form fields
- Tab position - Select the desired tab alignment.
- Navigation style - Sets the style of the tab navigation links.
- Background color - Sets a background color on the tab container.
- Add space below - Adds a space (margin) below the tab container. This is required if a space is desirable when adding this component above another component within the same parent layout component.
Tabs container - vertical tabs component
The Tabs container - vertical tabs provides the container for each Tab item to be displayed vertically to the left of the content. Important information to understand about the component is listed below.
Layout canvas elements
- Container - The container is required to optionally add a margin below the tabbed content or to add a background color to the tabbed content.
- Accordion tabs container - The Accordion tabs container provides the tabs' functionality and the style for the tabs navigation.
Within the Accordion container Styles tab there is a Modifier that applies additional space between the Tabs and the Tab content.
The style for the tabs navigation would normally be applied to each Tab item. For the UIKit, the style has been applied to the Accordion tabs container to make it more convenient for content authors to apply the style in one place. This has been achieved using Custom styles that target the tab navigation elements. These styles within the Generic custom style category and are: Accordion tabs keyline light text, Accordion tabs keyline dark text and Accordion tabs solid.
Component form fields
- Navigation style - Sets the style of the tab navigation links.
- Add space between navigation and content - Adds additional space between the tabs and the navigation
- Background color - Sets a background color on the tab container.
- Add space below - Adds a space (margin) below the tab container. This is required if a space is desirable when adding this component above another component within the same parent layout component.
Tab item component
The Tab item provides each tab navigation bar.
Layout canvas fields
- Accordion tabs item - Provides the navigation bar
- Container - Provides a wrapping div to the content to optionally apply padding around the content
Component form fields
- Navigation label - Provides the text for the tab navigation buttons.
- Background color - Adds a background color to each individual tab content area.
- Padding around content - Adds padding around the content within the Accordion item.
