@blockquote-web-components/blockquote-tabs NPM

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
`_selectedTab`
`_selectedTabIndex`
`_selectedTabIndexFromOne`
`_getTabListLength`
`_onSlotChanges`
`_scrollContentTpl`
`_tablistTpl`
`_separatorTpl`
`_indicatorsTpl`
`_holdTpl`
`_tabpanelTpl`
`_onTabClick`
`_onTabKeyDown`
`autofocus`	public	`boolean`	`false`	If present, the tab automatically have focus
`label`	public	`string`	`''`	`aria-label` for tabs group
`selected`	public	`number`	`1`	The tab selected.
`_tabList`		`array`	`[]`
`_tabpanelList`		`array`	`[]`
`_selectTabLast`			`undefined`
`_selectTabpanelLast`			`undefined`
`_observedFocus`		`boolean`	`false`
`_observeScrollBehavior`		`boolean`	`false`
`_slotChangesCount`		`number`	`0`
`_slotNodesCount`			`undefined`
`_scrollContentRef`
`_resizeControllerObserver`			`new ResizeController(this, { callback: () => { this._onResizeObserverChange(); }, skipInitial: true, })`
`_hasScrollLeftIndicator`	public	`boolean`
`_hasScrollRightIndicator`	public	`boolean`

Methods

Name	Privacy	Description	Parameters	Return	Inherited From
`_selectedIsInRange`			`idx`
`_scrollEdge`			`{ target = this._scrollContentRef.value }`
`_selectTab`
`_moveFocusSelectedTab`			`selectedTab`
`_requestFocusUpdate`
`_scrollIntoView`
`_scrollIntoViewWithOffset`			`tabScroller, behavior`
`_requestPropertyUpdate`			`prop`
`_onResizeObserverChange`

Events

Name	Type	Description	Inherited From
`selectedchange`

Attributes

Name	Field	Inherited From
`autofocus`	autofocus
`label`	label
`selected`	selected
`_hasScrollLeftIndicator`	_hasScrollLeftIndicator
`_hasScrollRightIndicator`	_hasScrollRightIndicator

Exports

Kind	Name	Declaration	Module	Package
`js`	`BlockquoteTabs`	BlockquoteTabs	src/BlockquoteTabs.js

`src/index.js`:

Exports

Kind	Name	Declaration	Module
`js`	`BlockquoteTabs`	BlockquoteTabs	./BlockquoteTabs.js
`js`	`BlockquoteTab`	BlockquoteTab	./tab/BlockquoteTab.js
`js`	`BlockquoteTabPanel`	BlockquoteTabPanel	./tabpanel/BlockquoteTabPanel.js

`src/styles/blockquote-tabs-styles.css.js`:

Variables

Name	Description	Type
`styles`

Exports

Kind	Name	Declaration	Module	Package
`js`	`styles`	styles	src/styles/blockquote-tabs-styles.css.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
`_onSlotChanges`
`selected`	public	`boolean`	`false`	Whether or not the tab is `selected`.
`globalRootAttributes`		`object`	`{ role: 'tab', slot: 'tab', tabindex: 0, }`

Methods

Name	Privacy	Description	Parameters	Return	Inherited From
`__setArrayAttibute`		Sets attributes on the element.	`entries: Record<, >`

Attributes

Name	Field	Inherited From
`selected`	selected

Exports

Kind	Name	Declaration	Module	Package
`js`	`BlockquoteTab`	BlockquoteTab	src/tab/BlockquoteTab.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
`selected`	public	`boolean`	`false`	Whether or not the tabpanel is `selected`.
`globalRootAttributes`		`object`	`{ role: 'tabpanel', slot: 'tabpanel', tabindex: 0, }`