UI-Bausteine

Die folgenden Bausteine lassen sich innerhalb einer Seite kombinieren und verschachteln.

Die Überschrift der Seite, mit optionalem Untertitel und kleinen Schlüssel-Wert-Chips daneben:

new Header("Musterfirma GmbH")
{
    Subtitle = "10001",
    Chips = [new KeyValueRow("Status", "aktiv"), new KeyValueRow("Branche", "Handel")]
}

Note

Ein Hinweistext, etwa für leere Ergebnisse oder einen nicht verfügbaren Teil der Ansicht:

new Note("Keine Adressen gefunden.")
new Note("Die Lagerabfrage ist gerade nicht erreichbar.") { Tone = Tone.Bad }

Tone steuert die Hervorhebung: Default, Accent, Good, Warn oder Bad.

KeyValueList

Eine Liste aus Schlüssel-Wert-Paaren für Inhalte nach dem Muster „Bezeichnung: Wert“:

new KeyValueList(
[
    new KeyValueRow("Kundennummer", adresse.AdrNr!),
    new KeyValueRow("Umsatz laufendes Jahr", $"{umsatz:N2} EUR"),
    new KeyValueRow("Letzter Vorgang", letzterVorgang?.ToString("dd.MM.yyyy") ?? "-")
])

Table

Eine Tabelle aus Spaltendefinitionen und Textwerten. Mono: true verwendet Festbreitenschrift:

new Table
{
    Columns = [new TableColumn("Nr.", Mono: true), new TableColumn("Name"), new TableColumn("Ort")],
    Rows = adressen.Select(adr => new TableRow([
        adr.AdrNr ?? string.Empty,
        adr.SuchBeg ?? string.Empty,
        adr.Ort ?? string.Empty
    ])).ToList()
}

Mit TableRow.Opens verlinken Sie auf eine andere Seite.

Card

Ein Abschnitt mit Titel, Textzeilen, Wertepaaren und optional verschachtelten Bausteinen:

new Card("Rechnungsanschrift")
{
    Badges = [new PageBadge("Standard", Tone.Accent)],
    Lines = ["Musterstraße 1", "12345 Musterstadt"],
    Rows = [new KeyValueRow("Telefon", "0123 456789")],
    Blocks = [ansprechpartnerTabelle]
}

StatCards und Series

StatCards zeigt Kennzahlen, Series eine Balkenreihe. Delta ergänzt einen Hinweis unter der Kennzahl:

new StatCards(
[
    new StatCard("Offene Vorgänge", "23") { Delta = "+4 seit gestern", Tone = Tone.Warn },
    new StatCard("Heute erledigt", "5") { Tone = Tone.Good }
])

new Series([new SeriesPoint("Mo", 14), new SeriesPoint("Di", 22), new SeriesPoint("Mi", 19)])

Grid

Grid ordnet Bausteine nebeneinander an. Columns bestimmt die Spaltenbreite einer Zelle:

new Grid(
[
    new GridCell(new Card("Kennzahlen") { Blocks = [kennzahlen] }, Columns: 2),
    new GridCell(new Card("Verlauf") { Blocks = [verlauf] })
])

Table of Contents