Wählen Sie einen Wert aus einer Hierarchie, Ebene für Ebene: Eine Spalte mit Auswahlen öffnet eine Spalte mit Unterauswahlen.
Warum es hilft
- Wahl Schritt für Schritt
- Vertrautes Spaltenlayout
- Gut für tiefe Hierarchien
Wo es passt
- Region, Stadt und Bezirk
- Kategorie und Unterkategorie
- Produktfamilien
Beispiel
<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"))
];
}Ein kurzes Fragment. Fügen Sie @using RayCraft.Blazor.Components zu Ihrer Seite hinzu und nutzen Sie einen interaktiven Render-Modus.
In RayCraft Free enthalten. Funktionierende Beispiele finden Sie im GitHub-Repository (MIT); es enthält Beispiel- und Democode, nicht den Code der Bibliothek.