Tab Panel
<pc-tab-panel> Tab panels are used inside tab groups to display tabbed content.
Additional demonstrations can be found in the tab group demos.
| Name | Description | Reflects | Default |
|---|---|---|---|
name | The tab panel’s name. Type: string |
| "" |
active | The active state of the tab panel. Type: boolean |
| false |
updateComplete | A read‐only promise that resolves when the component has finished updating. | ‐ |
Learn more about customising animations.
| Name | Description |
|---|---|
| (default) | The tab panel’s content. |
Learn more about using slots.
| Name | Description | Arguments |
|---|---|---|
handleActiveChange() | This is an internal method. | ‐ |
Learn more about methods.
| Name | Description |
|---|---|
base | The component’s base wrapper. |
Learn more about customising CSS parts.
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.
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.3/cdn/components/tab-panel/tab-panel.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.3/cdn/components/tab-panel/tab-panel.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-panel/tab-panel.js";