Zum Hauptinhalt springen

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.

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