Tab Group

<pc-tab-group>

0.1.0

experimental

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

Tab groups organise content into a container that shows one section at a time.

This component makes use of tabs and tab panels. Each tab must be slotted into the navigation slot and its panel must refer to a tab panel of the same name.

<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

Edit

Demos

Tabs on bottom

Tabs can be shown on the bottom by setting the placement attribute to bottom.

<pc-tab-group placement="bottom">
    <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

Edit

Tabs on start

Tabs can be shown on the starting side by setting the placement attribute to start.

<pc-tab-group placement="start">
    <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

Edit

Tabs on end

Tabs can be shown on the ending side by setting the placement attribute to end.

<pc-tab-group placement="end">
    <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

Edit

Closable tabs

Add the closable attribute to a tab to show a close button. This example shows how you can dynamically remove tabs from the DOM when the close button is pressed.

<pc-tab-group class="tabs-closable">
    <pc-tab slot="navigation" panel="general">General</pc-tab>
    <pc-tab slot="navigation" panel="closable-1" closable>
        Closable 1
    </pc-tab>
    <pc-tab slot="navigation" panel="closable-2" closable>
        Closable 2
    </pc-tab>
    <pc-tab slot="navigation" panel="closable-3" closable>
        Closable 3
    </pc-tab>

    <pc-tab-panel name="general">
        This is the general tab panel.
    </pc-tab-panel>
    <pc-tab-panel name="closable-1">
        This is the first closable tab panel.
    </pc-tab-panel>
    <pc-tab-panel name="closable-2">
        This is the second closable tab panel.
    </pc-tab-panel>
    <pc-tab-panel name="closable-3">
        This is the third closable tab panel.
    </pc-tab-panel>
</pc-tab-group>

<script>
    const closableTabGroup = document.querySelector(".tabs-closable");

    closableTabGroup.addEventListener("pc-close", async (event) => {
        const tab = event.target;
        const panel = closableTabGroup.querySelector(`pc-tab-panel[name="${tab.panel}"]`);

        if (tab.active) {
            closableTabGroup.show(tab.previousElementSibling.panel);
        }

        tab.remove();
        panel.remove();
    });
</script>

Code

Edit

Scrolling tabs

When there are more tabs than horizontal space allows, the tab navigation bar will be scrollable.

<pc-tab-group>
    <pc-tab slot="navigation" panel="tab-1">Tab 1</pc-tab>
    <pc-tab slot="navigation" panel="tab-2">Tab 2</pc-tab>
    <pc-tab slot="navigation" panel="tab-3">Tab 3</pc-tab>
    <pc-tab slot="navigation" panel="tab-4">Tab 4</pc-tab>
    <pc-tab slot="navigation" panel="tab-5">Tab 5</pc-tab>
    <pc-tab slot="navigation" panel="tab-6">Tab 6</pc-tab>
    <pc-tab slot="navigation" panel="tab-7">Tab 7</pc-tab>
    <pc-tab slot="navigation" panel="tab-8">Tab 8</pc-tab>
    <pc-tab slot="navigation" panel="tab-9">Tab 9</pc-tab>
    <pc-tab slot="navigation" panel="tab-10">Tab 10</pc-tab>
    <pc-tab slot="navigation" panel="tab-11">Tab 11</pc-tab>
    <pc-tab slot="navigation" panel="tab-12">Tab 12</pc-tab>
    <pc-tab slot="navigation" panel="tab-13">Tab 13</pc-tab>
    <pc-tab slot="navigation" panel="tab-14">Tab 14</pc-tab>
    <pc-tab slot="navigation" panel="tab-15">Tab 15</pc-tab>
    <pc-tab slot="navigation" panel="tab-16">Tab 16</pc-tab>
    <pc-tab slot="navigation" panel="tab-17">Tab 17</pc-tab>
    <pc-tab slot="navigation" panel="tab-18">Tab 18</pc-tab>
    <pc-tab slot="navigation" panel="tab-19">Tab 19</pc-tab>
    <pc-tab slot="navigation" panel="tab-20">Tab 20</pc-tab>

    <pc-tab-panel name="tab-1">This is the first tab panel.</pc-tab-panel>
    <pc-tab-panel name="tab-2">This is the second tab panel.</pc-tab-panel>
    <pc-tab-panel name="tab-3">This is the third tab panel.</pc-tab-panel>
    <pc-tab-panel name="tab-4">This is the fourth tab panel.</pc-tab-panel>
    <pc-tab-panel name="tab-5">This is the fifth tab panel.</pc-tab-panel>
    <pc-tab-panel name="tab-6">This is the sixth tab panel.</pc-tab-panel>
    <pc-tab-panel name="tab-7">This is the seventh tab panel.</pc-tab-panel>
    <pc-tab-panel name="tab-8">This is the eighth tab panel.</pc-tab-panel>
    <pc-tab-panel name="tab-9">This is the ninth tab panel.</pc-tab-panel>
    <pc-tab-panel name="tab-10">This is the 10th tab panel.</pc-tab-panel>
    <pc-tab-panel name="tab-11">This is the 11th tab panel.</pc-tab-panel>
    <pc-tab-panel name="tab-12">This is the 12th tab panel.</pc-tab-panel>
    <pc-tab-panel name="tab-13">This is the 13th tab panel.</pc-tab-panel>
    <pc-tab-panel name="tab-14">This is the 14th tab panel.</pc-tab-panel>
    <pc-tab-panel name="tab-15">This is the 15th tab panel.</pc-tab-panel>
    <pc-tab-panel name="tab-16">This is the 16th tab panel.</pc-tab-panel>
    <pc-tab-panel name="tab-17">This is the 17th tab panel.</pc-tab-panel>
    <pc-tab-panel name="tab-18">This is the 18th tab panel.</pc-tab-panel>
    <pc-tab-panel name="tab-19">This is the 19th tab panel.</pc-tab-panel>
    <pc-tab-panel name="tab-20">This is the 20th tab panel.</pc-tab-panel>
</pc-tab-group>

Code

Edit

Fixed scroll controls

When tabs are scrolled all the way to one side, the scroll button on that side isn’t visible. Set the fixed-scroll-controls to always show both scroll buttons.

<pc-tab-group fixed-scroll-controls>
    <pc-tab slot="navigation" panel="tab-1">Tab 1</pc-tab>
    <pc-tab slot="navigation" panel="tab-2">Tab 2</pc-tab>
    <pc-tab slot="navigation" panel="tab-3">Tab 3</pc-tab>
    <pc-tab slot="navigation" panel="tab-4">Tab 4</pc-tab>
    <pc-tab slot="navigation" panel="tab-5">Tab 5</pc-tab>
    <pc-tab slot="navigation" panel="tab-6">Tab 6</pc-tab>
    <pc-tab slot="navigation" panel="tab-7">Tab 7</pc-tab>
    <pc-tab slot="navigation" panel="tab-8">Tab 8</pc-tab>
    <pc-tab slot="navigation" panel="tab-9">Tab 9</pc-tab>
    <pc-tab slot="navigation" panel="tab-10">Tab 10</pc-tab>
    <pc-tab slot="navigation" panel="tab-11">Tab 11</pc-tab>
    <pc-tab slot="navigation" panel="tab-12">Tab 12</pc-tab>
    <pc-tab slot="navigation" panel="tab-13">Tab 13</pc-tab>
    <pc-tab slot="navigation" panel="tab-14">Tab 14</pc-tab>
    <pc-tab slot="navigation" panel="tab-15">Tab 15</pc-tab>
    <pc-tab slot="navigation" panel="tab-16">Tab 16</pc-tab>
    <pc-tab slot="navigation" panel="tab-17">Tab 17</pc-tab>
    <pc-tab slot="navigation" panel="tab-18">Tab 18</pc-tab>
    <pc-tab slot="navigation" panel="tab-19">Tab 19</pc-tab>
    <pc-tab slot="navigation" panel="tab-20">Tab 20</pc-tab>

    <pc-tab-panel name="tab-1">This is the first tab panel.</pc-tab-panel>
    <pc-tab-panel name="tab-2">This is the second tab panel.</pc-tab-panel>
    <pc-tab-panel name="tab-3">This is the third tab panel.</pc-tab-panel>
    <pc-tab-panel name="tab-4">This is the fourth tab panel.</pc-tab-panel>
    <pc-tab-panel name="tab-5">This is the fifth tab panel.</pc-tab-panel>
    <pc-tab-panel name="tab-6">This is the sixth tab panel.</pc-tab-panel>
    <pc-tab-panel name="tab-7">This is the seventh tab panel.</pc-tab-panel>
    <pc-tab-panel name="tab-8">This is the eighth tab panel.</pc-tab-panel>
    <pc-tab-panel name="tab-9">This is the ninth tab panel.</pc-tab-panel>
    <pc-tab-panel name="tab-10">This is the 10th tab panel.</pc-tab-panel>
    <pc-tab-panel name="tab-11">This is the 11th tab panel.</pc-tab-panel>
    <pc-tab-panel name="tab-12">This is the 12th tab panel.</pc-tab-panel>
    <pc-tab-panel name="tab-13">This is the 13th tab panel.</pc-tab-panel>
    <pc-tab-panel name="tab-14">This is the 14th tab panel.</pc-tab-panel>
    <pc-tab-panel name="tab-15">This is the 15th tab panel.</pc-tab-panel>
    <pc-tab-panel name="tab-16">This is the 16th tab panel.</pc-tab-panel>
    <pc-tab-panel name="tab-17">This is the 17th tab panel.</pc-tab-panel>
    <pc-tab-panel name="tab-18">This is the 18th tab panel.</pc-tab-panel>
    <pc-tab-panel name="tab-19">This is the 19th tab panel.</pc-tab-panel>
    <pc-tab-panel name="tab-20">This is the 20th tab panel.</pc-tab-panel>
</pc-tab-group>

Code

Edit

Manual activation

When focused, keyboard users can press ← and → to select the desired tab. By default, the corresponding tab panel will be shown immediately (automatic activation). You can change this behaviour by setting activation="manual" which will require the user to press Space or Enter before showing the tab panel (manual activation).

<pc-tab-group activation="manual">
    <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

Edit

Eigenschaften

Name	Beschreibung	Standard
`placement`	The placement of the tabs. Typ: `"top" \| "bottom" \| "start" \| "end"`	`"top"`
`activation`	When this is set to `auto`, navigating the tabs with the arrow keys will instantly show the corresponding tab panel. If this is set to `manual`, the tab will receive focus but will not show the corresponding tab panel until the user presses `Space` or `Enter`/`Return`. Typ: `"auto" \| "manual"`	`"auto"`
`noScrollControls` `no-scroll-controls`	Hides the scroll buttons when tabs overflow. Typ: `boolean`	`false`
`fixedScrollControls` `fixed-scroll-controls`	Prevents the scroll buttons from being hidden when it isn’t needed. 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
(Standard)	Used for grouping tab panels in the tab group. It must only contain `<pc-tab-panel>` elements.
`navigation`	Used for grouping tabs in the tab group. It must only contain `<pc-tab>` elements.

Erfahre mehr über die Benutzung von Slots.

Methoden

Name	Beschreibung	Argumente
`show()`	Shows the specified tab panel.	`panel: string`

Erfahre mehr über Methoden.

Events

Name	Beschreibung	Event‐Detail
`pc-tab-show`	Emitted when a tab is shown.	`{ name: String }`
`pc-tab-hide`	Emitted when a tab is hidden.	`{ name: String }`

Erfahre mehr über Events.

Benutzerdefinierte Eigenschaften

Name	Beschreibung	Standard
`--indicator-color`	The colour of the active tab indicator.	`var(--pc-color-primary-fill-loud)`
`--track-width`	The indicator track’s width.	`4px`

Erfahre mehr über das Anpassen von benutzerdefinierten Eigenschaften.

Parts

Name	Beschreibung
`base`	The component’s base wrapper.
`navigation`	The tab group’s navigation container where tabs are slotted in.
`tabs`	The container that wraps the tabs.
`active-tab-indicator`	The indicator that highlights the currently selected tab.
`body`	The tab group’s body where tab panels are slotted in.
`scroll-button`	The previous/next scroll buttons that show when tabs are scrollable, a `<pc-button>`.
`scroll-button-start`	The scroll button that scrolls to the start.
`scroll-button-end`	The scroll button that scrolls to the end.
`scroll-button-base`	The scroll buttons’ `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, kannst du dieses Code‐Snippet kopieren und es in dein HTML einfügen.

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

Um diese Komponente manuell vom CDN zu importieren, kannst du dieses Code‐Snippet kopieren und es in deine JavaScript‐Datei einfügen.

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

Um diese Komponente manuell von npm zu importieren, kannst du dieses Code‐Snippet kopieren und es in deine JavaScript‐Datei einfügen.

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

Abhängigkeiten

Diese Komponente importiert automatisch folgende Komponenten: