ButtonGroup

Свързаните действия изглеждат по-добре заедно. ButtonGroup обединява бутони в една сегментирана контрола, хоризонтално или вертикално, така че избори като превключвател на изгледи се четат като едно цяло.

Защо помага

• Една подредена контрола вместо разпилени бутони
• Хоризонтално или вертикално
• Върви естествено с бутоните за превключване

Къде пасва

• Превключватели на изгледи (списък, мрежа, табло)
• Бързи периоди
• Избор на подравняване и формат

Пример

<Stack Direction="StackDirection.Column" Align="flex-start">
    <ButtonGroup Label="Actions">
        <Button Variant="Variant.Outlined" StartIcon="IconName.Save">Save</Button>
        <Button Variant="Variant.Outlined" StartIcon="IconName.Copy">Copy</Button>
        <Button Variant="Variant.Outlined" StartIcon="IconName.Delete" Color="ButtonColor.Danger">Delete</Button>
    </ButtonGroup>
    <ButtonGroup Label="View">
        @foreach (var view in _views)
        {
            <ToggleButton Pressed="_view == view" PressedChanged="@(_ => _view = view)">@view</ToggleButton>
        }
    </ButtonGroup>
    <ButtonGroup Vertical="true" Label="Filled">
        <Button>First</Button>
        <Button>Second</Button>
        <Button>Third</Button>
    </ButtonGroup>
</Stack>

@code {
    private readonly string[] _views = ["Day", "Week", "Month"];
    private string _view = "Week";
}

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

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

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