Разделитель

Визуально или семантически разделяет содержимое.

❯buridan add разделитель

Error: Reference Target 'разделитель' not found

Примеры

По умолчанию

По умолчанию orientation — "horizontal".

Используемый реквизит: не требуется — orientation="horizontal" используется по умолчанию.

buridan/ui

The UI Library for Reflex Devs.

A set of beautifully designed components that you can customize, extend, and build on.

import reflex as rx

from components.ui.separator import separator


def separator_horizontal() -> rx.Component:
    return rx.el.div(
        rx.el.div(
            rx.el.div("buridan/ui", class_name="leading-none font-medium"),
            rx.el.div(
                "The UI Library for Reflex Devs.",
                class_name="text-muted-foreground",
            ),
            class_name="flex flex-col gap-1.5",
        ),
        separator(class_name="bg-zinc-200 dark:bg-zinc-800"),
        rx.el.div(
            "A set of beautifully designed components that you can customize, extend, and build on."
        ),
        class_name="flex max-w-sm flex-col gap-4 text-sm",
    )

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

Использованный реквизит: orientation="vertical" на separator.

Blog

Docs

Source

import reflex as rx

from components.ui.separator import separator


def separator_vertical() -> rx.Component:
    return rx.el.div(
        rx.el.div("Blog"),
        separator(orientation="vertical"),
        rx.el.div("Docs"),
        separator(orientation="vertical"),
        rx.el.div("Source"),
        class_name="flex h-5 items-center gap-4 text-sm",
    )

Список

Горизонтальные разделители между элементами списка.

Используемый реквизит: не требуется — orientation="horizontal" используется по умолчанию.

Error: Reference Target 'список_разделителей' not found

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