Choisissez une valeur dans une hiérarchie, un niveau à la fois : une colonne de choix ouvre une colonne de sous-choix.
Pourquoi c’est utile
- Choix pas à pas
- Disposition en colonnes familière
- Idéal pour les hiérarchies profondes
Où il trouve sa place
- Région, ville et quartier
- Catégorie et sous-catégorie
- Familles de produits
Exemple
<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"))
];
}Un court fragment. Ajoutez @using RayCraft.Blazor.Components à votre page et utilisez un mode de rendu interactif.
Inclus dans RayCraft Free. Des exemples fonctionnels se trouvent dans le dépôt GitHub (MIT); il contient du code d’exemple et de démonstration, pas le code de la bibliothèque.