3

こんにちは、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です。助けてくれてありがとう。

4

1 に答える 1