Hoppa till innehållet
VAL FRÅN LISTA · FREE

Cascader

Låt användare välja i en hierarki, en nivå i taget.

Välj ett värde från en hierarki, en nivå i taget: en kolumn med val öppnar en kolumn med underval.

Varför det hjälper

  • Val steg för steg
  • Välbekant kolumnlayout
  • Bra för djupa hierarkier

Var det passar

  • Region, ort och stadsdel
  • Kategori och underkategori
  • Produktfamiljer
Kontrollen Cascader på en RayCraft-sida

Exempel

<Cascader Label="Location" @bind-Value="_place" Nodes="_nodes" Placeholder="Choose a city" />
<p>Chosen: @(_place ?? "none")</p>

@code {
    private string? _place;

    private readonly CascaderNode[] _nodes =
    [
        new("bg", "Bulgaria",
            new CascaderNode("bg-sof", "Sofia", new CascaderNode("sofia", "Sofia"), new CascaderNode("pernik", "Pernik")),
            new CascaderNode("bg-plv", "Plovdiv", new CascaderNode("plovdiv", "Plovdiv"), new CascaderNode("asenovgrad", "Asenovgrad")),
            new CascaderNode("bg-var", "Varna", new CascaderNode("varna", "Varna"))),
        new("de", "Germany",
            new CascaderNode("de-be", "Berlin", new CascaderNode("berlin", "Berlin")),
            new CascaderNode("de-by", "Bavaria", new CascaderNode("munich", "Munich"), new CascaderNode("nuremberg", "Nuremberg"))),
        new("gr", "Greece",
            new CascaderNode("athens", "Athens"),
            new CascaderNode("thessaloniki", "Thessaloniki"))
    ];
}

Ett kort utdrag. Lägg till @using RayCraft.Blazor.Components på din sida och använd ett interaktivt renderingsläge.

Ingår i RayCraft Free. Fungerande exempel finns i GitHub-arkiv (MIT); det innehåller exempel- och demokod, inte bibliotekets kod.

Alla kontroller ยท Dokumentation