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>
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>
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>
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>
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>
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>
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>
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>
| Name | Beschreibung | Reflektiert | 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.
| 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.
| Name | Beschreibung | Argumente |
|---|
show() | Shows the specified tab panel. | panel: string |
Erfahre mehr über Methoden.
| 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.
| 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.
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.4/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.4/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";
Diese Komponente importiert automatisch folgende Komponenten: