Zum Hauptinhalt springen Seitenleiste
Zum Inhaltsverzeichnis springen

    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.

    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

    Eigenschaften#

    NameBeschreibungReflektiertStandard
    placementThe placement of the tabs.
    Typ: "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.
    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#

    NameBeschreibung
    (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.

    Erfahre mehr über die Benutzung von Slots.

    Methoden#

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

    Erfahre mehr über Methoden.

    Events#

    NameBeschreibungEvent‐Detail
    pc-tab-showEmitted when a tab is shown.{ name: String }
    pc-tab-hideEmitted when a tab is hidden.{ name: String }

    Erfahre mehr über Events.

    Benutzerdefinierte Eigenschaften#

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

    Erfahre mehr über das Anpassen von benutzerdefinierten Eigenschaften.

    Parts#

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

    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, kopiere dieses Code‐Snippet und füge es in dein HTML ein. 

    <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, kopiere dieses Code‐Snippet und füge es in deine JavaScript‐Datei ein. 

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

    Um diese Komponente manuell via npm zu importieren, kopiere dieses Code‐Snippet und füge es in deine JavaScript‐Datei ein. 

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

    Abhängigkeiten#

    Diese Komponente importiert automatisch folgende Komponenten:

    Wir würden uns freuen, von dir zu hören. Bitte kontaktiere uns bei Fragen oder Anliegen, die du hast.

    Du kannst uns per E‐Mail unter placer.coc.reports+contact@gmail.com erreichen.

    Wir freuen uns darauf, von dir zu hören!

    Alles klar!     Gefährliche Lande

    Ui! Du bist in die gefährlichen Lande von Placer Toolkit geraten. Version 0 ist veraltet und entspricht nicht den EU‐Datenschutzstandards, einschließlich DSGVO.

    Willst du die neuesten Kräfte, Sicherheit und Compliance? Bleib bei der aktuellen Version von Placer Toolkit!

    Ups! Aufladen!