Cascader

Изберете една стойност от йерархия, ниво по ниво: колона с избори отваря колона с подизбори.

Защо помага

• Избор стъпка по стъпка
• Позната колонна подредба
• Добър за дълбоки йерархии

Къде пасва

• Област, град и квартал
• Категория и подкатегория
• Продуктови семейства

Пример

<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"))
    ];
}

Кратък фрагмент. Добавете @using RayCraft.Blazor.Components към страницата си и ползвайте интерактивен режим на рендиране.

Включено в RayCraft Free. Работещи примери има в хранилище в GitHub (MIT); то съдържа примерен и демонстрационен код, не кода на библиотеката.

Всички контроли · Документация