The Placer Toolkit alpha has arrived! 🎉
Plenty of changes are coming your way—some big, some breaking, some even nuclear! Beware the changelog…

Bring it on!

Tab

<pc-tab>

0.1.0

experimental

Tabs are used inside tab groups to represent and activate tab panels.

Additional demonstrations can be found in the tab group demos.

Properties#

Name	Description	Default
`panel`	The name of the tab panel this tab is associated with. The panel must be located in the same tab group. Type: `string`	`""`
`active`	Makes the tab active. Type: `boolean`	`false`
`closable`	Makes the tab closable and adds a close button. Type: `boolean`	`false`
`disabled`	Disables the tab. Type: `boolean`	`false`
`updateComplete`	A read‐only promise that resolves when the component has finished updating.	‐

Learn more about attributes and properties.

Slots#

Name	Description
(default)	The tab’s label.

Learn more about using slots.

Events#

Name	Description	Event detail
`pc-close`	Emitted when the tab is closable and the close button is pressed.	‐

Learn more about events.

Parts#

Name	Description
`base`	The component’s base wrapper.
`close-button`	The close button, a `<pc-icon-button>`.
`close-button-base`	The close button’s `base` part.

Learn more about customising CSS parts.

Importing#

If you’re using the autoloader or the standard loader, you can skip this section. But if you’re cherry picking, you can use any of the following snippets to import this component.

CDN (script tag)

CDN (import)

npm (import)

To manually import this component from the CDN, copy this code snippet and paste it in your HTML.

<script type="module" src="https://cdn.jsdelivr.net/npm/placer-toolkit@1.0.0-alpha.1/cdn/components/tab/tab.js"></script>

To manually import this component from the CDN, copy this code snippet and paste it in your JavaScript file.

import "https://cdn.jsdelivr.net/npm/placer-toolkit@1.0.0-alpha.1/cdn/components/tab/tab.js";

To manually import this component from npm, copy this code snippet and paste it in your JavaScript file.

import "placer-toolkit/dist/components/tab/tab.js";

Dependencies#

This component automatically imports these components:

Button