Ваадин поток пользовательских стилей - PullRequest
Новая
       8

Ваадин поток пользовательских стилей

0 голосов
/ 04 мая 2018

Здравствуйте. Я пытаюсь определить мои собственные стили для vaadin компонентов. У меня есть файл html с styles, который выглядит так: 

<link rel="import" href="../bower_components/vaadin-lumo-styles/color.html">
<link rel="import" href="../bower_components/vaadin-lumo-styles/typography.html">


<dom-module id="css-style-example" theme-for="vaadin-button">
    <template>
        <style include="vaadin-button-default-theme">
        .card {
            box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
            transition: 0.3s;
            width: 40%;
        }
        .card:hover {
            box-shadow: 0 8px 16px 0 rgba(0,0,0,50);
            transform: scale(1.05, 1.05)
        }
        </style>
    </template>
</dom-module>

Это gradle проект, и этот file находится в /src/main/resources/frontend/styles.

Я пытаюсь использовать этот style на моем button компоненте так: 

@HtmlImport("frontend://styles/shared-styles.html")
public class BasePageView extends VerticalLayout { 
    .
    .
    .
    homeButton.setClassName("card");
}

Но я как-то не могу заставить эту вещь работать. Я очень новичок в css, поэтому простите меня за любые глупые ошибки.

Я искал на github несколько примеров, но я немного растерялся, и я был бы признателен, если бы кто-нибудь объяснил мне, как именно я могу определить style для, скажем, vaadin потока button? Спасибо за любую помощь.

1 Ответ

0 голосов
/ 04 мая 2018

Вместо dom-модуля (который предназначен для кнопки vaadin), используйте <custom-style> вместо этого, который используется для глобальных стилей: 

<custom-style>
  <style>
    .card {
        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
        transition: 0.3s;
        width: 40%;
    }
    .card:hover {
        box-shadow: 0 8px 16px 0 rgba(0,0,0,50);
        transform: scale(1.05, 1.05)
    }
  </style>
</custom-style>

Для получения дополнительной информации о стилях компонентов Vaadin, пожалуйста, прочитайте эти руководства: https://github.com/vaadin/vaadin-themable-mixin/wiki

...