Примеры

Базовый

Чистое раскрывающееся меню с метками организационных групп и визуальными разделителями.

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

Error: Reference Target 'меню_базовое' not found

Ярлыки

Раскрывающиеся элементы с выровненными по правому краю подсказками для команд клавиатуры, встроенными в макет строки.

Используются реквизиты: menu.shortcut в качестве дочернего элемента-обертки.

import reflex as rx

from components.ui.button import button_variants
from components.ui.menu import menu


def menu_shortcuts() -> rx.Component:
    return menu.root(
        menu.trigger(
            "Workspace Actions Menu", class_name=button_variants(variant="outline")
        ),
        menu.content(
            menu.item("New Tab", menu.shortcut("⌘T")),
            menu.item("New Window", menu.shortcut("⌘N")),
            menu.separator(),
            menu.item("Save Project", menu.shortcut("⌘S")),
        ),
    )

Иконки

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

Используемые реквизиты: hi <hugeicon> в качестве встроенного дочернего элемента префикса.

import reflex as rx

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


def menu_icons() -> rx.Component:
    return menu.root(
        menu.trigger("Options", class_name=button_variants(variant="outline")),
        menu.content(
            menu.item(hi("UserIcon"), "Profile"),
            menu.item(hi("CreditCardIcon"), "Billing"),
            menu.item(hi("Setting07Icon"), "Settings"),
        ),
    )

Разрушительный

Включите стили предупреждений в отдельные элементы для необратимых действий.

Использованный реквизит: variant="destructive" на menu.item.

import reflex as rx

from components.ui.button import button_variants
from components.ui.menu import menu


def menu_destructive() -> rx.Component:
    return menu.root(
        menu.trigger("Danger Zone", class_name=button_variants(variant="outline")),
        menu.content(
            menu.item("Account Settings"),
            menu.separator(),
            menu.item("Delete Repository", variant="destructive"),
            class_name="w-[10rem]",
        ),
    )

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

меню.корень

Создает экземпляр контейнера контекста позиционирования, построенного на основе собственного компонента раскрытия HTML <details>. Включает автоматические прослушиватели JavaScript для нажатия клавиш документа (Escape) и закрытия окон по щелчку мыши.

menu.root(
    menu.trigger("Open Menu"),
    menu.content(...)
)

Опора	Тип	По умолчанию	Описание
`id`	`str`	Автоматически создано	Стабильный HTML-идентификатор, используемый для отслеживания открытых окон раскрытия информации.
`class_name`	`str`	`""`	Дополнительные стили Tailwind, добавленные в блок контейнера сведений.

меню.триггер

Вложенное ограничение интерактивности: Не передавайте полностью интерактивные компоненты (например, стандартные блоки button(...)) как дочерние элементы внутри menu.trigger. Вложенные интерактивные элементы перехватывают события щелчка DOM и предотвращают открытие меню. Чтобы стилизовать триггер как кнопку, передайте необработанные строки/значки и примените классы кнопок непосредственно к компоненту триггера.

Целевая оболочка элемента управления, которая переключает открытое состояние видимости контейнера списка меню. Создает собственный HTML-элемент <summary>.

menu.trigger("Click me")

Опора	Тип	По умолчанию	Описание
`class_name`	`str`	`""`	Внедренные утилиты класса для стилизации внешнего блока триггера.

меню.содержание

Границы макета: этот компонент использует чистое абсолютное позиционирование CSS вместо порталирования DOM. Всплывающее меню остается глубоко вложенным в локализованный узел дерева DOM. Убедитесь, что никакие макеты родительских контейнеров над этим компонентом не применяют ограничения overflow: скрытый или overflow: auto, так как это физически обрежет или обрежет плавающее раскрывающееся меню.

Оболочка относительного позиционирования, содержащая коллекцию ссылок или строк действий.

menu.content(
    menu.item("Item 1"),
    side="bottom",
    align="start"
)

Опора	Тип	По умолчанию	Описание
`side`	`Literal["bottom", "top", "left", "right"]`	`"bottom"`	Краевая сторона крепления для позиционирования поля содержимого.
`side_offset`	`int`	`4`	Буфер расстояния (в пикселях) относительно цели триггера меню.
`align`	`Literal["start", "end", "center"]`	`"start"`	Регулировка смещения структурного выравнивания для позиционирующих осей.
`class_name`	`str`	`""`	Дополнительные стили классов макета, примененные к плавающему фрейму содержимого.

меню.пункт

Компонент строки выбора действия. Внедряет фрагмент действия обхода DOM, который сворачивает родительское меню сразу после щелчка.

Предупреждение о контексте цикла: При отображении внутри rx.foreach передайте явный id, полученный из данных вашего цикла (например, id=f"menu-item-{item.id}"), чтобы предотвратить коллизии статических шаблонов.

menu.item("Profile", variant="default", close_on_click=True)

Опора	Тип	По умолчанию	Описание
`variant`	`Literal["default", "destructive"]`	`"default"`	Переключает разрушительные текстовые акценты и цвета выделения элементов.
`close_on_click`	`bool`	`True`	Указывает элементу мгновенно закрыть окно контейнера меню при щелчке.
`id`	`str`	Автоматически создано	Пользовательская строка отслеживания. Требуется при рендеринге в пределах `rx.foreach`.
`on_click`	`Union[EventHandler, list]`	`None`	Обратные вызовы триггера выполняются при нажатии строки элемента.
`class_name`	`str`	`""`	Дополнительные переопределения стилей элементов.

меню.закрыть

Кнопка макета выбора элементов, полностью предназначенная для закрытия и закрытия панели меню при нажатии. Идеально подходит для строк макета, которые явно действуют как кнопки «Отмена».

menu.close("Cancel Action", class_name="text-center justify-center")

Опора	Тип	По умолчанию	Описание
`id`	`str`	Автоматически создано	Перехватчик идентификатора элемента селектора HTML, используемый внутренним менеджером макета.
`class_name`	`str`	`""`	Определения визуального стиля вводятся в строку закрытия компонента.

меню.разделитель

Тематическая линия разделения, используемая для разделения отдельных кластеров действий с содержимым меню по горизонтали.

menu.separator()

Опора	Тип	По умолчанию	Описание
`class_name`	`str`	`""`	Переопределение толщины линий или конфигурации цвета фона.

меню.group_label

Отображает доступную небольшую строку меток заголовка, выделенную серым цветом, которая идеально подходит для категоризации наборов элементов внутри многоуровневых меню.

menu.group_label("Workspace Actions")

Опора	Тип	По умолчанию	Описание
`class_name`	`str`	`""`	Пользовательские цвета маркировки или настройка макета интервала.

меню.ярлык

Контейнер утилит с выравниванием по правому краю, используемый для четкого расположения семантических сочетаний клавиш или подсказок кнопок внутри menu.item.

menu.item(
    "Save Project",
    menu.shortcut("Ctrl + S")
)

Опора	Тип	По умолчанию	Описание
`class_name`	`str`	`""`	Пользовательский вес шрифта или корректировка визуального макета.

External Tools

︲

On This Page

Меню