@blockquote-web-components/blockquote-tabs

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`
`_scrollContentTpl`
`_tablistTpl`
`_separatorTpl`
`_indicatorsTpl`
`_holdTpl`
`_tabpanelTpl`
`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`
`_onSlotChanges`			`ev`
`_scrollEdge`			`{ target = this._scrollContentRef.value }`
`_onTabClick`			`ev`
`_onTabKeyDown`			`ev`
`_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-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, }`

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`	`BlockquoteTabPanel`	BlockquoteTabPanel	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
`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
`_onSlotChanges`			`ev`
`__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

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

Variables

Name	Description	Type
`styles`

Exports

Kind	Name	Declaration	Module	Package
`js`	`styles`	styles	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
`js`	`styles`	styles	src/tab/styles/blockquote-tab-styles.css.js

`define/blockquote-tab.js`:

Exports

Kind	Name	Declaration	Module	Package
`custom-element-definition`	`blockquote-tab`	BlockquoteTab	/src/tab/BlockquoteTab.js

`define/blockquote-tabpanel.js`:

Exports

Kind	Name	Declaration	Module	Package
`custom-element-definition`	`blockquote-tabpanel`	BlockquoteTabPanel	/src/tabpanel/BlockquoteTabPanel.js

`define/blockquote-tabs.js`:

Exports

Kind	Name	Declaration	Module	Package
`custom-element-definition`	`blockquote-tabs`	BlockquoteTabs	/src/BlockquoteTabs.js

@blockquote-web-components/blockquote-tabs

Demo

Usage

src/BlockquoteTabs.js:

class: BlockquoteTabs, blockquote-tabs

Mixins

Fields

Methods

Events

Attributes

Exports

src/index.js:

Exports

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

Variables

Exports

src/tabpanel/BlockquoteTabPanel.js:

class: BlockquoteTabPanel, blockquote-tabpanel

Fields

Methods

Attributes

Exports

src/tab/BlockquoteTab.js:

class: BlockquoteTab, blockquote-tab

Mixins

Fields

Methods

Attributes

Exports

src/tabpanel/styles/blockquote-tabpanel-styles.css.js:

Variables

Exports

src/tab/styles/blockquote-tab-styles.css.js:

Variables

Exports

define/blockquote-tab.js:

Exports

define/blockquote-tabpanel.js:

Exports

define/blockquote-tabs.js:

Exports

Readme

Keywords

Package Sidebar

Install

DownloadsWeekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

`src/BlockquoteTabs.js`:

class: `BlockquoteTabs`, `blockquote-tabs`

`src/index.js`:

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

`src/tabpanel/BlockquoteTabPanel.js`:

class: `BlockquoteTabPanel`, `blockquote-tabpanel`

`src/tab/BlockquoteTab.js`:

class: `BlockquoteTab`, `blockquote-tab`

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

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

`define/blockquote-tab.js`:

`define/blockquote-tabpanel.js`:

`define/blockquote-tabs.js`:

Weekly Downloads