Class: Tabs

Tabs()

<brut-tabs>

Implements an in-page tab selector. It's intended to wrap a set of <a> or <button> elements that represent the tabs of a tabbed UI, as defined by ARIA roles.

Each direct child must be an <a> or a <button>, though <a> is recommended. Any other elements are ignored. Each <a> or <button> (herafter referred to as "tab") must have the correct ARIA attributes:

  • role="tab"
  • aria-selected as true or false, depending on what tab is selected when the page is first rendered. This custom element will ensure this value is updated as different tabs are selected.
  • tabindex should be 0 if selected, -1 otherwise. This custom element will ensure this value is updated as different tabs are selected.
  • aria-controls to the ID or list of IDs of panels that should be shown when this tab is selected.
  • id to allow the tab-panel to refer back to this tab.

This custom element will set click listeners on all tabs and, when clicked, hide all panels referred to by every tab (by setting the hidden attribute), then show only those panels referred to by the clicked tab. You can use CSS to style everything the way you like it.

Constructor

new Tabs()

Properties:
Name Type Description
tab-selection-pushes-and-restores-state boolean

if set, this custom element will use the history API to manage state. When a tab implemented by an <a> with an href is clicked, that href will be pushed into the state. When the back button is hit, this will select the previous tab as selected. Note that this will conflict with anything else on the page that manipulates state, so only set this if your UI is a "full page tab" style UI.
Source:
Fires:
  • Tabs#brut:tabselected whenever the tab selection has changed
Example
<brut-tabs>
  <a role="tab" aria-selected="true"  tabindex="0"  aria-controls="inbox-panel"  id="inbox-tab"
     href="?tab=inbox">Inbox</a>
  <a role="tab" aria-selected="false" tabindex="-1" aria-controls="drafts-panel" id="drafts-tab"
     href="?tab=drafts">Drafts</a>
  <a role="tab" aria-selected="false" tabindex="-1" aria-controls="spam-panel"   id="spam-tab"
     href="?tab=spam">Spam</a>
</brut-tabs>
<section role="tabpanel" tabindex="0"  id="inbox-panel">
  <h3>Inbox</h3>
</section>
<section role="tabpanel" tabindex="0" id="drafts-panel" hidden>
  <h3>Drafts</h3>
</section>
<section role="tabpanel" tabindex="0" id="spam-panel"   hidden>
  <h3>Spam</h3>
</section>
<!-- if a user clicks on 'Drafts', the DOM will be updated to look
     effectively like so: -->
<brut-tabs>
  <a role="tab" aria-selected="false" tabindex="-1" aria-controls="inbox-panel"  id="inbox-tab"
     href="?tab=inbox">Inbox</a>
  <a role="tab" aria-selected="true"  tabindex="0"  aria-controls="drafts-panel" id="drafts-tab"
     href="?tab=drafts">Drafts</a>
  <a role="tab" aria-selected="false" tabindex="-1" aria-controls="spam-panel"   id="spam-tab"
     href="?tab=spam">Spam</a>
</brut-tabs>
<section role="tabpanel" tabindex="0"  id="inbox-panel"  hidden>
  <h3>Inbox</h3>
</section>
<section role="tabpanel" tabindex="-1" id="drafts-panel">
  <h3>Drafts</h3>
</section>
<section role="tabpanel" tabindex="-1" id="spam-panel"   hidden>
  <h3>Spam</h3>
</section>