Test Tab-Plugin vertikal


architektur-archiv 1:  


architektur-archiv 2:  


architektur-archiv 3:  


spiegelungen-archiv 1:  


Tabs & Akkordionen für Gutenberg: Dokumentation

Live Vorschau

Hinzufügen einer Registerkarte / Akkordeion

Entfernen einer Registerkarte / Akkordeion

Inhalt bearbeiten

Layouts

Das theming

Reaktionsschnelle Optionen

Kontrolle, welche Registerkarte / Akkordeion-Elemente standardmäßig aktiv sind (nur Pro)

Auto Close Akkordion Artikel (nur Pro)

Akkordeals Überschrift (nur Pro)

Blockeinstellungen „Tabs or Accordion“

Screenshot of the Tabs Container Block settings for horizontal layout
horizontale Tabs
Screenshot of the Tabs Container Block settings for vertical layout
vertikale Tabs Behälter
Screenshot of the Tabs Container Block settings for accordion layout
Akkordekordekor

Diese Screenshots beziehen sich auf die Einstellungen im Gutenberg-Editor für den Tabs-Containerblock, der den Namen „Tabs or Accordion“ trägt. Diese unterscheiden sich pro Layout, da horizontale Tabs zusätzliche Optionen im Zusammenhang mit dem Reaktionsverhalten haben und vertikale Registerkarten Optionen haben, um die Spaltenbreiten zu steuern. Es gibt ein paar andere Optionen, die nur erscheinen, wenn sie relevant sind, wie „Responsive Accordions: All Collapsed Initially“ (die nur angezeigt werden, wenn ein horizontaler Tabsblock das auf „Akkorde“ eingestellte Responsive Behavior-Feld hat).

  • THEME
    Bestimmt das Gesamtoptik der Tabs. Wählen Sie aus Basic, Tabby oder Minimal (ein Thema, das nur die absoluten Mindeststile anwendet, um es zum Arbeiten zu bringen). Themen können mit CSS weiter angepasst werden – siehe Demo-Seite für einen praktischen Theme-Customizer !
  • MOBILE BREAKPOINT
    Erzwingen Sie das mobile Display unter diesem Breakpoint (eine ganze Zahl, die die Bildschirmbreite in Pixeln darstellt). Standardmäßig zeigen horizontale Tabs ihre mobile Anzeige (wie von „Horizontal Tabs: Responsive Behavior“) bestimmt, wenn die Tabs nicht in das Fenster auf einer Zeile passen. Wenn der Mobile Breakpoint eingestellt ist, funktioniert dieses Auto-Zusammenstoß-Verhalten immer noch, aber wenn Sie einen Breakpoint festlegen, können Sie auch dieses mobile Display unter diesen Pixelwert erhöhen.
  • LAYOUT
    Bestimmt die Art der Kontrolle, die zur Anzeige des Inhalts verwendet wird. Wählen Sie aus horizontalen Tabs, Vertikalen Tabs oder Akkordeon
  • HORIZONTAL TABS: RESPONSIVE BEHAVIOR
    Auf kleineren Bildschirmen ist das Standardverhalten bei horizontalen Tabs, zu einem Akkordeal zu kollabieren, wenn die Tabs nicht passen (oder wenn die Bildschirmbreite unter dem MOBILE BREAKPOINT ist). Mit dieser Steuerung können Sie stattdessen die Tabs wickeln oder keine auswählen, wenn Sie kein reaktionsschnelles Verhalten anwenden möchten.
  • RESPONSIVE ACCORDIONS: ALLE COLLAPSIERT INITIALLY
    Wenn HORIZONTAL TABS: RESPONSIVE BEHAVIOR auf Akkordeo gesetzt ist, dann, wenn diese Einstellung falsch ist (der Standard), dann wird der erste Akkordealartikel erweitert. Wenn es so ist, werden alle Akkordeonartikel in diesem Szenario zunächst zusammengebrochen.
  • INITIALLY ACTIVE TAB (PRO)
    Erhältlich für horizontale/vertikale Register, können Sie die Registerkarte auswählen, die Sie standardmäßig anzeigen möchten (oder wählen Sie keine, wenn Sie zunächst keine Registerkarte anzeigen möchten). Bitte beachten Sie, dass, wenn die Seite mit einem Hash geladen wird, der zum Tab-ID passt, stattdessen geladen wird (wie zuvor). Auch wenn das Layout auf Akkordeas auf dem Handy kollabieren soll, dann ist das , das hier ausgewählte Akkordeoelement zu zeigen, aber dies kann mit anderen Einstellungen wie RESPONSIVE ACCORDSIONS: ALL COLLAPSED INITIALLY und dem Tab Block-Akundions-Einsatz: Offene Anfangsfeld offen.
  • AUTO CLOSE ACCORDION ITEMS (PRO)
    Mit diesem Set auf Falsch (Standard) bricht das Klicken auf ein Akkordeo-Element alle anderen zusammen, so dass nur der neu ausgewählte Akkordeo-Artikel innerhalb eines Akkordeals zu einem Zeitpunkt geöffnet werden kann. Richten Sie es so, dass es nicht automatisch geschlossen/zusammenbrechen ist, so dass der Benutzer mehrere Akkordeon-Elemente auf einmal erweitern kann. Für AUTO CLOSE ACCORDION ITEMS Beispielnutzung (mit horizontalem Layout auf Akkordeon kollabieren) siehe Beispiel 3 hier.
  • VERTICAL TAB LIST WIDTH
    Für vertikale Tabs bestimmt die Breite der Liste der Tabs. Geben Sie einen gültigen CSS-Widewert ein, z. B. 40rem oder 25%.
  • ACCORDION HEADING LEVEL (Pro)
    Ermöglicht die Auswahl der Kopfhöhe für die Akkordeongegenstände in diesem Behälter

Horizontale/vertikale Tabs: „Tab“ Blockeinstellungen

Dieser Screenshot ist vom einzelnen „Tab“ Block

  • ANCHOR ID
    Standardmäßig wird der Text des Etiketts verwendet, um eine gültige ID für die Registerkarte (und den Hash-Link) automatisch zu generieren. Wenn zum Beispiel der Name des Tabs „Mein schöner Tab“ ist, dann wird die ID my-beautiful-tab sein. Wenn Sie Ihre eigenen Anker-IDs setzen möchten, können Sie dies mit dieser Einstellung überschreiben. Wichtig: Anker-IDs müssen auf einer Seite einzigartig sein.
  • Akkordeo Artikel: Anfangs geöffnet (Pro)
    Wenn geprüft, wird dieser Akkordekordeal zunächst offen sein. Funktioniert sowohl für Layout-Abkommen als auch für horizontale Tabs mit reaktionsschnellem Verhalten, das auf Akkordeo zusammenbrechen soll. Für letztere hat das Überprüfen dieses Feld Vorrang vor allen Elterneinstellungen (wie die “Anfangsbrechen “All Collapsed). Für Akkordeo-Punkt: Erste Beispielnutzung (mit horizontalem Layout zum Akkordeal) klicken Sie hier.
  • ACCORDION HEADING LEVEL (Pro)
    Ermöglicht die Auswahl der Überschrift, die für dieses einzelne Akkordeo-Element verwendet werden soll. Standardmäßig erbt dies aus dem Elternblock. Bitte beachten Sie: Der Text für jedes Akkordeo-Element ist in einem Knoten mit Rolle „“ Überschrift“, so dass diese Überschrift das Attribut auf Arienebene beeinflusst, nicht den Node-Namen oder ein (eingebautes) Styling.
screenshot of the Tab block settings
Tab Blockeinstellungen Screenshot

Globale Einstellungsseite

Die globale Einstellungsseite ermöglicht es Ihnen, die Standardeinstellungen für Ihre Tabs/Accordions anzugeben. Mit Ausnahme der Icons können diese Einstellungen pro Instanz über die Blockeinstellungen geändert werden (siehe Dokumentation für die Blockeinstellungen oben). Es ist auch der Ort, an dem Sie den Lizenzschlüssel eingeben, wenn Sie die PRO-Version haben. Die folgenden Optionen sind nur auf der globalen Einstellungsseite verfügbar (für alle anderen Felder auf dieser Seite verweisen Sie bitte auf die Dokumentation für dieselben Felder oben).

Lizenz (Pro)

Mit der Pro-Version, bis Sie Ihren aktuellen gültigen Lizenzschlüssel eingeben, werden alle Profi-Felder nicht aktiviert. Um diese Felder zu aktivieren, aktivieren Sie Ihr Abonnement, indem Sie Ihre Lizenz in das Feld Lizenzschlüssel eingeben und auf Speichern klicken.

Wenn ein Abonnement abläuft, wird das Plugin weiterhin am Frontend rendern, aber alle ProPro-Felder werden nicht mehr editierbar sein.

Accordions Expand/Collapse Icons (Pro)

Diese Felder ermöglichen es Ihnen, das Icon für die Akkordeon-Elemente-Heads sowie die Icon Size zu konfigurieren.

Icon Größe (Pro)

Geben Sie eine gültige CSS-Messeinheit ein, um die maximale Breite und Höhe desSymbols zu steuern. Wenn es leer bleibt, wird dies auf .75rem gesetzt

Icon Typ (Pro)

Wählen Sie aus mehreren Typen:

  • Rotierendes Chevron: (Standard) Dies ist das Standardsymbol, ein Chevron, das sich dreht, wenn der Akkordeon-Artikel erweitert/zusammenbricht
  • Benutzerdefiniertes rotierendes Icons: Geben Sie Ihr eigenes Symbol an, das sich ähnlich wie das Standardsymbol dreht.
  • Zwei-Staaten-Ikone: Anstelle eines rotierenden Symbols können Sie zwei separate Symbole auswählen, eine für jeden Zustand (offen/geschlossen).

Für andere Optionen als den Standard „Rotierendes chevron“ gibt es ein paar Symbole, aus denen Sie aus Bequemlichkeit wählen können, aber Sie können auch jedes HTML verwenden, das Sie als Symbol verwenden möchten (z. B. ein svg Markup).

Screenshot of the global settings for the tabs/accordion plugin