Изменить значки компонентов в Vaadin Flow - PullRequest
Новая
       39

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

0 голосов
/ 19 апреля 2020

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

1 Ответ

2 голосов
/ 20 апреля 2020

Да, значки компонентов реализованы с помощью значков шрифтов. Основная причина заключалась в том, что они должны быть настроены с темой (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, чтобы вам не приходилось беспокоиться об использовании относительных или абсолютных путей для изображения.

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

@CssImport(value = "my-styles.css", themeFor="vaadin-date-picker")
...