Группа кнопок. Контейнер

который группирует связанные кнопки с одинаковым стилем.

❯buridan add группа кнопок. контейнер

Component Guide

Use the following to build the Группа_кнопок component.

from components.ui.группа_кнопок import группа_кнопок

Error: Reference Target 'группа_кнопок' not found

Доступность

button_group.root устанавливает role="group".
Используйте Tab для перемещения между кнопками в группе.
Используйте aria-label или aria-labelledby для обозначения группы кнопок.

Примеры

Ориентация

Установите реквизит orientation, чтобы изменить макет.

Использованный реквизит: orientation на button_group.root.

import reflex as rx

from components.core.hugeicon import hi
from components.ui.button import button
from components.ui.button_group import button_group


def button_group_orientation() -> rx.Component:
    return button_group.root(
        button(
            hi("Add01Icon"),
            variant="outline",
            size="icon",
        ),
        button(
            hi("MinusSignIcon"),
            variant="outline",
            size="icon",
        ),
        orientation="vertical",
        aria_label="Media controls",
        class_name="h-fit",
    )

Размер

Управляйте размером кнопок с помощью реквизита size на отдельных кнопках.

Использованный реквизит: size на button.

import reflex as rx

from components.core.hugeicon import hi
from components.ui.button import button
from components.ui.button_group import button_group


def button_group_size() -> rx.Component:
    return rx.el.div(
        button_group.root(
            button("Small", variant="outline", size="sm"),
            button("Button", variant="outline", size="sm"),
            button("Group", variant="outline", size="sm"),
            button(hi("Add01Icon"), variant="outline", size="icon-sm"),
        ),
        button_group.root(
            button("Default", variant="outline"),
            button("Button", variant="outline"),
            button("Group", variant="outline"),
            button(hi("Add01Icon"), variant="outline", size="icon"),
        ),
        button_group.root(
            button("Large", variant="outline", size="lg"),
            button("Button", variant="outline", size="lg"),
            button("Group", variant="outline", size="lg"),
            button(hi("Add01Icon"), variant="outline", size="icon-lg"),
        ),
        class_name="flex flex-col items-start gap-8",
    )

Разделитель

button_group.separator визуально разделяет кнопки внутри группы. Кнопкам варианта outline она не нужна (у них уже есть рамка) — другие варианты выигрывают от нее для визуальной иерархии.

Использованный реквизит: ничего не требуется, кроме button_group.separator по умолчанию.

import reflex as rx

from components.ui.button import button
from components.ui.button_group import button_group


def button_group_separator() -> rx.Component:
    return button_group.root(
        button("Copy", variant="secondary", size="sm"),
        button_group.separator(),
        button("Paste", variant="secondary", size="sm"),
    )

Сплит

Две кнопки, разделенные button_group.separator.

Использованный реквизит: ничего не требуется, кроме button_group.separator по умолчанию.

import reflex as rx

from components.core.hugeicon import hi
from components.ui.button import button
from components.ui.button_group import button_group


def button_group_split() -> rx.Component:
    return button_group.root(
        button("Button", variant="secondary"),
        button_group.separator(),
        button(
            hi("Add01Icon"),
            variant="secondary",
            size="icon",
        ),
    )

Ввод

Оберните input пуговицами с обеих сторон.

Использованный реквизит: не требуется — стандартная композиция button_group.root.

import reflex as rx

from components.core.hugeicon import hi
from components.ui.button import button
from components.ui.button_group import button_group
from components.ui.input import input


def button_group_input() -> rx.Component:
    return button_group.root(
        input(placeholder="Search..."),
        button(
            hi("Search01Icon"),
            variant="outline",
            aria_label="Search",
        ),
    )

Раскрывающееся меню

Группа разделенных кнопок с menu в качестве второго сегмента.

Используемый реквизит: реквизиты для конкретного меню см. в документации Menu.

import reflex as rx

from components.core.hugeicon import hi
from components.ui.button import button
from components.ui.button_group import button_group
from components.ui.menu import menu


def button_group_dropdown() -> rx.Component:
    return button_group.root(
        button("Follow", variant="outline"),
        menu.root(
            menu.trigger(
                button(
                    hi("ArrowDown01Icon"),
                    variant="outline",
                    class_name="pl-2!",
                ),
            ),
            menu.content(
                menu.item("Mute Conversation"),
                menu.item("Mark as Read"),
                menu.item("Report Conversation"),
                menu.item("Block User"),
                menu.item("Share Conversation"),
                menu.item("Copy Conversation"),
            ),
            menu.separator(),
            menu.content(
                menu.item("Delete Conversation", variant="destructive"),
            ),
        ),
    )

Выбрать

Соедините с компонентом select.

Используемый реквизит: информацию о реквизитах, специфичных для выбора, см. в документации Select.

Error: Reference Target 'button_group_select' not found

Справочник по API

button_group.root

button_group.root(
    button("Copy", variant="outline"),
    button("Paste", variant="outline"),
)

Опора	Тип	По умолчанию
`orientation`	`Literal["horizontal", "vertical"]`	`"horizontal"`
`class_name`	`str`	`""`

button_group.separator

button_group.root(
    button("Bold", variant="ghost"),
    button_group.separator(),
    button("Italic", variant="ghost"),
)

Опора	Тип	По умолчанию
`orientation`	`Literal["horizontal", "vertical"]`	`"vertical"`
`class_name`	`str`	`""`

button_group.text

Принимает *children, поэтому любой компонент (включая интерактивные) может отображаться как содержимое метки внутри группы.

button_group.text("Filter by")

Опора	Тип	По умолчанию
`class_name`	`str`	`""`

External Tools

︲

On This Page