1.3.0 • Published 2 months ago
Share package
ARIA patterns
Tabs are a set of layered sections of content, known as tab panels, that display one panel of content at a time. Each tab panel has an associated tab element, that when activated, displays the panel. The list of tab elements is arranged along one edge of the currently displayed panel, most commonly the top edge.
Demo
Usage <blockquote-tabs label="List of tabs">
<blockquote-tab id="tab-1">Tab 1</blockquote-tab>
<blockquote-tab id="tab-2">Tab 2</blockquote-tab>
<blockquote-tab id="tab-3">Tab 3</blockquote-tab>
<blockquote-tab id="tab-4">Tab 4</blockquote-tab>
<blockquote-tab id="tab-5">Tab 5</blockquote-tab>
<blockquote-tab id="tab-6">Tab 6</blockquote-tab>
<blockquote-tab id="tab-7">Tab 7</blockquote-tab>
<blockquote-tab id="tab-8">Tab 8</blockquote-tab>
<blockquote-tab id="tab-9">Tab 9</blockquote-tab>
<blockquote-tab id="tab-10">Tab 10</blockquote-tab>
<blockquote-tabpanel aria-labelledby="tab-1"><p>Panel 1</p></blockquote-tabpanel>
<blockquote-tabpanel aria-labelledby="tab-2"><p>Panel 2</p></blockquote-tabpanel>
<blockquote-tabpanel aria-labelledby="tab-3"><p>Panel 3</p></blockquote-tabpanel>
<blockquote-tabpanel aria-labelledby="tab-4"><p>Panel 4</p></blockquote-tabpanel>
<blockquote-tabpanel aria-labelledby="tab-5"><p>Panel 5</p></blockquote-tabpanel>
<blockquote-tabpanel aria-labelledby="tab-6"><p>Panel 6</p></blockquote-tabpanel>
<blockquote-tabpanel aria-labelledby="tab-7"><p>Panel 7</p></blockquote-tabpanel>
<blockquote-tabpanel aria-labelledby="tab-8"><p>Panel 8</p></blockquote-tabpanel>
<blockquote-tabpanel aria-labelledby="tab-9"><p>Panel 9</p></blockquote-tabpanel>
<blockquote-tabpanel aria-labelledby="tab-10"><p>Panel 10</p></blockquote-tabpanel>
</blockquote-tabs>src/BlockquoteTabs.js:class: BlockquoteTabs, blockquote-tabs Mixins Name Module Package BlockquoteMixinSlotContent@blockquote-web-components/blockquote-mixin-slot-content
Fields Name Privacy Type Default Description Inherited From _selectedTab_selectedTabIndex_selectedTabIndexFromOne_getTabListLength_scrollContentTpl_tablistTpl_separatorTpl_indicatorsTpl_holdTpl_tabpanelTplautofocuspublic booleanfalseIf present, the tab automatically have focus labelpublic string''`aria-label` for tabs group selectedpublic number1The tab selected. _tabListarray[]_tabpanelListarray[]_selectTabLastundefined_selectTabpanelLastundefined_observedFocusbooleanfalse_observeScrollBehaviorbooleanfalse_slotChangesCountnumber0_slotNodesCountundefined_scrollContentRef_resizeControllerObservernew ResizeController(this, { callback: () => { this._onResizeObserverChange(); }, skipInitial: true, })_hasScrollLeftIndicatorpublic boolean_hasScrollRightIndicatorpublic boolean
Methods Name Privacy Description Parameters Return Inherited From _selectedIsInRangeidx_onSlotChangesev_scrollEdge{ target = this._scrollContentRef.value }_onTabClickev_onTabKeyDownev_selectTab_moveFocusSelectedTabselectedTab_requestFocusUpdate_scrollIntoView_scrollIntoViewWithOffsettabScroller, behavior_requestPropertyUpdateprop_onResizeObserverChange
Events Name Type Description Inherited From selectedchange
Attributes Name Field Inherited From autofocusautofocus labellabel selectedselected _hasScrollLeftIndicator_hasScrollLeftIndicator _hasScrollRightIndicator_hasScrollRightIndicator
Exports Kind Name Declaration Module Package jsBlockquoteTabsBlockquoteTabs src/BlockquoteTabs.js
src/index.js:Exports Kind Name Declaration Module Package jsBlockquoteTabsBlockquoteTabs ./BlockquoteTabs.js jsBlockquoteTabBlockquoteTab ./tab/BlockquoteTab.js jsBlockquoteTabPanelBlockquoteTabPanel ./tabpanel/BlockquoteTabPanel.js
src/styles/blockquote-tabs-styles.css.js:Variables Name Description Type styles
Exports Kind Name Declaration Module Package jsstylesstyles src/styles/blockquote-tabs-styles.css.js
<blockquote-tabpanel>
A tab element that can be used inside a blockquote-tabs element.
src/tabpanel/BlockquoteTabPanel.js:class: BlockquoteTabPanel, blockquote-tabpanel Fields Name Privacy Type Default Description Inherited From selectedpublic booleanfalseWhether or not the tabpanel is `selected`. globalRootAttributesobject{ role: 'tabpanel', slot: 'tabpanel', tabindex: 0, }
Methods Name Privacy Description Parameters Return Inherited From __setArrayAttibuteSets attributes on the element. entries: Record<*, *>
Attributes Name Field Inherited From selectedselected
Exports Kind Name Declaration Module Package jsBlockquoteTabPanelBlockquoteTabPanel src/tabpanel/BlockquoteTabPanel.js
<blockquote-tab>
A tab element that can be used inside a blockquote-tabs element.
src/tab/BlockquoteTab.js:class: BlockquoteTab, blockquote-tab Mixins Name Module Package BlockquoteMixinSlotContent@blockquote-web-components/blockquote-mixin-slot-content
Fields Name Privacy Type Default Description Inherited From selectedpublic booleanfalseWhether or not the tab is `selected`. globalRootAttributesobject{ role: 'tab', slot: 'tab', tabindex: 0, }
Methods Name Privacy Description Parameters Return Inherited From _onSlotChangesev__setArrayAttibuteSets attributes on the element. entries: Record<*, *>
Attributes Name Field Inherited From selectedselected
Exports Kind Name Declaration Module Package jsBlockquoteTabBlockquoteTab src/tab/BlockquoteTab.js
src/tabpanel/styles/blockquote-tabpanel-styles.css.js:Variables Name Description Type styles
Exports Kind Name Declaration Module Package jsstylesstyles src/tabpanel/styles/blockquote-tabpanel-styles.css.js
src/tab/styles/blockquote-tab-styles.css.js:Variables Name Description Type styles
Exports Kind Name Declaration Module Package jsstylesstyles src/tab/styles/blockquote-tab-styles.css.js
define/blockquote-tab.js:Exports Kind Name Declaration Module Package custom-element-definitionblockquote-tabBlockquoteTab /src/tab/BlockquoteTab.js
define/blockquote-tabpanel.js:Exports Kind Name Declaration Module Package custom-element-definitionblockquote-tabpanelBlockquoteTabPanel /src/tabpanel/BlockquoteTabPanel.js
define/blockquote-tabs.js:Exports Kind Name Declaration Module Package custom-element-definitionblockquote-tabsBlockquoteTabs /src/BlockquoteTabs.js
