Escolha um valor de uma hierarquia, um nível por vez: uma coluna de opções abre uma coluna de subopções.
Por que ajuda
- Escolha passo a passo
- Layout de colunas familiar
- Bom para hierarquias profundas
Onde se encaixa
- Região, cidade e bairro
- Categoria e subcategoria
- Famílias de produtos
Exemplo
<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"))
];
}Um pequeno trecho. Adicione @using RayCraft.Blazor.Components à sua página e use um modo de renderização interativo.
Incluído no RayCraft Free. Há exemplos funcionais no repositório do GitHub (MIT); ele contém código de exemplo e demonstração, não o código da biblioteca.