Ваадин 10 / Поток темы с Lumo - PullRequest
Новая
       7

Ваадин 10 / Поток темы с Lumo

0 голосов
/ 03 июля 2018

У меня проблемы с пониманием темы Vaadin 10: я прочитал всю документацию на сайте, но не могу решить свою проблему.

Например: если я запускаю простое приложение Vaadin 8 с нуля, когда я останавливаю сервер, я получаю хорошее уведомление от отключения:

enter image description here

Но с новым Vaadin 10 Starter (база проекта) я получаю это безобразное уведомление enter image description here

Оба приложения являются стандартными без какого-либо редактирования с Vaadin стартеров. Я попытался поиграть с shared-styles.html , но безуспешно.

Мои вопросы, все vaadin 10, связанные:

  1. Является ли тема Lumo с таким внешним видом по умолчанию или выглядит так, потому что мне не хватает некоторых импортов или настроек?
  2. Как я могу применить «темный» стиль для темы Lumo (я имею в виду все приложение)?
  3. Как и где я могу применить глобальную переменную стиля, например, другой основной цвет или цвет фона?

Спасибо

1 Ответ

0 голосов
/ 03 июля 2018
  1. Это внешний вид по умолчанию.
  2. Пометьте компоненты маршрутизатора с помощью @Theme(value = Lumo.class, variant = Lumo.DARK).
  3. Вы можете использовать пользовательские свойства CSS Lumo в правиле CSS в файле стилей. Например: html{--lumo-base-color: aliceblue;}.

Пример использования аннотации @Theme для обычного MainView класса: 

@Route ( "" )
@Theme ( value = Lumo.class, variant = Lumo.DARK )  // ⬅ Add annotation 
public class MainView extends VerticalLayout { … }

А вот как вы можете настроить уведомление об отключении: 

<custom-style>
  <style>
    html {
      --lumo-base-color: aliceblue;
    }

    .v-reconnect-dialog {
      visibility: visible;
      border: 1px solid lightslategray;
      background-color: slategray;
      color: lightgray;
      box-shadow: 0.2em 0.2em 0.2em rgba(0, 0, 0, .4);
      border-radius: 4px;
    }

    .custom {
      color: lightskyblue;
    }
  </style>
</custom-style>
...