Tab

<sc-tab></sc-tab>

This component let users create tab.

Preview

<sc-tab-group>
	<sc-tab slot="nav" panel="general">
		<sc-icon name="home" slot="prefix"></sc-icon>
		General
	</sc-tab>
	<sc-tab slot="nav" panel="custom">
		<sc-icon name="image" slot="prefix"></sc-icon>
		Custom
	</sc-tab>
	<sc-tab slot="nav" panel="advanced">
		<sc-icon name="sliders" slot="prefix"></sc-icon>
		General
	</sc-tab>
	<sc-tab slot="nav" panel="disabled" disabled>
		<sc-icon name="slash" slot="prefix"></sc-icon>
		Disabled
	</sc-tab>
	<sc-tab-panel name="general">This is the general tab panel.</sc-tab-panel>
	<sc-tab-panel name="custom">This is the custom tab panel.</sc-tab-panel>
	<sc-tab-panel name="advanced">This is the advanced tab panel.</sc-tab-panel>
	<sc-tab-panel name="disabled">This is a disabled tab panel.</sc-tab-panel>
</sc-tab-group>

Code

GeneralCustomGeneralDisabledThis is the general tab panel.This is the custom tab panel.This is the advanced tab panel.This is a disabled tab panel.

Component Codex

Properties

Property	Description	Type	Default
active	Draws the tab in an active state.	boolean	false
count		string
disabled	Draws the tab in a disabled state.	boolean	false
href		string
panel	The name of the tab panel the tab will control. The panel must be located in the same tab group.	string	''

Events

Event	Description	Type
scClose	Close event	CustomEvent<void>

Methods

triggerBlur() => Promise<void>

Removes focus from the tab.

triggerFocus(options?: FocusOptions) => Promise<void>

Sets focus to the tab.

Shadow Parts

Part	Description
content
counter
prefix
suffix