tabs

About
Projects
Account

About

Projects

Account

import "drab/tabs/define";

html

<drab-tabs trigger="a" class="block rounded border shadow">
	<ul class="flex list-none gap-1 border-b p-1">
		<li>
			<a href="#about" class="button ghost aria-selected:bg-muted">About</a>
		</li>
		<li>
			<a href="#projects" class="button ghost aria-selected:bg-muted">
				Projects
			</a>
		</li>
		<li>
			<a href="#account" class="button ghost aria-selected:bg-muted">Account</a>
		</li>
	</ul>

	<div
		class="flex h-32 flex-col items-center justify-center gap-4 overflow-auto p-4"
	>
		<div id="about">About</div>
		<div id="projects">Projects</div>
		<div id="account">Account</div>
	</div>
</drab-tabs>

Overview

Defined in: tabs/index.ts:36

Progressively enhance a list of links and content to be tabs by wrapping with the Tabs element. Each trigger should be an HTMLAnchorElement with the href attribute set to the id of the corresponding tab panel.

Tip: Set the height of the element the panels are contained in with CSS to prevent layout shift when JS is loaded.

This element is based on Chris Ferdinandi’s Toggle Tabs design.

ARIA Reference

Sets the correct ARIA attributes on each element.
Supports keyboard navigation based on the orientation attribute.
First tab is selected by default if no aria-selected="true" attribute is found on another tab.
tablist is calculated based on the deepest common parent of the tabs, throws an error if not found.

Attributes

orientation

Set orientation="vertical" if the tablist element is displayed vertically.

Constructors

Constructor

new Tabs(): Tabs

Defined in: tabs/index.ts:43

Returns

Tabs

Overrides

Lifecycle(Trigger()).constructor

Accessors

event

Get Signature

get event(): keyof HTMLElementEventMap

Defined in: base/index.ts:120

Event for the trigger to execute.

For example, set to "mouseover" to execute the event when the user hovers the mouse over the trigger, instead of when they click it.

Default

"click";

Returns

keyof HTMLElementEventMap

Set Signature

set event(value): void

Defined in: base/index.ts:126

Parameters

value

keyof HTMLElementEventMap

Returns

void

Inherited from

Lifecycle(Trigger()).event

Methods

connectedCallback()

connectedCallback(): void

Defined in: base/index.ts:76

Called when custom element is added to the page.

Returns

void

Inherited from

Lifecycle(Trigger()).connectedCallback

destroy()

destroy(): void

Defined in: base/index.ts:83

Passed into disconnectedCallback, since Base needs to run disconnectedCallback as well. It is overridden in each element that needs to run disconnectedCallback.

Returns

void

Inherited from

Lifecycle(Trigger()).destroy

disconnectedCallback()

disconnectedCallback(): void

Defined in: base/index.ts:86

Called when custom element is removed from the page.

Returns

void

Inherited from

Lifecycle(Trigger()).disconnectedCallback

listener()

Call Signature

listener<T>(listener, options?): void

Defined in: base/index.ts:152

Type Parameters

T

T extends keyof HTMLElementEventMap

Parameters

listener

Listener<T>

Listener to attach to all of the trigger elements.

options?

AddEventListenerOptions

Returns

void

Inherited from

Lifecycle(Trigger()).listener

Call Signature

listener<T>(type, listener, options?): void

Defined in: base/index.ts:161

Type Parameters

T

T extends keyof HTMLElementEventMap

Parameters

type

T

Event type.

listener

Listener<T>

Listener to attach to all of the trigger elements.

options?

AddEventListenerOptions

Returns

void

Inherited from

Lifecycle(Trigger()).listener

mount()

mount(): void

Defined in: tabs/index.ts:86

Passed into queueMicrotask in connectedCallback. It is overridden in each component that needs to run connectedCallback.

The reason for this is to make these elements work better with frameworks like Svelte. For SSR this isn’t necessary, but when client side rendering, the HTML within the custom element isn’t available before connectedCallback is called. By waiting until the next microtask, the HTML content is available—then for example, listeners can be attached to elements inside.

Returns

void

Overrides

Lifecycle(Trigger()).mount

safeListener()

Call Signature

safeListener<T>(type, listener, element?, options?): void

Defined in: base/index.ts:35

Wrapper around addEventListener that ensures when the element is removed from the DOM, these event listeners are cleaned up.

Type Parameters

T

T extends keyof HTMLElementEventMap

Parameters

type

T

Event listener type - ex: "keydown"

listener

(this, event) => any

Listener to add to the target.

element?

HTMLElement

options?

AddEventListenerOptions

Other options sans signal.

Returns

void

Inherited from

Lifecycle(Trigger()).safeListener

Call Signature

safeListener<T>(type, listener, document, options?): void

Defined in: base/index.ts:41

Wrapper around addEventListener that ensures when the element is removed from the DOM, these event listeners are cleaned up.

Type Parameters

T

T extends keyof DocumentEventMap

Parameters

type

T

Event listener type - ex: "keydown"

listener

(this, event) => any

Listener to add to the target.

document

Document

options?

AddEventListenerOptions

Other options sans signal.

Returns

void

Inherited from

Lifecycle(Trigger()).safeListener

Call Signature

safeListener<T>(type, listener, window, options?): void

Defined in: base/index.ts:47

Wrapper around addEventListener that ensures when the element is removed from the DOM, these event listeners are cleaned up.

triggers<T>(instance): NodeListOf<T>

Defined in: base/index.ts:136

this.querySelectorAll("[data-trigger]");

Inherited from

Lifecycle(Trigger()).triggers

Call Signature

triggers(): NodeListOf<HTMLElement>

Defined in: base/index.ts:137

Returns

NodeListOf<HTMLElement>

All of the elements that match the trigger selector.

Default

this.querySelectorAll("[data-trigger]");

Inherited from

Lifecycle(Trigger()).triggers