Accordion

Accordion in Storybook

Note: Es gibt veraltete Versionen dieser Komponente. Wechseln Sie zu einer Version, die älter als 10.0.x ist, um die entsprechende Dokumentation anzuzeigen.

Verwendung

Überblick

Accordion ist eine Komponente, die eine progressive Anzeige von Informationen ermöglicht. Accordions sind nützlich, wenn Sie große Mengen an Inhalten auf kleinem Raum darstellen müssen (z. B. auf mobilen Benutzeroberflächen oder im Seitenbereich). Sie bestehen aus vertikal angeordneten Kopfzeilen, die erweitert werden, um den zugehörigen Inhalt anzuzeigen. Mit Accordions können Benutzer selbst bestimmen, wie viele Informationen sie zu einem bestimmten Zeitpunkt auf dem Bildschirm sehen. Accordions können in Assistenten und mobilen Lösungen verwendet werden, bei denen der Platz begrenzt ist.

Zu verwenden

• Zum Anzeigen von Inhalten, die Benutzer auswählen und lesen können.
• Wenn der vertikale Platz begrenzt ist und nicht alle Inhalte auf einmal angezeigt werden müssen.
• Zum Organisieren zusammengehöriger Informationen.

Nicht zu verwenden

• Bei Inhalten, die zum Ausführen von Aufgaben wichtig sind.
• Beim Erstellen eines Menüs. Verwenden Sie stattdessen die Komponente für das Überlaufmenü.
• Wenn mehrere Accordions ineinander verschachtelt werden müssen. Verwenden Sie stattdessen die Komponente für die Strukturansicht.

Formatierung

Aufbau

Das Accordion besteht aus den folgenden Elementen:

1. Kopfzeile: Titel, der Benutzern einen Überblick über den Inhalt des jeweiligen Bereichs gibt.
2. Chevron: Symbol, das den Status des Accordion angibt (erweitert oder reduziert).
3. Hauptinhalt: Zugehöriger Inhalt, der beim Erweitern der Accordion-Kopfzeile angezeigt wird. Kann Text oder Benutzeroberflächenelemente (z. B. ein Eingabefeld) enthalten.
4. Trennlinie: Visuelles Trennzeichen zur Unterscheidung der Accordion-Elemente. Sollte standardmäßig sichtbar sein und optional ausgeblendet werden können.

Ausrichtung und Positionierung

Standardmäßig befindet sich das Chevron-Symbol auf der rechten Seite (am Ende) der Kopfzeile. So kann der Accordion-Titel an anderen Inhalten auf der Seite ausgerichtet werden. Die Position des Symbols (links oder rechts) muss auf allen Seiten innerhalb einer Anwendung einheitlich sein.

Das Accordion muss die gesamte Breite des übergeordneten Containers einnehmen. Ändern Sie die Breite des Containers, um die Breite des Accordion zu ändern.

Passen Sie die Breite des Accordion an die Breite des übergeordneten Containers an.

Das Accordion sollte nicht schmaler als der übergeordnete Container sein.

Inhalt

Allgemeine Richtlinien fürs Schreiben

• Verwenden Sie die Großschreibung des ersten Worts und von Substantiven für alle Aspekte der Gestaltung von Guidewire-Produktschnittstellen. Schreiben Sie nicht alles groß.
• Verwenden Sie in den meisten Situationen Verben im Präsens und im Aktiv.
• Verwenden Sie gebräuchliche Abkürzungen, um Ihrem Text einen natürlichen und informellen Ton zu verleihen.
• Verwenden Sie eine einfache Sprache. Vermeiden Sie unnötigen Jargon und komplexe Sprache.
• Halten Sie Wörter und Sätze kurz.

Accordion-Kopfzeile

Die Accordion-Kopfzeile kann Folgendes enthalten:

• Text (Kopfzeilentitel und sekundärer Text).
• Symbol (Wenn sich das Chevron auf der rechten Seite befindet, können Sie ein Symbol vor dem Titel der Kopfzeile positionieren. Wenn sich das Chevron auf der linken Seite befindet, positionieren Sie das Symbol am Ende der Accordion-Kopfzeile).

Die Accordion-Kopfzeile kann Text, Symbole und andere nicht interaktive Elemente enthalten.

Fügen Sie keine interaktiven Elemente, z. B. Schaltflächen, in der Accordion-Kopfzeile ein. Dies beeinträchtigt die Barrierefreiheit.

Jede Accordion-Kopfzeile muss einen eindeutigen Titel enthalten, der den zugehörigen Hauptinhalt klar und prägnant beschreibt. Kopfzeilen werden in der üblichen Groß- und Kleinschreibung angezeigt, mit Ausnahme von Eigennamen.

Accordion-Hauptteil

• Inhalte in Accordions sollten nie horizontal gescrollt werden.
• Bei Bedarf können Sie die Inhalte eines Accordion-Bereichs in Absätze unterteilen und untergeordnete Kopfzeilen einfügen.

Wort- und Zeichenbeschränkungen

Es gelten keine Beschränkungen für Zeichen oder Wörter in der Kopfzeile oder im Hauptinhalt.

Verhalten

Zustände

Die Accordion-Komponente hat 2 Hauptzustände: reduziert und erweitert.

• Reduziert: Standardzustand, wenn das Accordion reduziert und nicht ausgewählt ist. Geschlossene Accordions werden ohne Hervorhebung und nur mit dem Titel der Kopfzeile angezeigt.
• Erweitert: Gibt an, dass der Benutzer das Accordion ausgewählt und zum Anzeigen von Inhalten erweitert hat. Das Chevron-Symbol zeigt nach unten, um anzugeben, dass das Accordion erweitert ist.

Zusätzlich zum reduzierten und erweiterten Zustand verfügen Accordions auch über interaktive Zustände für aktiviert, deaktiviert, schwebend, fokussiert und aktiv.

	Zustand	Beschreibung
	Aktiviert	Standardzustand.
	Deaktiviert	Gibt an, dass das Accordion nicht interaktiv ist, es aber zu einem bestimmten Zeitpunkt sein kann. Der Zustand „Deaktiviert“ ist nicht dafür gedacht, barrierefrei zu sein, daher darf er nicht fokussiert werden.
	Schwebend	Gibt eine Stiländerung an, wenn der Benutzer mit dem Mauszeiger auf die Kopfzeile des Accordion zeigt.
	Fokussiert	Gibt an, dass der Benutzer das Accordion ausgewählt (aber nicht erweitert) hat. Die Ränder der Komponente sind in unserer Markenfarbe hervorgehoben.
	Aktiv	Gibt an, dass der Benutzer auf das Element klickt oder tippt.

Interaktionen

Maus

Wenn ein Benutzer durch Klicken ein neues Accordion-Element öffnet, bleiben die bereits geöffneten Elemente weiterhin geöffnet. Jede Interaktion erfordert einen Benutzerklick, um eine Desorientierung in der Benutzeroberfläche zu verhindern. Benutzer können das Accordion reduzieren oder erweitern, indem sie auf das Chevron oder auf eine beliebige Stelle im Kopfzeilenbereich klicken.

Tastatur

Die Accordion-Kopfzeile dient als Schaltfläche. Mit der Eingabetaste und der Leertaste lassen sich die einzelnen Accordion-Bereiche erweitern und reduzieren. Mit Tab und Umschalt+Tab kann durch die fokussierbaren Accordion-Elemente navigiert werden.

Screenreader

Wenn das Accordion reduziert ist, ist der Inhalt des Accordion-Bereichs ausgeblendet. Der WAI-ARIA-Zustand aria-expanded="false" gibt für Benutzer an, dass der Bereich nicht sichtbar ist. Wenn das Accordion erweitert ist, ändert sich das ARIA-Attribut in „true“, um anzugeben, dass der Inhalt sichtbar ist.

Barrierefreiheit

Diese Komponente wurde validiert, um die Richtlinien für Barrierefreiheit WCAG 2.2 AA in der Standardbasiskonfiguration zu erfüllen. Dazu wird u. a. Folgendes sichergestellt:

• Das Kontrastverhältnis von Textelementen zu ihrem Hintergrund liegt über 4,5:1.
• Nicht-textuelle Inhalte, die eine Bedeutung vermitteln sollen (z. B. Symbole und Fokusanzeigen), weisen ein Kontrastverhältnis von mindestens 3:1 zu den angrenzenden Farben auf.
• Das jeweilige Element kann sowohl über eine Tastatur als auch über eine Maus bedient werden.
• Der Zugriff auf die Inhalte erfolgt über Screenreader wie JAWS oder VoiceOver.

Die Konformität mit den Richtlinien für Barrierefreiheit hängt letztendlich davon ab, wie diese Komponente implementiert und angepasst wird. Vom Autor des Inhalts vorgenommene Änderungen können sich auf die Barrierefreiheit auswirken. Details zu unserem Modell der geteilten Verantwortung finden Sie in unserer Erklärung zur Barrierefreiheit von Jutro.

Beachten Sie die folgenden Anweisungen und auch die WAI-ARIA Authoring Practices for Accordions, wenn Sie diese Komponente in Ihren Anwendungen verwenden:

• Jede Accordion-Kopfzeile muss einen eindeutigen Titel enthalten, der den Inhalt des Accordion-Bereichs beschreibt. Dies hilft vor allem blinden Benutzern, da sie durch die einzelnen Kopfzeilen navigieren und den Inhalt verstehen können, ohne jeden Bereich erweitern zu müssen.
• Achten Sie darauf, dass es keine Tastaturfallen gibt, wenn Inhalte zum Accordion-Bereich hinzugefügt werden. Benutzer müssen in der Lage sein, zu jedem fokussierbaren Element innerhalb jedes Bereichs und anschließend zur nächsten Accordion-Kopfzeile zu wechseln.

Note: Es gibt veraltete Versionen dieser Komponente. Wechseln Sie zu einer Version, die älter als 10.0.x ist, um die entsprechende Dokumentation anzuzeigen.

Code

<Accordion>
  <AccordionCard title="Card 1">Test card</AccordionCard>
  <AccordionCard title="Card 2">Test card 2</AccordionCard>
  <AccordionCard
    disabled
    title="Card 3">
    Test card 3
  </AccordionCard>
</Accordion>

Importanweisung

import { Accordion, AccordionCard } from '@jutro/components';

Komponentenvertrag

Vergewissern Sie sich, dass Sie die API-Oberfläche der Design System-Komponenten und die damit verbundenen Auswirkungen und Kompromisse verstehen. Erfahren Sie mehr in unserer Einführung zur Komponenten-API.

Eigenschaften

Accordion

childrenerforderlich

Typ

AccordionCard | AccordionCard[]

Beschreibung

Accepts one or many AccordionCards that will be rendered in context of this Accordion container.

chevronPosition

Typ

'left' | 'right'

Beschreibung

Sets the position of the chevron icon for all the AccordionCards in the container.

Standardwert

'right'

className

Typ

string

Beschreibung

CSS class name for this component.

hideDivider

Typ

boolean

Beschreibung

If set to true, the dividers between AccordionCards in the container will be hidden.

AccordionCard

titleerforderlich

Typ

IntlMessageShape

Beschreibung

Message rendered as the title for the AccordionCard. If the dangerouslySetHeader property is provided, it becomes optional and won't be rendered by default.

className

Typ

string

Beschreibung

CSS class name for this component.

dangerouslySetHeader

Typ

ReactNode

Beschreibung

Custom header component to be displayed in the AccordionCard instead of title. It takes precedence over title prop when both are defined.

disabled

Typ

boolean

Beschreibung

If set to true, the entire AccordionCard component will be disabled and proper styles will be applied.

initialExpanded

Typ

boolean

Beschreibung

If set to true, the AccordionCard will be expanded on initial load.

Übergeben von HTML-Eigenschaften an die AccordionCard-Komponente

AccordionCard rendert im Hintergrund ein natives HTML-Button-Element. Wenn eine HTML-Eigenschaft des standardmäßigen HTML-Button-Elements nicht bereits Teil der AccordionCard-Komponente ist, können Sie sie an die Komponente übergeben. Sie wird dann der internen HTML-Button-Komponente zugewiesen.

<AccordionCard
  title="Card title"
  id="accordion-card-1"
/>

Durch die Übergabe dieser id-Eigenschaft wird diese Teil des HTML-Button-Elements, das im HTML-DOM erstellt wird.

Hooks

useAccordionCardState: Enthält Eigenschaften aus dem Kontext von AccordionCard, die zum Erstellen benutzerdefinierter AccordionCard-Kopfzeilen verwendet werden können. Der Hook gibt einen Wert zurück, der ein Objekt mit folgendem Inhalt darstellt:

disablederforderlich

Typ

boolean

Beschreibung

Whether the AccordionCard is currently disabled.

expandederforderlich

Typ

boolean

Beschreibung

Whether the AccordionCard is currently expanded.

titleerforderlich

Typ

string

Beschreibung

Value of the AccordionCard's text property.

const CustomHeader = () => {
  const { expanded, disabled, title } = useAccordionCardState();

  return (...);
};

Übersetzungsschlüssel

Es gibt keine Übersetzungen für Accordion.

Informationen über die Verwaltung von Übersetzungen finden Sie in unserem Abschnitt über Internationalisierung.

Escape Hatches

Weitere Informationen finden Sie in unserer Dokumentation über Escape Hatches.

Information zu älteren Komponenten

Verwenden Sie die ältere Accordion-Komponente?

• Um die entsprechende Dokumentation für die alten Komponenten anzuzeigen, wechseln Sie zu einer Version der Dokumentation, die älter als 10.0 ist.

• Die folgenden älteren Komponenten sind auch in Storybook verfügbar:

  • Accordion

Note: Es gibt veraltete Versionen dieser Komponente. Wechseln Sie zu einer Version, die älter als 10.0.x ist, um die entsprechende Dokumentation anzuzeigen.

Beispiele

Einfaches Accordion

<Accordion>
  <AccordionCard title="Card 1">Test card</AccordionCard>
  <AccordionCard
    title="Card 2"
    initialExpanded>
    Card initially open
  </AccordionCard>
  <AccordionCard
    disabled
    title="Card 3">
    Test card 3
  </AccordionCard>
</Accordion>

Die Komponenten Accordion und AccordionCard sind im Paket @jutro/components verfügbar. Nur AccordionCard kann in Accordion eingefügt werden. Für AccordionCard muss immer eine title- oder eine dangerouslyRenderHeader-Eigenschaft festgelegt sein, die Verwendung der letzteren wird jedoch nicht empfohlen.

Anpassung der Accordion-Darstellung

<Accordion
  chevronPosition="left"
  hideDivider>
  <AccordionCard title="Card 1">Test card</AccordionCard>
  <AccordionCard title="Card 2">Test card 2</AccordionCard>
  <AccordionCard
    disabled
    title="Card 3">
    Test card 3
  </AccordionCard>
</Accordion>

Wenn Sie die Eigenschaft hideDivider verwenden, können Sie alle Trennzeichen ausblenden. Die Position des Chevron ist auf die Optionen left und right beschränkt. Beide werden auf Accordion-Ebene festgelegt.

Accordion-Karten mit benutzerdefinierten Kopfzeilen

.customHeaderContainer {
  display: flex;
  align-items: center;
}

.customHeaderIcon {
  margin-right: 8px;
}

import {
  Accordion,
  AccordionCard,
  useAccordionCardState,
} from '@jutro/components';

const CustomHeader1 = () => {
  const { expanded, title } = useAccordionCardState();

  return (
    <div className={styles.customHeaderContainer}>
      {expanded ? `Expanded ${title}` : `Collapsed ${title}`}
    </div>
  );
};

const CustomHeader2 = () => {
  const { expanded } = useAccordionCardState();

  return (
    <div className={styles.customHeaderContainer}>
      {expanded ? (
        <Icon
          icon="gw-add"
          className={styles.customHeaderIcon}
        />
      ) : (
        <Icon
          icon="gw-alarm"
          className={styles.customHeaderIcon}
        />
      )}
      Custom rendered card header
    </div>
  );
};

<Accordion>
  <AccordionCard title="Card 1">Test card</AccordionCard>
  <AccordionCard
    title="custom card header"
    dangerouslySetHeader={<CustomHeader1 />}>
    I'm basic but custom
  </AccordionCard>
  <AccordionCard
    dangerouslySetHeader={<CustomHeader2 />}
    initialExpanded
    onFocus={() =>
      console.log(
        "I'm a custom attribute of a button added to be triggered on accordion card button focus"
      )
    }>
    I'm so custom
  </AccordionCard>
</Accordion>;

dangerouslySetHeader ermöglicht eine größere Flexibilität bei Kopfzeileninhalten, allerdings wird empfohlen, diese Eigenschaft nicht übermäßig zu verwenden.

Änderungsprotokoll

10.0.0

Es wurde eine neue @jutro/components/Accordion-Komponente eingeführt, welche die vorherige ersetzt.

Die früheren Accordion-bezogenen Komponenten wurden abgekündigt und in das @jutro/legacy-Paket verschoben. Um die entsprechende Dokumentation anzuzeigen, wechseln Sie zu einer Version der Dokumentation, die älter als 10.0 ist.

Ursprüngliche Speicherorte der Komponenten:

• AccordionCard: @jutro/components/Accordion
• AccordionCard: @jutro/components/AccordionCard

Neue Speicherorte der Komponenten:

• Accordion: @jutro/legacy/components/Accordion
• AccordionCard: @jutro/legacy/components/AccordionCard

Es gibt Codemods, mit denen Sie vorhandene Importe automatisch umbenennen können.