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.

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


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.
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us