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.