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");

Потоковое изображение

Изображение может быть предоставлено через InputStream.

  • В Java: интерфейс StreamResource.

    StreamResource streamResource = new StreamResource("icon",
        ()-> getClass().getResourceAsStream("/META-INF/resources/icons/mary.png"));
avatar.setImageResource(streamResource);

Атрибуты

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

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

themeNames

По умолчанию компонент имеет стандартный средний размер. Доступно четыре варианта размера:

  • xsmall

  • small

  • large

  • xlarge

Обработчики

AttachEvent - DetachEvent

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

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

Смотрите документацию Vaadin для получения дополнительной информации.