icon

icon отображает изображение, полученное из набора значков. Есть два встроенных набора значков: Vaadin и Lumo.

XML-элемент

icon

Java-класс

Icon

Основы

ДЕМО

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

XML
<layout>
    <hbox id="content" padding="false" alignItems="CENTER" wrap="true">
        <button icon="CHECK" themeNames="icon"/>
        <icon icon="vaadin:smiley-o"/>
        <textField id="field" placeholder="Field"/>
    </hbox>
</layout>
Java
@ViewComponent
protected TypedTextField<String> field;
@ViewComponent
protected HorizontalLayout content;

@Subscribe
protected void onInit(InitEvent event) {
    field.setSuffixComponent(VaadinIcon.QUESTION_CIRCLE.create());

    Icon icon = ComponentUtils.parseIcon("lumo:user");
    content.add(icon);
}

Наборы иконок

Существуют два встроенных набора, содержащих часто используемые иконки: Vaadin и Lumo. Чтобы различать наборы, добавьте его префикс перед именем иконки. Если префикс отсутствует, используется набор Vaadin.

<icon icon="USER"/>
<icon icon="vaadin:user"/>
<icon icon="lumo:user"/>

Компоненты с иконками

Иконка может быть частью компонента. Смотрите пример использования иконки с компонентом button.

Атрибуты

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

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

color

Устанавливает цвет значка.

—

icon

Указывает значок, который будет отображаться.

—

size

Определяет размер значка.

—

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

id - alignSelf - classNames - clickShortcut - colspan - css - visible

Обработчики

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

Имя Описание

ClickEvent

com.vaadin.flow.component.ClickEvent запускается при щелчке по компоненту.

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

AttachEvent - DetachEvent

Элементы

Компонент icon может содержать следующие вложенные элементы: tooltip.

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