avatar

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

XML-элемент

avatar

Java-класс

Avatar

Основы

ДЕМО

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

XML
<hbox padding="false" wrap="true">
    <avatar name="Homer Jay Simpson"/>
    <avatar name="Homer Jay Simpson" abbreviation="HS"/>
    <avatar id="avatarWithImage"/>
</hbox>
Java
@ViewComponent
protected Avatar avatarWithImage;
@Subscribe
protected void onInit(InitEvent event) {
    avatarWithImage.setImageHandler(
            DownloadHandler.forClassResource(getClass(), "/META-INF/resources/icons/homer-simpson.png")
    );
}

Если ни один из этих атрибутов не задан, аватар отображает резервное изображение.

Источник изображения

Компонент avatar может отображать изображение из различных источников. Путь к изображению можно задать декларативно с помощью атрибута image или установить программно.

Статическое изображение

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

По умолчанию статический контент расположен в /static, /public, /resources или /META-INF/resources в classpath (подробности см. в документации Spring Boot).

  • В XML:

    Если ваше изображение находится по пути /src/main/resources/META-INF/resources, например, /src/main/resources/META-INF/resources/icons/mary.png, вы можете указать его следующим образом:

    <avatar image="/icons/mary.png"/>

  • В Java:

    avatar.setImage("/icons/mary.png");

Изображение из URL

Аналогично, изображение можно загрузить с любого URL-адреса.

  • В XML:

    avatar.setImage("https://www.jmix.io/_nuxt/img/banner-img.d30b0fa.svg");

  • В Java:

    avatar.setImage("https://www.jmix.io/_nuxt/img/banner-img.d30b0fa.svg");

Изображение, предоставляемое DownloadHandler

ДЕМО

Изображение можно предоставить с помощью DownloadHandler.

Используйте фабричные методы com.vaadin.flow.server.streams.DownloadHandler для создания обработчика источника изображения.

Например, DownloadHandler.forClassResource() создаёт обработчик для изображения, расположенного в classpath приложения.

@ViewComponent
protected Avatar avatarWithImage;
@Subscribe
protected void onInit(InitEvent event) {
    avatarWithImage.setImageHandler(
            DownloadHandler.forClassResource(getClass(), "/META-INF/resources/icons/homer-simpson.png")
    );
}

Варианты темы

ДЕМО

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

Вариант Описание Поддерживается в

xsmall

Делает аватар очень маленьким.

Aura, Lumo

small

Делает аватар маленьким.

Aura, Lumo

large

Делает аватар большим.

Aura, Lumo

xlarge

Делает аватар очень большим.

Aura, Lumo

filled

Применяет заливку поверхности.

Aura

Атрибуты

avatar имеет следующие уникальные атрибуты:

Имя Описание По умолчанию

abbreviation

Устанавливает аббревиатуру для отображения в компоненте.

—

colorIndex

Указывает цвет фона для компонента аватара.

—

image

Указывает путь к ресурсу изображения.

—

name

Устанавливает имя владельца аватара.

—

avatar имеет следующие общие атрибуты:

id - alignSelf - classNames - colspan - css - height - maxHeight - maxWidth - minHeight - minWidth - themeNames - visible - width

Обработчики

avatar имеет следующие общие обработчики:

AttachEvent - DetachEvent

Смотрите также