Skip to main content Design tokens Components Style utilities
Skip to table of contents

    Tab Group

    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

    Demos

    Tabs on bottom

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

    Tabs on start

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

    Tabs on end

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

    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.

    Scrolling tabs

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

    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.

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

    Properties

    NameDescriptionReflectsDefault
    dependencies object{ "pc-icon-button": PcIconButton, "pc-resize-observer": PcResizeObserver, }
    tabGroup HTMLElement-
    body HTMLSlotElement-
    navigation HTMLElement-
    indicator HTMLElement-
    activation "auto" | "manual""auto"
    fixedScrollControls
    fixed-scroll-controls    		 booleanfalse
    noScrollControls
    no-scroll-controls    		 booleanfalse
    placement "top" | "bottom" | "start" | "end""top"
    updateComplete A read‐only promise that resolves when the component has finished updating. -

    Learn more about attributes and properties.

    Methods

    NameDescriptionArguments
    updateScrollControls()-
    syncIndicator()-
    show()panel: string

    Learn more about methods.

    Importing

    If you’re using the autoloader or the standard loader, you can ignore this section. If you’re cherry picking, you can use any of the following snippets to import this component.

    ScriptImportBundler

    To import this component from the CDN with a script tag, copy this snippet and paste it in your HTML. 

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

    To import this component from the CDN using a JavaScript import, copy this snippet and paste it in your JavaScript: 

    import "https://cdn.jsdelivr.net/npm/placer-toolkit@0.5.1/dist/components/tab-group/tab-group.js";

    To import this component with a bundler using a JavaScript import, copy this snippet and paste it in your JavaScript: 

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