Accordion Component

Die Accordion-Komponente erstellt zusammenklappbare Inhaltsabschnitte, die dabei helfen, Informationen platzsparend zu organisieren. Benutzer können auf die Kopfzeile klicken, um den Inhalt zu erweitern oder zu reduzieren.

Props

Prop	Type	Required	Description
type	Zeichenfolge	Nein	Datenattribut für Styling oder JavaScript-Targeting
question	Zeichenfolge	Ja	Der im Akkordeon
answer	string/HTML	Ja	Der Inhalt, der angezeigt wird, wenn Akkordeon erweitert wird

Features

• Interactive Toggle - Click to expand/collapse content
• Symbolanimation – Das Plussymbol dreht sich, wenn es umgeschaltet wird
• Responsive Design - Works on all screen sizes
• Custom Styling - Supports theme customization
• Accessible - Keyboard navigation support

Usage Examples

Basic Accordion

import Accordion from "../../../../components/user-components/Accordion.astro";

<Accordion
  question="What is Dockit?"
  answer="Dockit is a modern documentation theme built with Astro and Starlight."
/>

Accordion with Type

import Accordion from "../../../../components/user-components/Accordion.astro";

<Accordion
  type="faq"
  question="How do I customize the theme?"
  answer="You can customize colors, fonts, and layout through the configuration files."
/>

Multiple Accordions

import Accordion from "../../../../components/user-components/Accordion.astro";

<Accordion
  question="Installation"
  answer="Führen Sie npm install aus, um mit Dockit zu beginnen."
/>

<Accordion
  question="Configuration"
  answer="Edit the astro.config.mjs file to customize your site."
/>

<Accordion
  question="Deployment"
  answer="Deploy to Netlify, Vercel, or any static hosting provider."
/>

Styling

Die Komponente enthält integrierte Stile mit Unterstützung für:

• Helle und dunkle Themenvarianten
• Schwebe- und Fokuszustände
• Smooth animations
• Benutzerdefinierte Abstände und Typografie

Best Practices

• Use clear, concise questions as headers
• Sorgen Sie dafür, dass der Inhalt der Antworten fokussiert und lesbar ist
• Group related accordions together
• Verwenden Sie die type-Requisite für ein einheitliches Styling bei ähnlichen Akkordeons