Диалог

окно, наложенное либо на основное окно, либо на другое диалоговое окно, делая содержимое нижнего окна инертным.

❯buridan add диалог

Error: Reference Target 'диалог' not found

Примеры

Пользовательская кнопка закрытия

Замените элемент управления закрытием по умолчанию своей собственной кнопкой. Примените к нему dialog.class_names.CLOSE_ICON для правильного позиционирования в верхнем правом углу.

Использованный реквизит: class_name на кнопке, переданной в dialog.close.

import reflex as rx

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


def dialog_close_button() -> rx.Component:
    return dialog.root(
        dialog.trigger(button("Share", variant="outline")),
        dialog.popup(
            dialog.header(
                dialog.title("Share link"),
                dialog.description(
                    "Anyone who has this link will be able to view this."
                ),
            ),
            rx.el.div(
                rx.el.div(
                    rx.el.label("Link", html_for="link", class_name="sr-only"),
                    input(
                        id="link",
                        default_value="https://ui.buridan.com/docs/getting-started/installation",
                        read_only=True,
                    ),
                    class_name="grid flex-1 gap-2",
                ),
                class_name="flex items-center gap-2",
            ),
            dialog.footer(
                dialog.close(button("Close", type="button")),
                class_name="sm:justify-start",
            ),
            dialog.close(
                button(
                    hi("Cancel01Icon", class_name="size-4"),
                    variant="ghost",
                    size="icon-sm",
                    class_name=dialog.class_names.CLOSE_ICON,
                )
            ),
            class_name="sm:max-w-md",
        ),
    )

Нет кнопки закрытия

Чтобы пропустить значок закрытия в правом верхнем углу, просто не отображайте для него dialog.close(...) — все остальные механизмы закрытия (Escape, щелчок на фоне, кнопка нижнего колонтитула) по-прежнему работают.

Использованный реквизит: не требуется — опустите значок вызова dialog.close(...).

import reflex as rx

from components.ui.button import button
from components.ui.dialog import dialog


def dialog_no_close_button() -> rx.Component:
    return dialog.root(
        dialog.trigger(button("No Close Button", variant="outline")),
        dialog.popup(
            dialog.header(
                dialog.title("No Close Button"),
                dialog.description(
                    "This dialog doesn't have a close button in the top-right corner."
                ),
            ),
        ),
    )

Прикрепленный нижний колонтитул

Делайте действия видимыми во время прокрутки контента, используя dialog.footer.

Использованный реквизит: ничего не требуется, кроме стандартной композиции dialog.footer.

import reflex as rx

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


def dialog_sticky_footer() -> rx.Component:
    return dialog.root(
        dialog.trigger(button("Sticky Footer", variant="outline")),
        dialog.popup(
            dialog.header(
                dialog.title("Sticky Footer"),
                dialog.description(
                    "This dialog has a sticky footer that stays visible while the content scrolls."
                ),
            ),
            rx.el.div(
                *[
                    rx.el.p(
                        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do "
                        "eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut "
                        "enim ad minim veniam, quis nostrud exercitation ullamco laboris "
                        "nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in "
                        "reprehenderit in voluptate velit esse cillum dolore eu fugiat "
                        "nulla pariatur. Excepteur sint occaecat cupidatat non proident, "
                        "sunt in culpa qui officia deserunt mollit anim id est laborum.",
                        class_name="mb-4 leading-normal",
                    )
                    for _ in range(10)
                ],
                class_name="-mx-4 no-scrollbar max-h-[50vh] overflow-y-auto px-4",
            ),
            dialog.footer(
                dialog.close(button("Close", variant="outline")),
            ),
            dialog.close(
                button(
                    hi("Cancel01Icon", class_name="size-4"),
                    variant="ghost",
                    size="icon-sm",
                    class_name=dialog.class_names.CLOSE_ICON,
                )
            ),
        ),
    )

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

диалог.корень

Невизуальная оболочка области видимости (display: contents, не добавляет поле макета). Запустите и закройте разрешение своей цели <dialog>, подойдя к ближайшему dialog.root — без ручной обработки идентификаторов, а несколько независимых диалогов на одной странице (например, диалог «Поделиться» для каждой строки) никогда не перенацеливаются друг на друга.

dialog.root(
    dialog.trigger(button("Share", variant="outline")),
    dialog.popup(...),
)

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

диалог.триггер

Обертывает свой дочерний элемент (обычно button(...)) перехватывающим прослушивателем кликов, который вызывает .showModal() в ближайшем dialog.popup. Своего визуального поля нет, поэтому размещение внутри стилизованной кнопки не добавляет дополнительной глубины макету.

dialog.trigger(button("Share", variant="outline"))

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

диалог.всплывающее окно

Отображает родной <dialog>. Щелчки Escape и Backdrop закрывают его, когда dismissible=True (по умолчанию).

dialog.popup(
    dialog.header(dialog.title("Share link")),
    ...,
)

Опора	Тип	По умолчанию
`dismissible`	`bool`	`True`
`on_open_change`	`EventHandler[[bool]] \\| None`	`None`
`class_name`	`str`	`""`

Когда dismissible=False, как Escape, так и фоновый щелчок отключены — только явный dialog.close(...) может закрыть его.

диалог.закрыть

Та же поведенческая оболочка, что и dialog.trigger, но вызывает .close(). Не имеет собственного визуального стиля по умолчанию — применяйте dialog.class_names.CLOSE / dialog.class_names.CLOSE_ICON ко всему, что вы передаете.

dialog.close(button("Close", type="button"))

dialog.close(
    button(
        hi("Cancel01Icon", class_name="size-4"),
        variant="ghost",
        size="icon-sm",
        class_name=dialog.class_names.CLOSE_ICON,
    )
)

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

диалог.заголовок

dialog.title("Share link")

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

диалог.описание

dialog.description("Anyone who has this link will be able to view this.")

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

диалог.заголовок

dialog.header(
    dialog.title("Share link"),
    dialog.description("..."),
)

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

диалог.нижний колонтитул

dialog.footer(dialog.close(button("Close", type="button")))

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

External Tools

︲

On This Page