Accordion
Kollabierbare Panels mit animiertem Ein-/Ausklappen. Standardmäßig ist immer nur ein Panel gleichzeitig geöffnet.
Grundaufbau
Einfaches Akkordeon – immer nur ein Panel offen (Standard).Blazor ist ein Web-Framework von Microsoft, das es ermöglicht, interaktive Web-UIs mit C# statt JavaScript zu erstellen.
Blazor Server führt den C#-Code auf dem Server aus und kommuniziert über SignalR mit dem Browser. Dadurch bleibt die App schlank im Browser.
Razor Components sind wiederverwendbare UI-Bausteine, die mit einer Kombination aus HTML-Markup und C#-Logik definiert werden.
AllowMultiple
Mehrere Panels können gleichzeitig geöffnet sein.Kann gleichzeitig mit Panel 1 geöffnet sein.
Alle drei Panels können gleichzeitig aufgeklappt werden.
AllowCollapse="false"
Mindestens ein Panel bleibt immer geöffnet – das aktive Panel kann nicht weggeklickt werden.Wenn dieses Panel geöffnet wird, schließt das erste – aber eines bleibt immer offen.
Disabled
Einzelne Items können deaktiviert werden.Dieses Panel kann normal geöffnet und geschlossen werden.
Dieser Inhalt ist nicht zugänglich.
Auch dieses Panel funktioniert normal.
Programmatische Steuerung
Alle Items per Button aufklappen oder zuklappen.Inhalt von Abschnitt A.
Inhalt von Abschnitt B.
Inhalt von Abschnitt C.
HeaderTemplate
Vollständig benutzerdefinierter Header mit beliebigem Inhalt.Der Header wird komplett über HeaderTemplate gesteuert – Title und Icon werden ignoriert.
Auch komplexere Header-Layouts sind mit HeaderTemplate möglich.
@bind-Expanded
Zustand einzelner Items extern lesen und setzen.Expanded-Zustand: False
Dieses Item hat kein externes Binding.
SKILL.md – Accordion
--- name: Accordion description: Onesown Blazor Komponente Accordion (Grouping). Verwende diesen Skill wenn du die Accordion-Komponente verwenden, konfigurieren oder debuggen moechtest. --- # Accordion **Namespace:** `Onesown.Blazor.Components` **Kategorie:** Grouping **Basisklasse:** `OoComponentBase` Akkordeon-Container der AccordionItem-Kindkomponenten verwaltet. Steuert das Ein- und Ausklappverhalten aller enthaltenen Items, unterstützt Einzel- und Mehrfachauswahl sowie programmatische Steuerung. **Live-Demo:** https://components.schini.com/demo/accordion ## Parameter | Parameter | Typ | Standard | Beschreibung | |---|---|---|---| | ``ChildContent`` | ``RenderFragment`` | | AccordionItem-Kindkomponenten des Akkordeons. | | ``AllowMultiple`` | ``bool`` | ``false`` | Erlaubt das gleichzeitige Öffnen mehrerer Items. Standard: false. | | ``AllowCollapse`` | ``bool`` | ``true`` | Erlaubt das vollständige Zuklappen aller Items. Bei false bleibt mindestens ein Item immer geöffnet. Standard: true. | ## Geerbte Parameter (OoComponentBase) Alle nicht deklarierten HTML-Attribute (``class``, ``style``, ``data-*``, ``aria-*``, ...) werden an das Root-Element weitergereicht. | Parameter | Typ | Standard | Beschreibung | |---|---|---|---| | ``Size`` | ``string`` | | Größe der Komponente. Mögliche Werte: OoSize.Xs, OoSize.Sm, OoSize.Md, OoSize.Lg, OoSize.Xl. Wird als CSS-Klasse am Root-Element gesetzt. | ## Hinweise - Natives HTML-Attribut class wird automatisch an das Root-Element weitergegeben - Natives HTML-Attribut style wird automatisch an das Root-Element weitergegeben - Alle weiteren nicht deklarierten Attribute (data-*, aria-*, id, tabindex, …) werden ebenfalls weitergereicht - Größe der Komponente via Size mit OoSize-Konstanten steuern (OoSize.Xs bis OoSize.Xl) - Grundaufbau: Accordion mit AccordionItem-Kindkomponenten für jedes Panel - Standardverhalten: immer nur ein Item gleichzeitig geöffnet (AllowMultiple="false") - Mehrere gleichzeitig öffnen: AllowMultiple="true" - Verhindern dass alles zugeklappt wird: AllowCollapse="false" – mindestens ein Item bleibt immer offen - Programmatisch steuern: CollapseAllAsync() und ExpandAllAsync() klappen alle Items zu/auf - Items können per @bind-Expanded am AccordionItem auch einzeln gesteuert werden