Skip to main content Sidebar
On this page
Skip to table of contents

Tab Group

<pc-tab-group> 0.1.0 experimental

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.

Edit

Tabs on start

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

Edit

Tabs on end

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

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.

Edit

Scrolling tabs

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

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.

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).

Edit

Properties

NameDescriptionReflectsDefault
placementThe placement of the tabs.
Type: "top" | "bottom" | "start" | "end"		 "top"
activationWhen 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.
Type: "auto" | "manual"		 "auto"
noScrollControls
no-scroll-controls		Hides the scroll buttons when tabs overflow.
Type: boolean		 false
fixedScrollControls
fixed-scroll-controls		Prevents the scroll buttons from being hidden when it isn’t needed.
Type: boolean		 false
updateComplete A read‐only promise that resolves when the component has finished updating. ‐

Learn more about customising animations.

Slots

NameDescription
(default)Used for grouping tab panels in the tab group. It must only contain <pc-tab-panel> elements.
navigationUsed for grouping tabs in the tab group. It must only contain <pc-tab> elements.

Learn more about using slots.

Methods

NameDescriptionArguments
show()Shows the specified tab panel.panel: string

Learn more about methods.

Events

NameDescriptionEvent detail
pc-tab-showEmitted when a tab is shown.{ name: String }
pc-tab-hideEmitted when a tab is hidden.{ name: String }

Learn more about events.

Custom properties

NameDescriptionDefault
--indicator-colorThe colour of the active tab indicator.var(--pc-color-primary-fill-loud)
--track-widthThe indicator track’s width.4px

Learn more about customising custom properties.

Parts

NameDescription
baseThe component’s base wrapper.
navigationThe tab group’s navigation container where tabs are slotted in.
tabsThe container that wraps the tabs.
active-tab-indicatorThe indicator that highlights the currently selected tab.
bodyThe tab group’s body where tab panels are slotted in.
scroll-buttonThe previous/next scroll buttons that show when tabs are scrollable, a <pc-button>.
scroll-button-startThe scroll button that scrolls to the start.
scroll-button-endThe scroll button that scrolls to the end.
scroll-button-baseThe scroll buttons’ base part.

Learn more about customising CSS parts.

Importing

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.

CDN (script tag)CDN (import)npm (import)

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-group/tab-group.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-group/tab-group.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-group/tab-group.js";

Dependencies

This component automatically imports these components:

We’d love to hear from you. Please reach out to us with any questions or enquiries you may have.

You can contact us via e‐mail at placer.coc.reports+contact@gmail.com.

We look forward to hearing from you!

Got it! Dangerous lands

Whoa! You’ve wandered into the dangerous lands of Placer Toolkit. Version 0 is out of date and doesn’t meet EU privacy standards, including GDPR.

Want the latest powers, security and compliance? Stick with the current version of Placer Toolkit!

Yikes! Power up!

Our site is 100 % cookie‐free! We value your privacy, which is why we don’t store any cookies or personal information related to you.

Your browser history is safe from crumbs, and your data is protected, aligning with modern privacy standards like the GDPR. Enjoy your visit without a single digital cookie in sight! 🍪🚫

View our Privacy Policy for more information.

Got it!