Кадр

отображает связанный контент в структурированном фрейме.

❯buridan add кадр

Error: Reference Target 'кадр' not found

Примеры

Базовые панели

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

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

Сложенные панели

Установите stacked=True, чтобы объединить границы панели в один непрерывный блок.

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

Плотные панели

Установите dense=True для минимального заполнения кадра от края до края.

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

Section header

Description for the section

Separated Panel

Section description

Separated Panel

Section description

import reflex as rx

from components.ui.frame import frame


def frame_dense():
    return frame.root(
        frame.header(
            frame.title("Section header"),
            frame.description("Description for the section"),
        ),
        frame.panel(
            rx.el.h2("Separated Panel", class_name="text-sm font-semibold"),
            rx.el.p("Section description", class_name="text-muted-foreground text-sm"),
        ),
        frame.panel(
            rx.el.h2("Separated Panel", class_name="text-sm font-semibold"),
            rx.el.p("Section description", class_name="text-muted-foreground text-sm"),
        ),
        stacked=True,
        dense=True,
        class_name="w-full max-w-md",
    )

Внешняя граница

Установите variant="ghost", чтобы удалить внешнюю границу кадра.

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

No Outer Border

This frame uses variant='ghost' to remove the outer border.

The outer container of this frame has no border, only the background and panels are visible.

import reflex as rx

from components.ui.frame import frame


def frame_no_border():
    return frame.root(
        frame.header(
            frame.title("No Outer Border"),
            frame.description(
                "This frame uses variant='ghost' to remove the outer border."
            ),
        ),
        frame.panel(
            rx.el.p(
                "The outer container of this frame has no border, only the background and panels are visible.",
                class_name="text-muted-foreground text-sm",
            ),
        ),
        stacked=True,
        dense=True,
        variant="ghost",
        class_name="w-full max-w-md",
    )

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

кадр.корень

frame.root(
    frame.panel(
        frame.header(frame.title("Overview")),
        "Panel content",
    ),
    variant="default",
    spacing="default",
)

Опора	Тип	По умолчанию	Описание
`variant`	`Literal["default", "inverse", "ghost"]`	`"default"`	Управляет визуальным стилем контейнера фрейма.
`spacing`	`Literal["xs", "sm", "default", "lg"]`	`"default"`	Управляет внутренним заполнением панелей, верхних и нижних колонтитулов с помощью переменных CSS.
`stacked`	`bool`	`False`	Удаляет пробелы и объединяет границы панелей, чтобы они выглядели как один непрерывный блок.
`dense`	`bool`	`False`	Удаляет все отступы/зазоры и растягивает панели от края до края с отрицательными полями.
`class_name`	`str`	`""`	Дополнительные классы объединены в корневую оболочку.

фрейм.панель

frame.panel("Panel content")

Опора	Тип	По умолчанию	Описание
`class_name`	`str`	`""`	Дополнительные классы объединены в панель — переопределяют значения по умолчанию bg/border/padding.

фрейм.заголовок

frame.header(frame.title("Overview"))

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

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

frame.title("Overview")

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

фрейм.описание

frame.description("A summary of recent activity.")

Опора	Тип	По умолчанию	Описание
`class_name`	`str`	`""`	Дополнительные классы добавлены в описание.

фрейм.нижний колонтитул

frame.footer(button("View all", variant="ghost", size="sm"))

Опора	Тип	По умолчанию	Описание
`class_name`	`str`	`""`	Дополнительные классы объединены в нижний колонтитул.

External Tools

︲

On This Page