Akkordeons

Einklappbare Komponenten zum Anzeigen und Verbergen von Inhalten

Akkordeons ermöglichen es Nutzerinnen und Nutzern, Inhaltsbereiche ein- und auszuklappen. Verwenden Sie Akkordeons für schrittweise Offenlegung und zur Strukturierung von Informationen.

Einzelnes Accordion

Ich bin ein Accordion.

Du kannst hier beliebige Inhalte einfügen, einschließlich anderer Komponenten wie Code:

HelloWorld.java

 class HelloWorld {
     public static void main(String[] args) {
         System.out.println("Hello, World!");
     }
 }

Accordion example

<Accordion title="Ich bin ein Accordion.">
  Du kannst hier beliebige Inhalte einfügen, einschließlich anderer Komponenten wie Code:

   ```java HelloWorld.java
    class HelloWorld {
        public static void main(String[] args) {
            System.out.println("Hello, World!");
        }
    }
  ```
</Accordion>

Akkordeon-Gruppen

Gruppieren Sie verwandte Akkordeons mit <AccordionGroup>. So entsteht ein zusammenhängender Abschnitt mit Akkordeons, die sich jeweils einzeln aus- oder einklappen lassen.

Erste Schritte

In Akkordeons können Sie auch andere Komponenten verwenden.

HelloWorld.java

class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello, World!");
    }
}

Erweiterte Funktionen

Fügen Sie Icons hinzu, um Akkordeons visuell unterscheidbarer und leichter erfassbar zu machen.

Fehlerbehebung

Halten Sie zusammengehörige Inhalte in Gruppen organisiert.

Accordion Group Example

<AccordionGroup>
  <Accordion title="Getting started">
    You can put other components inside Accordions.

    ```java HelloWorld.java
    class HelloWorld {
        public static void main(String[] args) {
            System.out.println("Hello, World!");
        }
    }
    ```
  </Accordion>

  <Accordion title="Advanced features" icon="alien-8bit">
    Add icons to make accordions more visually distinct and scannable.
  </Accordion>

  <Accordion title="Troubleshooting">
    Keep related content organized into groups.
  </Accordion>
</AccordionGroup>

Eigenschaften

title · string · required

Titel in der Akkordeon-Vorschau.

description · string

Detail unter dem Titel in der Akkordeon-Vorschau.

defaultOpen · boolean · default: "false"

Ob das Akkordeon standardmäßig geöffnet ist.

icon · string

Das anzuzeigende Icon.

Optionen:

• Name eines Font Awesome-Icons
• Name eines Lucide-Icons
• JSX-kompatibler SVG-Code in geschweiften Klammern
• URL zu einem extern gehosteten Icon
• Pfad zu einer Icon-Datei in deinem Projekt

Für benutzerdefinierte SVG-Icons:

1. Konvertiere dein SVG mit dem SVGR-Konverter.
2. Füge deinen SVG-Code in das SVG-Eingabefeld ein.
3. Kopiere das vollständige <svg>...</svg>-Element aus dem JSX-Ausgabefeld.
4. Umschließe den JSX-kompatiblen SVG-Code mit geschweiften Klammern: icon={<svg ...> ... </svg>}.
5. Passe height und width nach Bedarf an.

iconType · string

Der Iconstil von Font Awesome. Wird nur mit Font Awesome-Icons verwendet.

Optionen: regular, solid, light, thin, sharp-solid, duotone, brands.