TableOfContents
Aufklappbares Inhaltsverzeichnis mit Anker-Navigation. Die Komponente ist rein UI-seitig – die Einträge werden vom Aufrufer übergeben, das Scrollen bleibt appspezifisch.
Grundlegende Verwendung
Toggle-Button öffnet das Panel. Klick auf einen Eintrag löstOnEntryClick aus.
Panel offen: False
Letzter Klick: –
Ebenen (h2 / h3)
Einträge mitEbene == 3 werden eingerückt dargestellt.
Panel offen: False
Letzter Klick: –
Eigener Titel & HrefResolver
ÜberTitle kann die Überschrift geändert werden. HrefResolver steuert den href pro Eintrag.
MinEntries – unterhalb kein Rendering
MitMinEntries="5" und nur 2 Einträgen wird die Komponente komplett ausgeblendet.
Nicht sichtbar, weil nur 2 Einträge vorhanden sind (MinEntries=5).
TocParser – HTML parsen & id-Anker einfügen
TocParser.Extrahiere(html, out aufbereitetesHtml) extrahiert h2/h3-Überschriften,
fügt fehlende id-Attribute ein und gibt eine fertige List<TocEntry> zurück.
Eingabe-HTML:
<h2>Einführung</h2> <p>Ein einleitender Absatz.</p> <h2 id="vorhandene-id">Kapitel mit bestehender ID</h2> <h3>Unterabschnitt A</h3> <h3>Unterabschnitt B</h3> <h2>Fazit & Ausblick</h2>
Aufbereitetes HTML (mit id-Ankern):
<h2 id="einfuehrung">Einführung</h2> <p>Ein einleitender Absatz.</p> <h2 id="vorhandene-id">Kapitel mit bestehender ID</h2> <h3 id="unterabschnitt-a">Unterabschnitt A</h3> <h3 id="unterabschnitt-b">Unterabschnitt B</h3> <h2 id="fazit-ausblick">Fazit & Ausblick</h2>
Extrahierte Einträge (5 Stück):
h2
Einführung
#einfuehrungh2
Kapitel mit bestehender ID
#vorhandene-idh3
Unterabschnitt A
#unterabschnitt-ah3
Unterabschnitt B
#unterabschnitt-bh2
Fazit & Ausblick
#fazit-ausblick
← TableOfContents direkt mit den geparsten Einträgen
SKILL.md – Tableofcontents
---
name: TableOfContents
description: Onesown Blazor Komponente TableOfContents (Viewer). Verwende diesen Skill wenn du die TableOfContents-Komponente verwenden, konfigurieren oder debuggen moechtest.
---
# TableOfContents
**Namespace:** `Onesown.Blazor.Components`
**Kategorie:** Viewer
**Basisklasse:** `ComponentBase`
Aufklappbares Inhaltsverzeichnis mit Anker-Navigation. Rendert einen kompakten Toggle-Button (geschlossen) bzw. ein Seitenpanel mit allen Einträgen (offen). Rein UI-seitig – das Scrollen und das Erzeugen der Einträge bleibt Aufgabe des Aufrufers.
**Live-Demo:** https://components.schini.com/demo/tableofcontents
## Parameter
| Parameter | Typ | Standard | Beschreibung |
|---|---|---|---|
| ``Entries`` | ``List<TocEntry>`` | | Die anzuzeigenden Einträge (Pflicht). |
| ``IsOpen`` | ``bool`` | | Ob das Panel aufgeklappt ist. Unterstützt @bind-IsOpen. |
| ``IsOpenChanged`` | ``EventCallback<bool>`` | | Two-Way-Binding-Callback für IsOpen. |
| ``OnEntryClick`` | ``EventCallback<string>`` | | Wird mit der TocEntry.Id aufgerufen wenn ein Link geklickt wird. Der Aufrufer übernimmt das Scrollen. |
| ``HrefResolver`` | ``Func<string, string>`` | ``id => $"#{id}"`` | Liefert den href-Wert pro Eintrag. Standard: id => $"#{id}". |
| ``Title`` | ``string`` | ``"Inhaltsverzeichnis"`` | Überschrift des Panels. Standard: "Inhaltsverzeichnis". |
| ``MinEntries`` | ``int`` | ``1`` | Unterhalb dieser Anzahl wird die Komponente nicht gerendert. Standard: 1. |
## Hinweise
- Einfach: <TableOfContents Entries="@eintraege" @bind-IsOpen="_offen" OnEntryClick="ScrolleZu" />
- Eigener Href: HrefResolver="@(id => $"/seite#{id}")"
- Unterhalb von MinEntries wird gar nichts gerendert