Akkordeon

Die Akkordeon-Komponente zeigt verwandte Inhalte in einklappbaren Abschnitten an und ermöglicht Benutzern, Informationen schnell ein- oder auszublenden, um ein schlankes Erlebnis zu erzielen. Jedes Akkordeon kann mehrere Sek

Einrichten Ihres Akkordeons

1. Fügen Sie Abschnitte zu Ihrem Akkordeon hinzu

Zuerst erstellen Sie die einzelnen Abschnitte oder „Elemente“ für Ihr Akkordeon. Jedes Element fungiert als aufklappbarer Container, in den Sie den Inhalt platzieren, den Sie anzeigen möchten. Das macht die Accordion-Komponente so leistungsfähig: Sie sind nicht auf Text und Bilder beschränkt. Sie können jede andere Avonni Dynamic Component direkt in einen Akkordeonabschnitt ziehen und ablegen.

Möchten Sie eine detaillierte Datentabelle einfügen? Ziehen Sie eine Data Table-Komponente direkt in den Abschnitt. Müssen Sie Standorte visualisieren? Fügen Sie eine Kartenkomponente hinzu. Die Möglichkeiten sind endlos!

Um einen neuen Abschnitt hinzuzufügen, klicken Sie auf die Schaltfläche „Element hinzufügen“.

2: Passen Sie das Erscheinungsbild jedes Abschnitts an

Geben Sie Ihren Elementen das richtige Aussehen und Gefühl.

• Variante: Wählen Sie zwischen „Basis“ für ein Standardaussehen oder „Abgedunkelt“ für einen dezenten Hintergrundeffekt.

• Aufklappbare Symbole: Aktivieren oder deaktivieren Sie die Symbole, die anzeigen, ob ein Abschnitt erweitert oder eingeklappt ist.

• Symbolposition: Platzieren Sie die aufklappbaren Symbole auf der linken oder rechten Seite der Elementüberschrift.

3: Wählen Sie anfangs geöffnete(n) Abschnitt(e) (optional)

Dieser Schritt ermöglicht Ihnen zu steuern, welcher Akkordeonabschnitt (oder welche Abschnitte) beim ersten Laden der Komponente erweitert sind.

• Jeweils ein Abschnitt geöffnet: Wenn Ihr Akkordeon so eingestellt ist, dass jeweils nur ein Abschnitt geöffnet sein darf, und Sie hier mehrere Abschnitte auswählen, wird anfänglich nur der erste Abschnitt in Ihrer Liste geöffnet sein.

• Mehrere Abschnitte geöffnet: Um mehrere Abschnitte standardmäßig geöffnet zu haben, aktivieren Sie die Option „Erweiterung mehrerer Abschnitte zulassen“

---

Stil-Eigenschaften

Abstände

• Außenabstand (Margin):

  • Oben: Fügt Abstand hinzu Fügen Sie eine Columns-Komponente aus der Komponentenbibliothek dem Akkordeon.

  • Rechts: Fügt Abstand hinzu zum rechts des Akkordeons.

  • Unten: Fügt Abstand hinzu unterhalb dem Akkordeon.

  • Links: Fügt Abstand hinzu zum links des Akkordeons.

• Innenabstand (Padding):

  • Oben: Fügt Abstand hinzu innerhalb dem Akkordeon, oberhalb des Inhalts.

  • Rechts: Fügt Abstand hinzu innerhalb dem Akkordeon, rechts vom Inhalt.

  • Unten: Fügt Abstand hinzu innerhalb dem Akkordeon, unterhalb des Inhalts.

  • Links: Fügt Abstand hinzu innerhalb dem Akkordeon, links vom Inhalt

Rand

• Farbe: Legt die Farbe des Rahmens des Akkordeons fest.

• Größe: Legt die Dicke des Rahmens des Akkordeons fest (z. B. 1px, 2px).

• Stil: Legt den Rahmenstil fest (z. B. solid, dashed, dotted).

• Radius: Rundet die Ecken des Rahmens des Akkordeons ab (z. B. 5px für leicht abgerundete Ecken).

Größe

• Breite: Legt die Breite des Akkordeons fest.

• Höhe: Legt die Höhe des Akkordeons fest.

• Überlauf: Bestimmt, wie mit Inhalten umgegangen wird, die über die festgelegte Breite oder Höhe des Akkordeons hinausgehen (z. B. scroll, hidden).

Inhalt

• Hintergrundfarbe: Legt die Hintergrundfarbe des Inhaltsbereichs des Akkordeons fest.

• Horizontale Ausrichtung: Legt fest, wie der Inhalt innerhalb jedes Abschnitts horizontal ausgerichtet ist (z. B. links, zentriert, rechts)

Warum die Accordion-Komponente verwenden?

• Inhalte organisieren: Gruppieren Sie verwandte Informationen in überschaubare Abschnitte, um Lesbarkeit und Navigation zu verbessern.

• Platz sparen: Halten Sie lange Inhalte verborgen, bis sie benötigt werden, und reduzieren Sie so Unordnung auf der Seite.

• Benutzererlebnis verbessern: Bieten Sie eine klare und intuitive Möglichkeit für Benutzer, auf Informationen zuzugreifen.

• Visuelle Attraktivität steigern: Erstellen Sie ein strukturiertes und organisiertes Layout für Ihre Inhalte.

---

Beispielanwendungsfälle

• Häufig gestellte Fragen: Präsentieren Sie häufig gestellte Fragen mit ihren Antworten in kompakter Form.

• Produktdetails: Organisieren Sie Produktinformationen in Abschnitte wie „Beschreibung“, „Spezifikationen“ und „Bewertungen“.

• Schritt-für-Schritt-Anleitungen: Gliedern Sie komplexe Prozesse in überschaubare Schritte.

• Formulare: Gruppenbezogene Formularfelder werden in aufklappbare Abschnitte unterteilt, um die Organisation zu verbessern.

Durch die Nutzung der Accordion-Komponente können Sie benutzerfreundliche Oberflächen erstellen, die Informationen prägnant und ansprechend präsentieren.