Tabs

A tabs component organizes content into multiple sections, allowing users to switch between different views or groups of content within the same space.

Usage

Tab : A Tab component groups multiple TabItems, allowing users to switch between different sections of content.
TabItem : A TabItem represents an individual tab and its associated content within a Tab component.

Appearance: Light

Theme: Blue

Font: Zoho Puvi

Contacts Tab

<script>
	import { Tabs, TabItem } from 'deskblocks';
</script>

<Tabs>
	<TabItem title="contact" open>Contacts Tab</TabItem>
	<TabItem title="account">Accounts Tab</TabItem>
</Tabs>

Notes:

Pass the open prop to a TabItem to set it as active.
If none of the TabItems have the open prop, no tab will be selected.

Background

Pass the background prop to apply a background color to the tabs.

Appearance: Light

Theme: Blue

Font: Zoho Puvi

Accounts Tab

<script>
	import { Tabs, TabItem } from 'deskblocks';
</script>

<Tabs background>
	<TabItem title="contact">Contacts Tab</TabItem>
	<TabItem title="account" open>Accounts Tab</TabItem>
</Tabs>

Slots

default

TabItem Props

`open`	boolean	undefined	Indicates whether the tab is currently active and its content is visible.
`title`	string	undefined	Sets the label or title displayed on the tab.
`class`	string	undefined	Custom CSS class for additional styling of the tab item.

Events

on:change : fires on Tabs when the selected tab changes after mount; the initial selection made while the tabs mount does not dispatch it. event.detail is { node, title } , where node is the newly shown panel element (null if no tab is selected) and title is the title of the selected TabItem (an empty string when unavailable).