Tab

<pc-tab>

0.1.0

experimental

Dieser Inhalt ist noch nicht in deiner Sprache verfügbar.

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

Additional demonstrations can be found in the tab group demos.

Eigenschaften#

Name	Beschreibung	Standard
`panel`	The name of the tab panel this tab is associated with. The panel must be located in the same tab group. Typ: `string`	`""`
`active`	Makes the tab active. Typ: `boolean`	`false`
`closable`	Makes the tab closable and adds a close button. Typ: `boolean`	`false`
`disabled`	Disables the tab. Typ: `boolean`	`false`
`updateComplete`	Ein schreibgeschütztes Promise, das erfüllt ist, sobald die Komponente fertig aktualisiert wurde.	‐

Erfahre mehr über Attribute und Eigenschaften.

Slots#

Name	Beschreibung
(default)	The tab’s label.

Erfahre mehr über die Benutzung von Slots.

Events#

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

Erfahre mehr über Events.

Parts#

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

Erfahre mehr über das Anpassen von CSS‐Parts.

Importieren#

Wenn du den Autoloader oder den Standard‐Loader nutzt, kannst du diesen Abschnitt überspringen. Falls du „Cherry Picking“ betreibst, kannst du die folgenden Snippets verwenden, um diese Komponente zu importieren.

CDN (Skript‐Tag)

CDN (Import)

npm (Import)

Um diese Komponente manuell vom CDN zu importieren, kopiere dieses Code‐Snippet und füge es in dein HTML ein.

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

Um diese Komponente manuell vom CDN zu importieren, kopiere dieses Code‐Snippet und füge es in deine JavaScript‐Datei ein.

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

Um diese Komponente manuell via npm zu importieren, kopiere dieses Code‐Snippet und füge es in deine JavaScript‐Datei ein.

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

Abhängigkeiten#

Diese Komponente importiert automatisch folgende Komponenten:

Button