Маркер

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

❯buridan add маркер

Error: Reference Target 'маркер' not found

Примеры

Варианты

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

A default marker for inline notes.

A separator marker

A border marker for row boundaries.

import reflex as rx

from components.ui.marker import marker


def marker_variants_demo():
    return rx.el.div(
        marker.root(
            marker.content("A default marker for inline notes."),
        ),
        marker.root(
            marker.content("A separator marker"),
            variant="separator",
        ),
        marker.root(
            marker.content("A border marker for row boundaries."),
            variant="border",
        ),
        class_name="flex w-full max-w-sm flex-col gap-8 py-12",
    )

Вариант	Описание
`default`	Встроенный маркер для статуса, заметок и действий.
`border`	Маркер по умолчанию с нижней границей под строкой.
`separator`	Этикетка по центру с разделительными линиями с каждой стороны.

Статус

Установите role="status" и включите §§IC_10§§ для маркеров потоковой передачи или выполнения, чтобы объявлялось об обновлениях.

Compacting conversation

Running tests

import reflex as rx

from components.ui.marker import marker
from components.ui.spinner import spinner


def marker_status_demo():
    return rx.el.div(
        marker.root(
            marker.icon(spinner()),
            marker.content("Compacting conversation"),
            role="status",
        ),
        marker.root(
            marker.icon(spinner()),
            marker.content("Running tests"),
            variant="separator",
            role="status",
        ),
        class_name="flex w-full max-w-sm flex-col gap-8 py-12",
    )

Мерцание

Добавьте служебный класс §§IC_11§§ к marker.content для создания эффекта анимированного потокового текста. Утилита поставляется с пакетом buridan — для установки см. документацию по мерцанию.

Thinking...

Reading 4 files

import reflex as rx

from components.ui.marker import marker


def marker_shimmer():
    return rx.el.div(
        marker.root(
            marker.content("Thinking...", class_name="shimmer"),
            role="status",
        ),
        marker.root(
            marker.content("Reading 4 files", class_name="shimmer"),
            variant="separator",
            role="status",
        ),
        class_name="flex w-full max-w-sm flex-col gap-8 py-12",
    )

Разделитель

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

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

Граница

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

Switched to release-candidate

Reviewed 8 related files

Opened implementation notes

import reflex as rx

from components.core.hugeicon import hi
from components.ui.marker import marker


def marker_border():
    return rx.el.div(
        marker.root(
            marker.icon(hi("GitBranchIcon")),
            marker.content("Switched to release-candidate"),
            variant="border",
        ),
        marker.root(
            marker.icon(hi("Search01Icon")),
            marker.content("Reviewed 8 related files"),
            variant="border",
        ),
        marker.root(
            marker.icon(hi("File01Icon")),
            marker.content("Opened implementation notes"),
            variant="border",
        ),
        class_name="flex w-full max-w-sm flex-col gap-3 py-12",
    )

со значком

Используйте marker.icon для отображения значка рядом с содержимым. Используйте flex-col, чтобы расположить значок над содержимым.

Switched to a new branch

Explored 4 files

Syncing completed

import reflex as rx

from components.core.hugeicon import hi
from components.ui.marker import marker


def marker_with_icon():
    return rx.el.div(
        marker.root(
            marker.icon(hi("GitBranchIcon")),
            marker.content("Switched to a new branch"),
        ),
        marker.root(
            marker.icon(hi("Search01Icon")),
            marker.content("Explored 4 files"),
            variant="separator",
        ),
        marker.root(
            marker.icon(hi("BookOpenCheckIcon")),
            marker.content("Syncing completed"),
            class_name="flex-col",
        ),
        class_name="flex w-full max-w-sm flex-col gap-12 py-12",
    )

Ссылки и кнопки

Превратите маркер в ссылку или кнопку с помощью .

View the pull request

import reflex as rx

from components.core.hugeicon import hi
from components.ui.marker import marker


def marker_link_button():
    return rx.el.div(
        marker.root(
            rx.el.a(
                marker.icon(hi("GitBranchIcon")),
                marker.content("View the pull request"),
                href="#links-and-buttons",
                class_name="group flex flex-row items-center gap-x-2 underline transition-colors hover:text-foreground",
            ),
            variant="default",
        ),
        marker.root(
            rx.el.button(
                marker.icon(
                    hi("ArrowMoveUpRightIcon"),
                    class_name="group-hover:text-foreground transition-colors",
                ),
                marker.content(
                    "Revert this change",
                    class_name="group-hover:text-foreground transition-colors",
                ),
                type="button",
                class_name="group flex flex-row items-center gap-x-2 transition-colors",
                on_click=rx.toast("You clicked the revert button"),
            ),
            variant="default",
        ),
        class_name="flex w-full max-w-sm flex-col gap-8 py-12 justify-center",
    )

Доступность

marker.root по умолчанию является презентационным. Правильная семантика зависит от того, как вы ее используете, поэтому выбирайте роль на основе намерения, а не полагайтесь на одно значение по умолчанию.

Статус и прогресс

Для потоковой передачи или маркеров прогресса, таких как «Думая...» или работающего инструмента, установите role="status", чтобы вспомогательные технологии объявляли об обновлении по мере его появления. marker.root пересылает role базовому элементу.

marker.root(
    marker.icon(spinner()),
    marker.content("Compacting conversation"),
    role="status",
)

Маркированные разделители

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

marker.root(
    marker.content("Today"),
    variant="separator",
)

Примечание. Не добавляйте role="separator" к помеченному разделителю. Доступное имя разделителя берется из aria-label, а не из его текста, а его содержимое рассматривается как презентационное, поэтому видимая метка не будет объявлена. Зарезервируйте role="separator" для разделителя без значимого текста.

Маркеры с рамкой

Маркер с рамкой сохраняет ту же семантику, что и маркер по умолчанию. Нижняя граница является декоративной, поэтому выберите role="status" или отсутствие роли в зависимости от назначения маркера.

marker.root(
    marker.icon(rx.icon("file-text", size=14)),
    marker.content("Opened implementation notes"),
    variant="border",
)

Декоративные значки

marker.icon является декоративным и скрыт от вспомогательных технологий с помощью aria-hidden, поэтому соседний marker.content несет в себе смысл. Для маркера, состоящего только из значков, укажите aria_label, чтобы он не объявлялся пустым.

marker.root(
    marker.icon(rx.icon("check", size=14)),
    aria_label="Synced",
)

Интерактивные маркеры

Когда маркер связывает или запускает действие, визуализируйте его как rx.link или передайте on_click, чтобы он был фокусируемым и отображал правильную роль.

rx.link(
    marker.root(
        marker.icon(rx.icon("file-text", size=14)),
        marker.content("Explored 4 files"),
    ),
    href="/files",
)

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

маркер.корень

Элемент корневого маркера.

Опора	Тип	По умолчанию	Описание
`variant`	`"default" \\| "border" \\| "separator"`	`"default"`	Расположение маркера.
`class_name`	`str`	`""`	Дополнительные классы, применяемые к корневому элементу.
`**props`	`dict`	—	Любой допустимый атрибут HTML (`role`, `aria_label`).

маркер.значок

Декоративный слот для иконок. Скрыто от вспомогательных технологий с помощью aria-hidden.

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

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

Текстовое содержимое маркера.

Опора	Тип	По умолчанию	Описание
`class_name`	`str`	`""`	Дополнительные классы для применения к слоту контента.
`**props`	`dict`	—	Любой допустимый атрибут HTML, перенаправленный в диапазон.