The tabs widget uses the <devsite-selector> custom element to organize data
that has multiple representations, such as code examples in different
programming languages or data structures represented by different formats (such
as JSON, YAML, or XML).
General usage
The following example uses the <devsite-selector> custom element to render
three tab sections using HTML.
Tab 1 Title
Tab 1 Content
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur
semper tortor nec dictum sagittis. Nunc massa ipsum, mollis non neque
sed, vulputate dignissim odio.
Tab 2 Title
Tab 2 Content
Curabitur semper tortor nec dictum sagittis. Nunc massa ipsum, mollis
non neque sed, vulputate dignissim odio. Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Tab 3 Title
Tab 3 Content
Nunc massa ipsum, mollis non neque sed, vulputate dignissim odio. Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Curabitur semper
tortor nec dictum sagittis.
The following example uses Markdown syntax to render the same three tabs.
Tab 1 Title
Tab 1 Content
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur semper
tortor nec dictum sagittis. Nunc massa ipsum, mollis non neque sed,
vulputate dignissim odio.
Tab 2 Title
Tab 2 Content
Curabitur semper tortor nec dictum sagittis. Nunc massa ipsum, mollis non
neque sed, vulputate dignissim odio. Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Tab 3 Title
Tab 3 Content
Nunc massa ipsum, mollis non neque sed, vulputate dignissim odio. Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Curabitur semper tortor
nec dictum sagittis.
Tabs widget with an overflow menu
The following example uses the <devsite-selector> custom element but has too
many tabs to fit on the screen and automatically overflows into the More
drop-down menu.
Apples
Content about apples
Apricots
Content about apricots
Avocados
Content about avocados
Figs
Content about figs
Grapes
Content about grapes
Kiwifruit
Content about kiwifruit
Lemons
Content about lemons
Limes
Content about limes
Mangoes
Content about mangoes
Peaches
Content about peaches
The following example uses Markdown syntax to render the same overflow menu.
Apples
Content about apples
Apricots
Content about apricots
Avocados
Content about avocados
Figs
Content about figs
Grapes
Content about grapes
Kiwifruit
Content about kiwifruit
Lemons
Content about lemons
Limes
Content about limes
Mangoes
Content about mangoes
Peaches
Content about peaches
Duplicate tab names in multiple tabs widgets
Clicking a tab affects all other tabs on the page with the same text in the same syntax. For example, clicking either Apples or Apricots in the widget below also affects the second widget in the previous section because they are both built with Markdown.
Apples
More content about apples!
Apricots
More content about apricots, too!
Customizing tabs widgets
While you can build the tabs widget with Markdown, you need to use HTML syntax to assign custom attributes.
Wrapping text within a tab
Text that exceeds the max width for a tab set by DevSite is clipped and appended
with ellipses. The following example uses the two-line-tab class within the
<devsite-selector> custom element to wrap text within the second tab.
This is a long label that does not wrap
This label does not wrap to another line.
This label wraps to a second line
The label for this tab wraps to a second line.
Wrapping text within a tab with a smaller label
The following example sets two-line-tab to the first line and tab-label to
the second line within the <devsite-selector> custom element to display a
smaller label on the second line of a two-line tab.
Swift
This tab has a Swift label.
Java
This two-line tab has a smaller Android label below the Java label.
Kotlin
This two-line tab has a smaller Android label below the Kotlin label.
Java
This tab has a Java label.
Direct linking to a specific tab
The following example directly links to and opens a specific tab by specifying
the id within the <devsite-selector> custom element.
Cobol
This tab is the default, but you could use the #cobol
anchor.
Fortran
You would directly link to this tab by appending the
#fortran anchor to your link.
Haskell
This tab would use the #haskell anchor in your link.
Creating a link with all widgets opened to the same tab
The following link appends the query parameter ?tab=Apricots to this page's
URL and loads the page with the Apricots tab open on all selectors:
https://www.devsitetest.how/integration-tests/widgets/tabs?tab=Apricots