This component is used to switch among related views within the same
context. It is composed of three elements:
wmTabSelected is emitted whenever the user changes the tab. It should be used to display the appropriate content. You can either use a single tab panel and conditionally change its content, or have a panel for each tab and switch between them.
* Required property
tabIdof the tab item to display as selected.
wm-tab-items. Accepts valid CSS values e.g.
darkfor dark theme, unset for default (light) theme. Use sparingly! Dark tabs are an older design and are being phased out.
tabIdof the corresponding tab item. If you are conditionally rendering content in one tab panel, give the tab panel the
tabIdof tab item that will be selected on load.
Deprecated properties of
- Remove the
- Listen to the
wm-tab-listand, in the callback:
- Get the
selected-tabproperty to that value.
- Update the view by either toggling the visibility between different
wm-tab-panelelements, or setting the content within of a single
Usage in HTML
Edit the code below to see changes reflected in the example above.
Note: The second example demonstrates how the component can be used to dynamically change the content when a tab is selected (using the wmTabSelected event).
Example code for functionality.
Usage in Elm
Code generated from HTML.
The component sets the recommended aria-controls attributes for the tab items and the aria-labelledby attribute for the tab panels. When one tab panel is used to conditionally render content, the component updates these attributes when a new tab item is selected.
|Enter Space||Activates the tab item and triggers a change in the view.|
|Shift + Tab||
|Arrow Down||Focuses the tab panel. This is to ensure the content in the tab panel is more easily accessible to screen reader users. While in the tab widget, the screen reader is in focus mode, meaning the user is not able to browse using the arrow down key. If the tab panel contains no interactive elements, tabbing would move focus to the first interactive element outside the tab panel, meaning that users would lose their place and access to the tab content. If the component captures the arrow-down event and shifts focus to the tab panel outside the widget, it essentially gives control back to the screen reader, and users can more easily browse the content of the tabpanel.|
Most of the time you will want to set the container's width to 100%. If the container's width is unset, it will change according to its content. Since the component in turn checks its parent to determine the available space and adjust its display, this is likely to produce undesirable behavior.