Вкладки. Набор многоуровневых разделов контента

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

❯buridan add вкладки. набор многоуровневых разделов контента

Error: Reference Target 'вкладки' not found

Примеры

Базовый

import reflex as rx

from components.ui.card import card
from components.ui.tabs import tabs


def tabs_basic() -> rx.Component:
    return tabs.root(
        tabs.list(
            tabs.trigger("Overview", value="overview"),
            tabs.trigger("Analytics", value="analytics"),
            tabs.trigger("Reports", value="reports"),
            tabs.trigger("Settings", value="settings"),
        ),
        tabs.content(
            card.root(
                card.header(
                    card.title("Overview"),
                    card.description(
                        "View your key metrics and recent project activity. Track progress "
                        "across all your active projects."
                    ),
                ),
                card.content(
                    "You have 12 active projects and 3 pending tasks.",
                    class_name="text-sm text-muted-foreground",
                ),
            ),
            value="overview",
        ),
        tabs.content(
            card.root(
                card.header(
                    card.title("Analytics"),
                    card.description(
                        "Track performance and user engagement metrics. Monitor trends and "
                        "identify growth opportunities."
                    ),
                ),
                card.content(
                    "Page views are up 25% compared to last month.",
                    class_name="text-sm text-muted-foreground",
                ),
            ),
            value="analytics",
        ),
        tabs.content(
            card.root(
                card.header(
                    card.title("Reports"),
                    card.description(
                        "Generate and download your detailed reports. Export data in "
                        "multiple formats for analysis."
                    ),
                ),
                card.content(
                    "You have 5 reports ready and available to export.",
                    class_name="text-sm text-muted-foreground",
                ),
            ),
            value="reports",
        ),
        tabs.content(
            card.root(
                card.header(
                    card.title("Settings"),
                    card.description(
                        "Manage your account preferences and options. Customize your "
                        "experience to fit your needs."
                    ),
                ),
                card.content(
                    "Configure notifications, security, and themes.",
                    class_name="text-sm text-muted-foreground",
                ),
            ),
            value="settings",
        ),
        default_value="overview",
        class_name="w-[400px]",
    )

линия

Используйте параметр variant="line" в tabs.list для стиля линии.

Error: Reference Target 'строка_табов' not found

Вертикальный

Используйте orientation="vertical" для вертикальных вкладок.

import reflex as rx

from components.ui.tabs import tabs


def tabs_vertical():
    return rx.el.div(
        tabs.root(
            tabs.list(
                tabs.trigger("Account", value="account"),
                tabs.trigger("Password", value="password"),
                tabs.trigger("Notifications", value="notifications"),
            ),
            default_value="account",
            orientation="vertical",
        ),
        class_name="flex justify-center text-sm",
    )

Отключено

Используйте disabled=True, чтобы отключить вкладку.

from components.ui.tabs import tabs


def tabs_disabled():
    return tabs.root(
        tabs.list(
            tabs.trigger("Home", value="home"),
            tabs.trigger(
                "Disabled",
                value="settings",
                disabled=True,
            ),
        ),
        default_value="home",
    )

Иконки

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

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

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

tabs.root(
    tabs.list(
        tabs.trigger("Overview", value="overview"),
        tabs.trigger("Analytics", value="analytics"),
    ),
    tabs.content(
        "Overview panel data",
        value="overview"
    ),
    default_value="overview",
)

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

вкладок.список

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

tabs.list(
    tabs.trigger("Tab 1", value="tab1"),
    tabs.trigger("Tab 2", value="tab2"),
    variant="line",
)

Опора	Тип	По умолчанию
`variant`	`Literal["default", "line"]`	`"default"`
`class_name`	`str`	`""`

вкладки.триггер

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

tabs.trigger(
    "Analytics",
    value="analytics",
    on_click=rx.console_log("Switched tabs!")
)

Опора	Тип	По умолчанию
`value`	`str`	Обязательно
`class_name`	`str`	`""`
`id`	`str`	Автогенерируемый UUID
`disabled`	`bool`	`False`
`on_click`	`Union[EventHandler, list[EventHandler]]`	`None`
`on_mount`	`Union[EventHandler, list[EventHandler]]`	`None`

вкладки.контент

Структурная панель, содержащая контент, сопоставленный с определенным значением триггера вкладки. Мгновенно переключает видимость макета, используя сопоставление атрибутов CSS.

tabs.content(
    "Your dashboard analytics modules go here.",
    value="analytics",
)

Опора	Тип	По умолчанию
`value`	`str`	Обязательно
`class_name`	`str`	`""`

External Tools

︲

On This Page