Adding a tabbed widget
A tab-group allows you to group some elements inside a tab component. This makes it possible to show a lot of content without taking up a lot of screen real estate. The user can switch between tabs by clicking headers at the top, or dots at the bottom of the component.
1. To create a tabbed component, start by building each tab as a section.
2. Then select each section and add the same tab-group label to group them together.
tab-group="unique-label-for-the-group"
Each tab in the group will be consolidated under the tabbed component and positioned at the first tab-group element's location.
3. Adding header names can be done by adding an angular attribute to each column
tab-header="tab-header-label"
All tab-group options that are not tab specific should be added to the first tab-group in each group.
- The tab-group attribute can be applied to any element inside the page. The first element of each group will determine the location of the tabbed component.
- The tabbed component will calculate the tallest tab and always keep that height, to avoid changing the page height during tabs switches.