Вложение

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

❯buridan add вложение

Error: Reference Target 'приложение' not found

Error: Reference Target 'вложение' not found

Особенности

Иконки и изображения через attachment.media
Состояния загрузки: idle, uploading, processing, error и done со встроенным стилем и мерцанием во время выполнения.
Три размера и горизонтальная или вертикальная ориентация
Полная карточка attachment.trigger, которая открывает ссылку или диалоговое окно, в то время как действия остаются независимо кликабельными.
Прокручиваемый, привязывающийся attachment.group с затуханием края
Настраиваемый стиль с помощью реквизита class_name на каждой части.

Примеры

Изображение

Установите variant="image" на attachment.media и визуализируйте rx.el.img() внутри него. Используйте orientation="vertical", чтобы расположить медиафайлы над контентом.

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

workspace.pngPNG · 820 KB

desk-reference.jpgJPG · 1.1 MB

office-reference.jpgJPG · 940 KB

import reflex as rx

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

images = [
    {
        "name": "workspace.png",
        "meta": "PNG · 820 KB",
        "src": "https://images.unsplash.com/photo-1497366754035-f200968a6e72?w=900&auto=format&fit=crop&q=80",
        "alt": "Workspace",
    },
    {
        "name": "desk-reference.jpg",
        "meta": "JPG · 1.1 MB",
        "src": "https://images.unsplash.com/photo-1497215728101-856f4ea42174?w=900&auto=format&fit=crop&q=80",
        "alt": "Desk",
    },
    {
        "name": "office-reference.jpg",
        "meta": "JPG · 940 KB",
        "src": "https://images.unsplash.com/photo-1497366811353-6870744d04b2?w=900&auto=format&fit=crop&q=80",
        "alt": "Office",
    },
]


def attachment_image_demo():
    return rx.el.div(
        attachment.group(
            [
                attachment.root(
                    attachment.trigger(
                        link=True,
                        href=image["src"],
                        target="_blank",
                        rel="noreferrer",
                        aria_label=f"Open {image['name']}",
                    ),
                    attachment.media(
                        rx.el.img(src=image["src"], alt=image["alt"]),
                        variant="image",
                    ),
                    attachment.content(
                        attachment.title(image["name"]),
                        attachment.description(image["meta"]),
                    ),
                    attachment.actions(
                        attachment.action(
                            hi("Cancel01Icon"),
                            aria_label=f"Remove {image['name']}",
                        )
                    ),
                    orientation="vertical",
                )
                for image in images
            ],
            class_name="w-full",
        ),
        class_name="mx-auto w-full max-w-sm py-12",
    )

Штаты

Установите state, чтобы отразить жизненный цикл загрузки. uploading и processing мерцают в заголовке, а error переключается на деструктивную обработку.

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

selected-file.pdfReady to upload

design-system.zipUploading · 64%

market-research.pdfProcessing document

financial-model.xlsxUpload failed. Try again.

uploaded-report.pdfUploaded · 1.8 MB

import reflex as rx

from components.core.hugeicon import hi
from components.ui.attachment import attachment
from components.ui.spinner import spinner


def attachment_states_demo():
    return rx.el.div(
        attachment.root(
            attachment.media(hi("Clock01Icon")),
            attachment.content(
                attachment.title("selected-file.pdf"),
                attachment.description("Ready to upload"),
            ),
            attachment.actions(
                attachment.action(
                    hi("Cancel01Icon"), aria_label="Remove selected-file.pdf"
                )
            ),
            state="idle",
        ),
        attachment.root(
            attachment.media(spinner()),
            attachment.content(
                attachment.title(
                    "design-system.zip",
                    class_name="shimmer",
                ),
                attachment.description("Uploading · 64%"),
            ),
            attachment.actions(
                attachment.action(hi("Cancel01Icon"), aria_label="Cancel upload")
            ),
            state="uploading",
        ),
        attachment.root(
            attachment.media(hi("File02Icon")),
            attachment.content(
                attachment.title("market-research.pdf"),
                attachment.description("Processing document"),
            ),
            attachment.actions(
                attachment.action(
                    hi("Cancel01Icon"), aria_label="Remove market-research.pdf"
                )
            ),
            state="processing",
        ),
        attachment.root(
            attachment.media(hi("FileExclamationPointIcon")),
            attachment.content(
                attachment.title("financial-model.xlsx"),
                attachment.description("Upload failed. Try again."),
            ),
            attachment.actions(
                attachment.action(hi("RefreshIcon"), aria_label="Retry upload"),
                attachment.action(
                    hi("Cancel01Icon"), aria_label="Remove financial-model.xlsx"
                ),
            ),
            state="error",
        ),
        attachment.root(
            attachment.media(hi("Tick02Icon")),
            attachment.content(
                attachment.title("uploaded-report.pdf"),
                attachment.description("Uploaded · 1.8 MB"),
            ),
            attachment.actions(
                attachment.action(
                    hi("Cancel01Icon"), aria_label="Remove uploaded-report.pdf"
                )
            ),
            state="done",
        ),
        class_name="w-full mx-auto max-w-sm py-12 flex flex-col gap-y-4",
    )

Размеры

Используйте size для переключения между default, sm и xs.

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

Default attachmentPDF · 2.4 MB

Small attachmentPDF · 2.4 MB

Extra small attachment

import reflex as rx

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


def attachment_sizes_demo():
    return rx.el.div(
        attachment.root(
            attachment.media(hi("File02Icon")),
            attachment.content(
                attachment.title("Default attachment"),
                attachment.description("PDF · 2.4 MB"),
            ),
            size="default",
        ),
        attachment.root(
            attachment.media(hi("File02Icon")),
            attachment.content(
                attachment.title("Small attachment"),
                attachment.description("PDF · 2.4 MB"),
            ),
            size="sm",
        ),
        attachment.root(
            attachment.media(hi("File02Icon")),
            attachment.content(
                attachment.title("Extra small attachment"),
            ),
            size="xs",
        ),
        class_name="mx-auto w-full max-w-sm py-12 flex flex-col gap-y-4",
    )

Группа

Оберните вложения в attachment.group, чтобы расположить их в горизонтально прокручиваемом, привязывающемся ряду с плавным переходом по краям.

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

briefing-notes.pdfPDF · 1.4 MB

workspace.pngPNG · 820 KB

customers.csvCSV · 18 KB

renderer.tsxTSX · 12 KB

import reflex as rx

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

items = [
    {"name": "briefing-notes.pdf", "meta": "PDF · 1.4 MB", "type": "file"},
    {
        "name": "workspace.png",
        "meta": "PNG · 820 KB",
        "src": "https://images.unsplash.com/photo-1497366754035-f200968a6e72?w=900&auto=format&fit=crop&q=80",
        "type": "image",
    },
    {"name": "customers.csv", "meta": "CSV · 18 KB", "type": "file"},
    {"name": "renderer.tsx", "meta": "TSX · 12 KB", "type": "file"},
]


def attachment_group_demo():
    return rx.el.div(
        attachment.group(
            [
                attachment.root(
                    attachment.media(
                        rx.el.img(src=item["src"], alt=item["name"]),
                        variant="image",
                    )
                    if item["type"] == "image"
                    else attachment.media(hi("File02Icon")),
                    attachment.content(
                        attachment.title(item["name"]),
                        attachment.description(item["meta"]),
                    ),
                    attachment.actions(
                        attachment.action(
                            hi("Cancel01Icon"), aria_label=f"Remove {item['name']}"
                        )
                    ),
                    class_name="w-64",
                )
                for item in items
            ],
            class_name="full",
        ),
        class_name="mx-auto w-full max-w-sm py-12",
    )

Триггер

Добавьте attachment.trigger, чтобы вся карточка открывала ссылку или диалог. Он заполняет карточку действий, поэтому действия остаются кликабельными.

Использованный реквизит: link, href, aria_label на attachment.trigger.

research-summary.pdfOpen preview dialog

import reflex as rx

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


def attachment_trigger_dialog_demo():
    return rx.el.div(
        dialog.root(
            attachment.root(
                attachment.media(hi("File01Icon")),
                attachment.content(
                    attachment.title("research-summary.pdf"),
                    attachment.description("Open preview dialog"),
                ),
                attachment.actions(
                    attachment.action(hi("Copy01Icon"), aria_label="Copy link"),
                    attachment.action(
                        hi("Cancel01Icon"), aria_label="Remove research-summary.pdf"
                    ),
                ),
                dialog.trigger(attachment.trigger(link=False)),
                class_name="w-full",
            ),
            dialog.popup(
                dialog.title("research-summary.pdf"),
                dialog.description(
                    "The attachment trigger fills the card and opens the dialog, "
                    "while the actions stay independently clickable above it."
                ),
                class_name="max-w-md rounded-2xl",
            ),
        ),
        class_name="mx-auto w-full max-w-sm py-12",
    )

Доступность

attachment.action отображает Button, а attachment.trigger отображает либо настоящий rx.el.button(), либо rx.el.a(), если для реквизита link установлено значение True. Следуйте приведенным ниже инструкциям, чтобы оба были работоспособными и объявленными.

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

attachment.action обычно содержит только значки, поэтому дайте каждому из них aria-label, описывающее действие и его цель.

attachment.action(
    hi("Cancel01Icon"), aria_label="Remove market-research.pdf"
)

Обозначьте триггер

attachment.trigger накладывает на все вложение кликабельную поверхность.

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

Триггер ссылки (открывает URL-адрес)

attachment.trigger(
    link=True,
    href=url,
    target="_blank",
    rel="noreferrer",
    aria_label="Open workspace.png",
)

Триггер кнопки (интерактивное действие)

attachment.trigger(
    on_click=handle_open,
    aria_label="Open attachment preview",
)

Триггер находится за действиями в порядке наложения, поэтому attachment.action и attachment.trigger никогда не перехватывают друг друга — оба остаются отдельно фокусируемыми и кликабельными.

Прокрутка клавиатуры

attachment.group прокручивается горизонтально. Когда его вложения интерактивны: триггер или действия, пользователи клавиатуры получают доступ к элементам за пределами экрана, нажимая на них. Для ряда презентационных вложений сделайте саму группу фокусируемой и прокручиваемой, добавив tabIndex={0}, role="group" и aria-label.

Значение за пределами цвета

Состояние error использует деструктивный цвет. Сохраните причину сбоя в attachment.description, чтобы состояние не передавалось только цветом.

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

вложение.корень

Контейнер корневого вложения.

Опора	Тип	По умолчанию	Описание
`state`	`Literal["idle", "uploading", "processing", "error", "done"]`	`"done"`	Состояние загрузки. Придает стиль и мерцание.
`size`	`Literal["default", "sm", "xs"]`	`"default"`	Размер прикрепления.
`orientation`	`Literal["horizontal", "vertical"]`	`"horizontal"`	Размещайте медиафайлы рядом с контентом или над ним.
`class_name`	`str`	-	Дополнительные классы, применяемые к корневому элементу.

вложение.медиа

Медиа-слот для предварительного просмотра значка или изображения.

Опора	Тип	По умолчанию	Описание
`variant`	`Literal["icon", "image"]`	`"icon"`	Содержит ли носитель значок или `<img>`.
`class_name`	`str`	-	Дополнительные классы для применения к медиа-слоту.

вложение.содержание

Обертывает заголовок и описание.

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

вложение.название

Имя вложения. Мерцает, пока прикреплен элемент uploading или processing.

Опора	Тип	По умолчанию	Описание
`class_name`	`str`	-	Дополнительные классы, которые можно применить к названию.

вложение.описание

Вторичные метаданные, такие как тип файла, размер или статус загрузки.

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

вложение.действия

Контейнер для одного или нескольких действий, выровненный по концу вложения.

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

вложение.действие

Кнопка действия. Отображает §§IC_85§§ и принимает все его реквизиты.

Опора	Тип	По умолчанию	Описание
`size`	`Literal["default", "xs", "sm", "lg", "icon", "icon-xs", "icon-sm", "icon-lg"]`	`"icon-xs"`	Размер кнопки.
`class_name`	`str`	-	Дополнительные классы для применения к действиям.

вложение.триггер

Наложение полной карты, которое активирует вложение. Отображает rx.el.button по умолчанию или rx.el.a, если link=True.

Опора	Тип	По умолчанию	Описание
`link`	`bool`	`False`	Если установлено, вместо кнопки отображается якорь (`rx.el.a`).
`aria_label`	`str \| None`	`None`	Метка доступности для программ чтения с экрана. Требуется, если видимый текст не существует.
`class_name`	`str`	`""`	К триггеру применены дополнительные классы CSS.

вложение.группа

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

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