Vaadin 流自定义样式

Question

您好，我正在尝试在 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。

我正在尝试在我的 button 组件上使用这个 style，如下所示：

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

但不知何故我无法使它正常工作。我是 css 的新手，所以请原谅我的任何愚蠢错误。

我在 github 上搜索了一些例子，但我有点迷路了，如果有人能向我解释我究竟如何定义 [=16]，我将不胜感激=] 比方说，vaadin 流 button ？感谢您的帮助。

Answer 1

使用 <custom-style> 代替 dom 模块（以 vaadin-button 为目标），它用于全局样式：

<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

Vaadin 流自定义样式

Vaadin flow custom styles

java

css

frontend

vaadin

vaadin10