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

    Tab

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

    Additional demonstrations can be found in the tab group demos.

    Properties

    NameDescriptionReflectsDefault
    dependencies object{ "pc-icon-button": PcIconButton }
    tab HTMLElement-
    active booleanfalse
    closable booleanfalse
    disabled booleanfalse
    panel string""
    tabIndex number0
    updateComplete A read‐only promise that resolves when the component has finished updating. -

    Learn more about attributes and properties.

    Methods

    NameDescriptionArguments
    handleActiveChange()-
    handleDisabledChange()-

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