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 |
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>