Basis – TabStrip - FMH.Komponente.WebUI

Deaktivierter Reiter mit Tooltip

DisableIf(...) sperrt einen Reiter abhängig von einer Bedingung und begründet die Sperre im Tooltip.

@* DisableIf(bedingung, tooltip) sperrt einen Reiter nur, wenn die Bedingung zutrifft, und begründet
   die Sperre im Tooltip. TabDisabled() sperrt bedingungslos. Gesperrte Reiter bleiben sichtbar –
   der Benutzer sieht also, dass es den Schritt gibt. *@
@{
    var istFreigegeben = false;

    var tabstrip = Fmh.TabStrip()
        .Id("tabstripDeaktiviert")
        .Tabs(tabs =>
        {
            tabs.Add("Antrag")
                .Content(@<p class="mt-3 mb-0">Der Antrag ist erfasst und kann bearbeitet werden.</p>);

            tabs.Add("Freigabe")
                .DisableIf(istFreigegeben == false, "Erst nach dem Absenden des Antrags verfügbar.")
                .Content(@<p class="mt-3 mb-0">Freigabe-Schritt.</p>);

            tabs.Add("Archiv")
                .TabDisabled()
                .Tooltip("Für diese Rolle nicht freigeschaltet.")
                .Content(@<p class="mt-3 mb-0">Archiv-Ansicht.</p>);
        });
}

@Html.Fmh(tabstrip)

Darstellung

Der Antrag ist erfasst und kann bearbeitet werden.

Freigabe-Schritt.

Archiv-Ansicht.

Der TabStripBuilder wird über Fmh.TabStrip() erzeugt und mit @Html.Fmh(...) gerendert. Er erzeugt die Reiterleiste und die zugehörigen Inhaltsbereiche (Bootstrap-Tabs):

@{
    var tabstrip = Fmh.TabStrip()
        .Id("tabstripAntrag")
        .SelectedIndex(1)
        .Tabs(tabs =>
        {
            tabs.Add("Übersicht").Content(@<p>Erster Reiter.</p>);
            tabs.Add("Details").Content(@<p>Zweiter Reiter.</p>);
        });
}

@Html.Fmh(tabstrip)

Standardwerte ohne weitere Angabe: Id ts-<Guid>, offener Reiter der erste (SelectedIndex(0)).

Methoden des TabStrips

Methode	Erklärung
`.Id(string)`	Id der Reiterleiste. Sie bestimmt auch den Namen des Klick-Ereignisses (siehe unten) — für eine Auswertung im Skript also fest vergeben.
`.Tabs(Action<TabCollection>)`	Sammelt die Reiter. Über `tabs.Add("Titel")` entsteht ein `Tab`, dessen Methoden sich verketten lassen.
`.SelectedIndex(int)`	Nullbasierter Index des offenen Reiters.

Methoden eines Reiters

Methode	Erklärung
`.Title(string)`	Beschriftung — setzt bereits `tabs.Add("…")`.
`.Content(Func<object, HelperResult>)`	Der Inhalt als Razor-Vorlage (`@<div>…</div>` oder `@<text>…</text>`). Pflicht: Ein Reiter ohne Inhalt führt beim Rendern zu einer `NullReferenceException`.
`.Id(string)`	Eigene Id; daraus entstehen `<Id>-tab` und `<Id>-content`. Ohne Angabe `tab-<Guid>`.
`.Tooltip(string)`	Titel-Tooltip am Reiter.
`.TabDisabled()`	Sperrt den Reiter (Klasse `fmh-link-disabled`).
`.DisableIf(bool, string tooltip)`	Sperrt nur, wenn die Bedingung zutrifft, und begründet die Sperre im Tooltip.
`.TabAttributes(object)` / `.ContentAttributes(object)`	Zusätzliche HTML-Attribute für Reiter bzw. Inhaltsbereich (anonymes Objekt, `@class` für die CSS-Klasse).

Klick-Ereignis

Bei jedem Klick auf einen Reiter löst der TabStrip auf document ein CustomEvent mit dem Namen <Id>Click aus — bei Id("tabstripAntrag") also tabstripAntragClick. Im detail stehen:

Feld	Inhalt
`id`	Id des Reiter-Links (`<TabId>-tab`)
`contentId`	Id des Inhaltsbereichs (`<TabId>-content`)
`label`	Beschriftung des Reiters
`index`	Position des Reiters (als Zeichenkette)

document.addEventListener('tabstripAntragClick', function (event) {
    console.log(event.detail.label, event.detail.index);
});

Das eignet sich, um Inhalte erst beim Öffnen eines Reiters nachzuladen. Bootstrap selbst meldet den Wechsel zusätzlich über shown.bs.tab.

Weil das Ereignis auf document liegt, darf der Listener registriert werden, bevor der TabStrip im DOM steht — die Reihenfolge von Skript und Markup spielt keine Rolle. Beim Beispiel «Klick-Ereignis auswerten» zeigt der Code-Tab JavaScript die vollständige Umsetzung; die Datei liegt unter wwwroot/js/demos/ und wird vom Beispiel per <script src> geladen. Der Tab jQuery zeigt dieselbe Umsetzung mit jQuery — dort kommt detail über das jQuery-Event (jQuery 3 kopiert die Eigenschaft; ältere Fassungen brauchen event.originalEvent.detail).

Was zu beachten ist

Gesperrte Reiter bleiben sichtbar — der Benutzer sieht also, dass es den Schritt gibt. Mit Tooltip lässt sich begründen, warum er noch nicht offen ist.
Der Inhalt aller Reiter wird gerendert, auch der geschlossenen. Teure Inhalte deshalb erst über das Klick-Ereignis nachladen.
Die Ids müssen auf der Seite eindeutig sein; bei mehreren TabStrips je eigene Id(...) vergeben.

Klick-Ereignis auswerten

Jeder Reiterwechsel löst ein CustomEvent mit der Id des TabStrips aus – hier abgefangen und angezeigt. Der Tab „JavaScript“ zeigt den Listener.

@* Jeder Klick auf einen Reiter löst auf document ein CustomEvent namens "<Id>Click" aus – hier also
   "tabstripKlickClick". Im detail stehen id, contentId, label und index des Reiters.
   Der Listener steht im Tab "JavaScript" (wwwroot/js/demos/tabstrip-klick.js). *@
@{
    var tabstrip = Fmh.TabStrip()
        .Id("tabstripKlick")
        .Tabs(tabs =>
        {
            tabs.Add("Stammdaten")
                .Content(@<p class="mt-3 mb-0">Erster Reiter.</p>);

            tabs.Add("Kontakt")
                .Content(@<p class="mt-3 mb-0">Zweiter Reiter.</p>);

            tabs.Add("Dokumente")
                .Content(@<p class="mt-3 mb-0">Dritter Reiter.</p>);
        });
}

@Html.Fmh(tabstrip)

<p class="small mt-3 mb-0" data-tabstrip-ausgabe>Noch kein Reiterwechsel – ein Klick auf einen Reiter meldet sich hier.</p>

<script src="~/js/demos/tabstrip-klick.js" asp-append-version="true"></script>

// Demo "Basis › Ui › Controls › TabStrip": Auswertung des Klick-Ereignisses.
//
// Der TabStrip löst bei jedem Reiterklick auf document ein CustomEvent mit dem Namen "<Id>Click"
// aus – bei Id("tabstripKlick") also "tabstripKlickClick". Im detail stehen id (Id des
// Reiter-Links), contentId (Id des Inhaltsbereichs), label (Beschriftung) und index (Position).
//
// Weil das Ereignis auf document liegt, spielt es keine Rolle, wann der TabStrip im DOM erscheint –
// der Listener darf vorher registriert werden.
document.addEventListener('tabstripKlickClick', function (event) {
    var ausgabe = document.querySelector('[data-tabstrip-ausgabe]');
    if (ausgabe === null) {
        return;
    }

    ausgabe.textContent = 'Reiter «' + event.detail.label + '» (Index ' + event.detail.index
        + ', Id ' + event.detail.id + ', Inhalt ' + event.detail.contentId + ')';
});

// jQuery-Variante zum Beispiel «Klick-Ereignis auswerten» – dasselbe wie im Tab "JavaScript",
// nur mit jQuery geschrieben. Diese Datei wird von der Demo-Seite NICHT geladen; sonst liefe der
// Listener doppelt. Sie ist als Vorlage zum Übernehmen gedacht.
$(document).on('tabstripKlickClick', function (event) {
    // jQuery kopiert detail vom nativen Event auf sein eigenes Event-Objekt (jQuery 3).
    // Bei älteren Versionen führt der Weg über event.originalEvent.detail.
    var detail = event.detail;

    $('[data-tabstrip-ausgabe]').text(
        'Reiter «' + detail.label + '» (Index ' + detail.index
        + ', Id ' + detail.id + ', Inhalt ' + detail.contentId + ')');
});

Darstellung

Erster Reiter.

Zweiter Reiter.

Dritter Reiter.

Noch kein Reiterwechsel – ein Klick auf einen Reiter meldet sich hier.

Der TabStripBuilder wird über Fmh.TabStrip() erzeugt und mit @Html.Fmh(...) gerendert. Er erzeugt die Reiterleiste und die zugehörigen Inhaltsbereiche (Bootstrap-Tabs):

@{
    var tabstrip = Fmh.TabStrip()
        .Id("tabstripAntrag")
        .SelectedIndex(1)
        .Tabs(tabs =>
        {
            tabs.Add("Übersicht").Content(@<p>Erster Reiter.</p>);
            tabs.Add("Details").Content(@<p>Zweiter Reiter.</p>);
        });
}

@Html.Fmh(tabstrip)

Standardwerte ohne weitere Angabe: Id ts-<Guid>, offener Reiter der erste (SelectedIndex(0)).

Methoden des TabStrips

Methode	Erklärung
`.Id(string)`	Id der Reiterleiste. Sie bestimmt auch den Namen des Klick-Ereignisses (siehe unten) — für eine Auswertung im Skript also fest vergeben.
`.Tabs(Action<TabCollection>)`	Sammelt die Reiter. Über `tabs.Add("Titel")` entsteht ein `Tab`, dessen Methoden sich verketten lassen.
`.SelectedIndex(int)`	Nullbasierter Index des offenen Reiters.

Methoden eines Reiters

Methode	Erklärung
`.Title(string)`	Beschriftung — setzt bereits `tabs.Add("…")`.
`.Content(Func<object, HelperResult>)`	Der Inhalt als Razor-Vorlage (`@<div>…</div>` oder `@<text>…</text>`). Pflicht: Ein Reiter ohne Inhalt führt beim Rendern zu einer `NullReferenceException`.
`.Id(string)`	Eigene Id; daraus entstehen `<Id>-tab` und `<Id>-content`. Ohne Angabe `tab-<Guid>`.
`.Tooltip(string)`	Titel-Tooltip am Reiter.
`.TabDisabled()`	Sperrt den Reiter (Klasse `fmh-link-disabled`).
`.DisableIf(bool, string tooltip)`	Sperrt nur, wenn die Bedingung zutrifft, und begründet die Sperre im Tooltip.
`.TabAttributes(object)` / `.ContentAttributes(object)`	Zusätzliche HTML-Attribute für Reiter bzw. Inhaltsbereich (anonymes Objekt, `@class` für die CSS-Klasse).

Klick-Ereignis

Bei jedem Klick auf einen Reiter löst der TabStrip auf document ein CustomEvent mit dem Namen <Id>Click aus — bei Id("tabstripAntrag") also tabstripAntragClick. Im detail stehen:

Feld	Inhalt
`id`	Id des Reiter-Links (`<TabId>-tab`)
`contentId`	Id des Inhaltsbereichs (`<TabId>-content`)
`label`	Beschriftung des Reiters
`index`	Position des Reiters (als Zeichenkette)

document.addEventListener('tabstripAntragClick', function (event) {
    console.log(event.detail.label, event.detail.index);
});

Das eignet sich, um Inhalte erst beim Öffnen eines Reiters nachzuladen. Bootstrap selbst meldet den Wechsel zusätzlich über shown.bs.tab.

Weil das Ereignis auf document liegt, darf der Listener registriert werden, bevor der TabStrip im DOM steht — die Reihenfolge von Skript und Markup spielt keine Rolle. Beim Beispiel «Klick-Ereignis auswerten» zeigt der Code-Tab JavaScript die vollständige Umsetzung; die Datei liegt unter wwwroot/js/demos/ und wird vom Beispiel per <script src> geladen. Der Tab jQuery zeigt dieselbe Umsetzung mit jQuery — dort kommt detail über das jQuery-Event (jQuery 3 kopiert die Eigenschaft; ältere Fassungen brauchen event.originalEvent.detail).

Was zu beachten ist

Gesperrte Reiter bleiben sichtbar — der Benutzer sieht also, dass es den Schritt gibt. Mit Tooltip lässt sich begründen, warum er noch nicht offen ist.
Der Inhalt aller Reiter wird gerendert, auch der geschlossenen. Teure Inhalte deshalb erst über das Klick-Ereignis nachladen.
Die Ids müssen auf der Seite eindeutig sein; bei mehreren TabStrips je eigene Id(...) vergeben.

Reiter mit Inhalt

Der Grundfall: Reiter über Tabs(...) sammeln, Inhalt als Razor-Vorlage. SelectedIndex bestimmt den offenen Reiter.

@* Die Reiter werden über Tabs(...) gesammelt; der Inhalt ist eine Razor-Vorlage (@<text>…</text>
   oder ein Element). SelectedIndex bestimmt, welcher Reiter beim Laden offen ist – hier der zweite. *@
@{
    var tabstrip = Fmh.TabStrip()
        .Id("tabstripStandard")
        .SelectedIndex(1)
        .Tabs(tabs =>
        {
            tabs.Add("Übersicht")
                .Content(@<p class="mt-3 mb-0">Inhalt des ersten Reiters.</p>);

            tabs.Add("Details")
                .Content(@<p class="mt-3 mb-0">Inhalt des zweiten Reiters – beim Laden offen, weil <code>SelectedIndex(1)</code> gesetzt ist.</p>);

            tabs.Add("Verlauf")
                .Content(@<p class="mt-3 mb-0">Inhalt des dritten Reiters.</p>);
        });
}

@Html.Fmh(tabstrip)

Darstellung

Inhalt des ersten Reiters.

Inhalt des zweiten Reiters – beim Laden offen, weil SelectedIndex(1) gesetzt ist.

Inhalt des dritten Reiters.

Der TabStripBuilder wird über Fmh.TabStrip() erzeugt und mit @Html.Fmh(...) gerendert. Er erzeugt die Reiterleiste und die zugehörigen Inhaltsbereiche (Bootstrap-Tabs):

@{
    var tabstrip = Fmh.TabStrip()
        .Id("tabstripAntrag")
        .SelectedIndex(1)
        .Tabs(tabs =>
        {
            tabs.Add("Übersicht").Content(@<p>Erster Reiter.</p>);
            tabs.Add("Details").Content(@<p>Zweiter Reiter.</p>);
        });
}

@Html.Fmh(tabstrip)

Standardwerte ohne weitere Angabe: Id ts-<Guid>, offener Reiter der erste (SelectedIndex(0)).

Methoden des TabStrips

Methode	Erklärung
`.Id(string)`	Id der Reiterleiste. Sie bestimmt auch den Namen des Klick-Ereignisses (siehe unten) — für eine Auswertung im Skript also fest vergeben.
`.Tabs(Action<TabCollection>)`	Sammelt die Reiter. Über `tabs.Add("Titel")` entsteht ein `Tab`, dessen Methoden sich verketten lassen.
`.SelectedIndex(int)`	Nullbasierter Index des offenen Reiters.

Methoden eines Reiters

Methode	Erklärung
`.Title(string)`	Beschriftung — setzt bereits `tabs.Add("…")`.
`.Content(Func<object, HelperResult>)`	Der Inhalt als Razor-Vorlage (`@<div>…</div>` oder `@<text>…</text>`). Pflicht: Ein Reiter ohne Inhalt führt beim Rendern zu einer `NullReferenceException`.
`.Id(string)`	Eigene Id; daraus entstehen `<Id>-tab` und `<Id>-content`. Ohne Angabe `tab-<Guid>`.
`.Tooltip(string)`	Titel-Tooltip am Reiter.
`.TabDisabled()`	Sperrt den Reiter (Klasse `fmh-link-disabled`).
`.DisableIf(bool, string tooltip)`	Sperrt nur, wenn die Bedingung zutrifft, und begründet die Sperre im Tooltip.
`.TabAttributes(object)` / `.ContentAttributes(object)`	Zusätzliche HTML-Attribute für Reiter bzw. Inhaltsbereich (anonymes Objekt, `@class` für die CSS-Klasse).

Klick-Ereignis

Bei jedem Klick auf einen Reiter löst der TabStrip auf document ein CustomEvent mit dem Namen <Id>Click aus — bei Id("tabstripAntrag") also tabstripAntragClick. Im detail stehen:

Feld	Inhalt
`id`	Id des Reiter-Links (`<TabId>-tab`)
`contentId`	Id des Inhaltsbereichs (`<TabId>-content`)
`label`	Beschriftung des Reiters
`index`	Position des Reiters (als Zeichenkette)

document.addEventListener('tabstripAntragClick', function (event) {
    console.log(event.detail.label, event.detail.index);
});

Das eignet sich, um Inhalte erst beim Öffnen eines Reiters nachzuladen. Bootstrap selbst meldet den Wechsel zusätzlich über shown.bs.tab.

Weil das Ereignis auf document liegt, darf der Listener registriert werden, bevor der TabStrip im DOM steht — die Reihenfolge von Skript und Markup spielt keine Rolle. Beim Beispiel «Klick-Ereignis auswerten» zeigt der Code-Tab JavaScript die vollständige Umsetzung; die Datei liegt unter wwwroot/js/demos/ und wird vom Beispiel per <script src> geladen. Der Tab jQuery zeigt dieselbe Umsetzung mit jQuery — dort kommt detail über das jQuery-Event (jQuery 3 kopiert die Eigenschaft; ältere Fassungen brauchen event.originalEvent.detail).

Was zu beachten ist

Gesperrte Reiter bleiben sichtbar — der Benutzer sieht also, dass es den Schritt gibt. Mit Tooltip lässt sich begründen, warum er noch nicht offen ist.
Der Inhalt aller Reiter wird gerendert, auch der geschlossenen. Teure Inhalte deshalb erst über das Klick-Ereignis nachladen.
Die Ids müssen auf der Seite eindeutig sein; bei mehreren TabStrips je eigene Id(...) vergeben.