Tab Panel

Tab panels are used inside tab groups to display tabbed content.

<pc-tab-group>
  <pc-tab slot="navigation" panel="general">General</pc-tab>
  <pc-tab slot="navigation" panel="custom">Custom</pc-tab>
  <pc-tab slot="navigation" panel="advanced">Advanced</pc-tab>
  <pc-tab slot="navigation" panel="disabled" disabled>
      Disabled
  </pc-tab>

  <pc-tab-panel name="general">
      This is the general tab panel.
  </pc-tab-panel>
  <pc-tab-panel name="custom">
      This is the custom tab panel.
  </pc-tab-panel>
  <pc-tab-panel name="advanced">
      This is the advanced tab panel.
  </pc-tab-panel>
  <pc-tab-panel name="disabled">
      This is a disabled tab panel.
  </pc-tab-panel>
</pc-tab-group>

Code

Additional demonstrations can be found in the tab group demos.

Properties

Name	Description	Default
`active`	`boolean`	`false`
`name`	`string`	`""`
`updateComplete`	A read‐only promise that resolves when the component has finished updating.	-

Learn more about attributes and properties.

Methods

Name	Description	Arguments
`handleActiveChange()`		-

Learn more about methods.

Importing

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

Script

Import

Bundler

To import this component from the CDN with a script tag, copy this snippet and paste it in your HTML.

<script type="module" src="https://cdn.jsdelivr.net/npm/placer-toolkit@0.5.1/dist/components/tab-panel/tab-panel.js"></script>

To import this component from the CDN using a JavaScript import, copy this snippet and paste it in your JavaScript:

import "https://cdn.jsdelivr.net/npm/placer-toolkit@0.5.1/dist/components/tab-panel/tab-panel.js";

To import this component with a bundler using a JavaScript import, copy this snippet and paste it in your JavaScript:

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