Tab Panel

<sc-tab-panel></sc-tab-panel>

This component let users create tab panel.

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	When true, the tab panel will be shown.	boolean	false
name	The tab panel's name.	string	''

Shadow Parts

Part	Description
base