avatar

ДЕМО

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

  • XML-элемент: avatar

  • Java-класс: Avatar

Основы

В приведённом примере показаны четыре возможных варианта содержимого для компонента avatar.

avatar basic 
<avatar image="/icons/mary.png" abbreviation="MJ" name="Mary Elizabeth Jones"/>
<avatar abbreviation="MJ" name="Mary Elizabeth Jones"/>
<avatar name="Mary Elizabeth Jones"/>
<avatar/>

Обратите внимание на приоритет атрибутов: сначала отображается image. Если изображение не задано или не может быть отображено, вместо него показывается значение сокращения (abbreviation). Если не заданы ни изображение, ни сокращение, отображаются первые буквы имени (name). Также предусмотрено запасное изображение, которое показывается, если отсутствует любое другое содержимое.

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

Компонент 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 приложения.

avatar.setImageHandler(
        DownloadHandler.forClassResource(
                getClass(), "/META-INF/resources/icons/mary.png")
);

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

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

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

xsmall

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

Aura, Lumo

small

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

Aura, Lumo

large

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

Aura, Lumo

xlarge

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

Aura, Lumo

filled

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

Aura

Атрибуты

id - abbreviation - alignSelf - classNames - colorIndex - colspan - css - height - image - maxHeight - maxWidth - minHeight - minWidth - name - themeNames - visible - width

abbreviation

Устанавливает сокращение для отображения в компоненте. Это могут быть инициалы или другая короткая форма для идентификации владельца аватара. Рекомендуется ограничиваться 2–3 символами.

colorIndex

Задает цвет фона для компонента avatar. Доступно семь различных цветов, соответствующих индексам от 0 до 6.

avatar colorindex

image

Задает путь к ресурсу изображения. Изображение может быть получено из каталога статических ресурсов или загружено с произвольного URL.

name

Задает имя владельца аватара.

Обработчики

AttachEvent - DetachEvent

Чтобы сгенерировать заглушку обработчика в Jmix Studio, используйте вкладку Handlers панели инспектора Jmix UI, или команду Generate Handler, доступную на верхней панели контроллера экрана и через меню Code → Generate (Alt+Insert / Cmd+N).

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

Дополнительную информацию смотрите в документации Vaadin.