Tab Panel

See Tab List for examples

API Reference

Imports

Script

HTML

<!-- Auto registers as <role-tab-panel> -->
<script type="module" src="https://cdn.jsdelivr.net/npm/role-components/exports/components/tab-panel/tab-panel-register.js"></script>

CDN

HTML

<script type="module">
  // Auto registers as <role-tab-panel>
  import "https://cdn.jsdelivr.net/npm/role-components/exports/components/tab-panel/tab-panel-register.js"

  // Manual Register
  import RoleTabPanel from "https://cdn.jsdelivr.net/npm/role-components/exports/components/tab-panel/tab-panel.js"
  RoleTabPanel.define()
  // => Registers as <role-tab-panel>
</script>

Bundler

JavaScript

// Auto registers as <role-tab-panel>
import "role-components/exports/components/tab-panel/tab-panel-register.js"

// Manual Register
import RoleTabPanel "role-components/exports/components/tab-panel/tab-panel.js"
RoleTabPanel.define()
// => Registers as <role-tab-panel>

Slots

Name	Description
	The default slot.

Functions

Name	Description	Parameters
`getOrAssignId()`	Assign a random UUID with a prefix if no id is found. Will return the “id” of the element if its already assigned.	`prefix: string, force: boolean`
`getTextDirection()`	-	-
`debounce()`	-	`callback: (...args: any[]) => any, options: { key: any, wait: number }`
`setAria()`	-	`key: T, value: ARIAMixin[T]`

Parts

Name	Description
`base`	The component’s base wrapper.

Tab List

Toolbar