- Use Cases: Used to display content within each separate tab. The Tabs component supports up to five tabs.
- Dependencies
- Tab item required. The Tabs requires Tab children items to display content.
- Up to 5 Tabs: Up to 5 tab items can be added to the Tabs component.
- Tab States: Tab has 3 states: Default, Hover and Active (selected).
- Customizable Colors and Borders: Tab color, Tab border color, Text color and Text size can be defined for each tab independently and for each one of the 3 Tab states.
- Tab Variants: Each tab item can have a variant defined independently for itself: Fixed, Long and Flex width sizes.
Content example within Tab 1.
Content example within Tab 2.
Content example within Tab 3.
Content example within Tab 4.
Content example within Tab 5.
Creating a Tabs
- In Content Editor, create a "Tabs Folder" under the "_datasources" of your page
- Create a new Tabs item from the Tabs template.
- Fill in the optional fields for the Tabs item: Content Background, Is Dark, etc
- ⚠ Important: The colors for the content background are located in the following folder: /sitecore/content/AWTSites/GlobalRepository/Shared/Global/Component Settings/Tab Settings Folder/Content Backgrounds. If a color does not exist (or the language version is not added), please add it to this path.
- Still in Content Editor, create one or more Tab items (up to 5 tab items) from the Tab template under the Tabs item created in the previous step.
- Fill in the required fields for each Tab item
- Title
- Fill in the optional fields for each Tab item: Is Selected, Variant, Text Color, etc
- ⚠ Important: The variants for the Variant field are located in the following folder: /sitecore/content/AWTSites/GlobalRepository/Shared/Global/Component Settings/Tab Settings Folder/Tab Variants. If a valid variant (fixed, long or flex) does not exist (or the language version is not added), please add it to this path.
- ⚠ Important: The colors for Text Color, Active Text Color, Hover Text Color, Tab Color, Tab Border Color, Active Tab Color, Active Tab Border Color, Hover Tab Color, and Hover Tab Border Color are located in the following folder: /sitecore/content/AWTSites/GlobalRepository/Shared/Global/Component Settings/Tab Settings Folder/Colors Folder. If a color does not exist (or the language version is not added), please add it to this path.
- ⚠ Important: The text sizes for Text Weight, Active Text Weight, Hover Text Weight Color are located in the following folder: /sitecore/content/AWTSites/GlobalRepository/Shared/Global/Component Settings/Tab Settings Folder/Text Sizes Folder. If a text size does not exist (or the language version is not added), please add it to this path.
- In Experience Editor, insert the Tabs rendering into the awt-container or directly into the awt-body.
- Associate the Tabs item as the data source.
- Then insert the necessary content items into each Tab placeholder (awt-tab1, awt-tab2, etc) by clicking on each tab.
- Tab Variants: Fixed, Long and Flex width sizes.
- Fixed variant: the Tab title has always a specific size no matter the size of the text.
- Long variant: the Tab title adjusts to the size of the text.
- Flex variant: the Tab title takes the entire width size of the Tabs component area and all tabs are proportional in width size.
- Theme: Available in Dark and Default themes; ensure text/icon contrast meets accessibility standards in both.
Content example within Tab 1 for Tabs in Long variant.
In the Long variant, the Tab title adjusts to the size of the text.
Content example within Tab 2 for Tabs in Long variant.
In the Long variant, the Tab title adjusts to the size of the text.
Content example within Tab 1 for Tabs in Fixed variant.
In the Fixed variant, the Tab title has always a specific size no matter the size of the text.
Content example within Tab 2 for Tabs in Fixed variant.
In the Fixed variant, the Tab title has always a specific size no matter the size of the text.
Content example within Tab 1 for Tabs in Flex variant.
In the Flex variant, the Tab title takes the entire width size of the Tabs component area and all tabs are proportional in width size.
Content example within Tab 2 for Tabs in Flex variant.
In the Flex variant, the Tab title takes the entire width size of the Tabs component area and all tabs are proportional in width size.
Content example within Tab 1 for Tabs in Dark mode.
The same Variants from the previous examples (Long, Fixed and Flex) can also be applied in the Dark mode.
Content example within Tab 2 for Tabs in Dark mode.
The same Variants from the previous examples (Long, Fixed and Flex) can also be applied in the Dark mode.
- There are currently no known issues with this component