Elige un valor de una jerarquía, nivel por nivel: una columna de opciones abre una columna de subopciones.
Por qué ayuda
- Elección paso a paso
- Disposición de columnas conocida
- Bueno para jerarquías profundas
Dónde encaja
- Región, ciudad y distrito
- Categoría y subcategoría
- Familias de productos
Ejemplo
<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 breve fragmento. Añade @using RayCraft.Blazor.Components a tu página y usa un modo de renderizado interactivo.
Incluido en RayCraft Free. Hay ejemplos que funcionan en el repositorio de GitHub (MIT); contiene código de ejemplo y demostración, no el código de la biblioteca.