Аватар. Легко настраиваемый компонент аватара

который отображает изображение профиля пользователя, инициалы или запасной значок.

❯buridan add аватар. легко настраиваемый компонент аватара

Error: Reference Target 'аватар' not found

Примеры

Базовый

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

Использованный реквизит: src на avatar.image; Для avatar.fallback реквизит не требуется.

Error: Reference Target 'аватар_базовый' not found

Значок

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

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

Error: Reference Target 'аватар_с_значком' not found

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

avatar.badge(class_name="bg-green-600 dark:bg-green-800")

Значок со значком

Вы также можете визуализировать значок внутри avatar.badge.

Использованный реквизит: не требуется — передайте значок как дочерний элемент.

import reflex as rx

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


def avatar_badge_icon() -> rx.Component:
    fallback_id = "avatar-badge-icon-fallback"

    return avatar.root(
        avatar.image(
            src="https://avatars.githubusercontent.com/u/104714959?s=200&v=4",
            fallback_id=fallback_id,
            custom_attrs={"alt": "Reflex Dev"},
        ),
        avatar.fallback(
            "RD",
            fallback_id=fallback_id,
        ),
        avatar.badge(
            hi("PlusSignIcon"),
        ),
    )

Группа аватаров

Используйте avatar.group для визуализации группы перекрывающихся аватаров.

Используемый реквизит: для avatar.group не требуется — оборачивает несколько дочерних элементов avatar.root.

Error: Reference Target 'аватар_как_группа' not found

Количество групп аватаров

Используйте avatar.group_count, чтобы отобразить счетчик «+N» в конце группы.

Использованный реквизит: не требуется — текст счетчика передается как дочерний элемент.

import reflex as rx

from components.ui.avatar import avatar


def avatar_with_group_count() -> rx.Component:
    return avatar.group(
        avatar.root(
            avatar.image(
                src="/avatars/10.png",
                alt="@avatar-10",
            ),
            avatar.fallback("AH"),
        ),
        avatar.root(
            avatar.image(
                src="/avatars/01.png",
                alt="@avatar-1",
            ),
            avatar.fallback("RD"),
        ),
        avatar.root(
            avatar.image(
                src="/avatars/02.png",
                alt="@avatar-2",
            ),
            avatar.fallback("LI"),
        ),
        avatar.group_count("+3"),
        class_name="grayscale",
    )

Группа аватаров со значком

Вы также можете визуализировать значок внутри avatar.group_count.

Использованный реквизит: не требуется — передайте значок как дочерний элемент.

import reflex as rx

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


def avatar_group_count_icon() -> rx.Component:
    return avatar.group(
        avatar.root(
            avatar.image(
                src="https://doesnotexist.com",
                alt="@none-dev",
            ),
            avatar.fallback("AH"),
        ),
        avatar.root(
            avatar.image(
                src="https://avatars.githubusercontent.com/u/104714959?s=200&v=4",
                alt="@reflex-dev",
            ),
            avatar.fallback("CN"),
        ),
        avatar.root(
            avatar.image(
                src="https://avatars.githubusercontent.com/u/84860195?v=4",
                alt="LineIndent",
            ),
            avatar.fallback("LI"),
        ),
        avatar.group_count(
            hi("PlusSignIcon"),
        ),
        class_name="grayscale",
    )

Размеры

Используйте параметр size, чтобы изменить размер аватара.

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

Error: Reference Target 'размеры_аватара' not found

Раскрывающийся список

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

Использованный реквизит: size на avatar.root; см. документацию Menu для реквизитов, специфичных для меню.

import reflex as rx

from components.ui.avatar import avatar
from components.ui.menu import menu


def avatar_dropdown_menu() -> rx.Component:
    return menu.root(
        menu.trigger(
            rx.el.img(
                src="https://github.com/LineIndent.png",
                alt="lineindent",
                class_name=avatar.class_names.IMAGE,
            ),
            class_name=avatar.class_names.ROOT,
        ),
        menu.content(
            menu.item("Profile"),
            menu.item("Billing"),
            menu.item("Settings"),
        ),
    )

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

аватар.root

Корневой компонент, который оборачивает изображение аватара и резервный вариант.

avatar.root(
    avatar.image(src="/avatars/01.png"),
    avatar.fallback("RD"),
)

Опора	Тип	По умолчанию
`size`	`Literal["default", "sm", "lg", "xl"]`	`"default"`
`class_name`	`str`	`""`

аватар.изображение

Отрисовывает <img> и проверяет его src на клиентской стороне при монтировании — если ему не удается загрузиться, он скрывается и автоматически раскрывает родственный avatar.fallback. Никакой проводки fallback_id не требуется.

avatar.image(src="/avatars/01.png", custom_attrs={"alt": "@shadcn"})

Опора	Тип	По умолчанию
`src`	`str`
`id`	`str`	автоматически созданный
`class_name`	`str`	`""`

Любой другой реквизит, принятый нативным <img>, также передается напрямую.

аватар.резервный вариант

Отображается автоматически, когда avatar.image не загружается.

avatar.fallback("RD")

Опора	Тип	По умолчанию
`class_name`	`str`	`""`

аватар.значок

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

avatar.badge(hi("BadgeCheck01Icon"))

Опора	Тип	По умолчанию
`class_name`	`str`	`""`

аватар.группа

Отображает группу аватаров с перекрывающимися стилями.

avatar.group(
    avatar.root(...),
    avatar.root(...),
)

Опора	Тип	По умолчанию
`class_name`	`str`	`""`

avatar.group_count

Отображает индикатор количества в конце группы аватаров.

avatar.group_count("+3")

Опора	Тип	По умолчанию
`class_name`	`str`	`""`