Wie lege ich ein Accordion an?

Accordions sind interaktive Elemente auf einer Webseite, die es dem Benutzer ermöglichen, zusätzlichen Inhalt auf einer Seite anzuzeigen oder auszublenden, indem er auf eine Schaltfläche klickt. Accordions können verwendet werden, um den Inhalt einer Webseite besser zu organisieren, indem sie dem Benutzer eine Möglichkeit bieten, zwischen verschiedenen Abschnitten oder Optionen zu wählen, ohne dass er sich durch eine lange Liste von Informationen scrollen muss. Ein häufiges Beispiel für die Verwendung von Accordions ist in den FAQ-Bereichen von Webseiten. Wenn der Benutzer eine Frage anklickt, wird der zugehörige Antworttext angezeigt. Dies kann dazu beitragen, die Seite übersichtlicher zu gestalten und das Finden von Informationen zu erleichtern.Wie Sie ebenfalls ein solches Accordion erstellen können, wurde in einigen Schritten zusammengefasst: 

1. Klicken Sie in der Navigationsleiste auf Application
2. Wählen Sie die Application aus, dessen Header-Komponente angepasst werden soll
3. Nachdem Sie auf die Application geklickt haben, öffnet sich die Übersichtsseite der Application
4. Klicken Sie auf Widgets im Abschnitt Einstellungen auf der rechten Seite
5. Sie gelangen auf die Übersichtsseite der Widgets
6. Klicken Sie auf den Button + Neu, um ein neues Widget anzulegen
7. Es öffnet sich das Fenster Create Widget
8. Geben Sie den Namen des Widgets ein
9. Wählen Sie bei Widget Type das Accordion aus
10. Klicken Sie auf + Add um das Widget hinzuzufügen
11. Klicken Sie auf das erstellte Accordion-Widget

Accordion-Daten hinterlegen

1. Klicken Sie auf den Namen des Widgets und anschließend auf das Zahnrad oben rechts im Application Builder und Hinterlegen Sie eine Quelle, um nachvollziehen zu können, wie Sie das Widget gestalten
2.  Für ein Accordion-Widget benötigen Sie z. B. ein Fließtext-Fließtext-Bundle im Datenobjekt. Dieses können Sie im Feld Dynamic Data unter Bundle auswählen.

Accordion Header

1. Klicken Sie auf den Dropdown-Pfeil bei Head und fügen Sie ein Accordion Header Element mit + Element hinzu
2. Wählen Sie den Text im Feld text aus, der ausgegeben werden soll
3. Wählen Sie im Feld openIcon ein öffnen Icon aus, um das Accordion zu öffnen z. B. +
4. Wählen Sie im Feld closeIcon ein schließen Icon aus, um das Accordion zu schließen z. B. x
5. Wählen Sie einen Navigationsstyle im Feld navigationStyle aus, den Sie für das Accordion verwenden möchten
6. Wählen Sie die Position der Icons im Feld iconPositionaus
   1. right, zeigt das Icon auf der rechten Seite an
   2. left, zeigt das Icon auf der linken Seite an

Accordion Content

1. Klicken Sie auf den Dropdown-Pfeil bei Content und fügen Sie ein Text-Element mit + Element hinzu
2. Wählen Sie den Text im Feld text aus, der ausgegeben werden soll
3. Sie können den Content im Feld Style mapping anpassen

Das könnte Sie auch Interessieren