Изменить значки компонентов в Vaadin Flow

Как я могу заменить значки, используемые в компонентах Vaadin Flow (календарь, загрузка и т. Д.), Своими собственными значками? Это вообще возможно? Я ничего не видел в API компонента, и похоже, что значки - это значки шрифтов, а не обычные значки железа.


vaadin vaadin-flow
person Steffen Harbich    schedule 19.04.2020    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Да, значки компонентов реализованы с использованием значков шрифтов. Основная причина заключалась в том, что их нужно настраивать с помощью темы (CSS), что казалось невозможным с помощью iron-icon. В конце концов, мы хотим перейти к использованию SVG и для значков компонентов.

Итак, чтобы настроить значки компонентов, вам нужно написать таблицу стилей компонентов, в которой вы меняете значок. Вы можете создать свой собственный шрифт значка или использовать фоновое изображение CSS. У последнего варианта есть обратная сторона: невозможно легко изменить цвет без замены всего изображения.

В качестве примера вот что вы бы написали для компонента vaadin-date-picker (при условии, что это то, что вы имели в виду под «календарем»).

[part="toggle-button"]::before {
  content: ""; /* Remove the existing font based icon */
  background-image: url(...); /* data uri */
}

Используйте URI данных в кодировке base64, чтобы не беспокоиться об использовании относительных или абсолютных путей для изображения.

Чтобы использовать эту таблицу стилей в приложении на основе Flow, поместите файл CSS в папку frontend в своем приложении и добавьте следующее:

@CssImport(value = "my-styles.css", themeFor="vaadin-date-picker")
person Jouni    schedule 20.04.2020
comment
Спасибо за объяснение. Я попробую использовать фоновое изображение. И да, вы правы, я имел в виду выбор даты. - person Steffen Harbich; 20.04.2020