Tabs
To create switchable sections of content, for example, code samples in a different language or the same content for different platforms, use a <tabs>
tag.
It has the following attribute:
- group
Specify a few tab groups to switch them simultaneously.
- id
Specify a unique identifier to use as a link anchor and generate a meaningful URL for this tab block. You can reference and reuse any element that has an ID.
- filter
Define a set of custom filters for conditionally including this tab block.
- instance
Define a set of instances for conditionally filtering this tab block.
- switcher-key
Make this tab block switchable depending on the selected key.
The <tab>
element goes inside a <tabs>
tag and has the following attributes:
- title
required Specify the tab title.
- group-key
Assign this key to the tabs in different groups that must be synced.
- id
Specify a unique identifier to use as a link anchor and generate a meaningful URL for this tab. You can reference and reuse any element that has an ID.
- filter
Define a set of custom filters for conditionally including this tab.
- instance
Define a set of instances for conditionally filtering this tab.
- switcher-key
Make this tab switchable depending on the selected key.
Below is a synchronously switched tabs example.
This is for Windows.
This is for macOS.
This is for Windows.
This is for macOS.