Vaadin 흐름 사용자 정의 스타일

질문

안녕하세요, vaadin component에서 사용자 정의 스타일을 정의하려고합니다. 다음과 같은 스타일 을 가진 html 파일이 있습니다.

<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 프로젝트이며이 파일 은 / src / main / resources / frontend / styles에 있습니다.

내 button component에서이 스타일 을 다음과 같이 사용하려고합니다.

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

그러나 나는 어떻게 든이 일을 할 수 없습니다. 나는 css 를 처음 사용하므로 멍청한 실수를 용서해주십시오.

몇 가지 예를 들어 github 에서 검색했지만 다소 잃어 버렸고 누군가가 style 을 어떻게 정확하게 정의 할 수 있는지 설명해 주시면 감사하겠습니다. > vaadin 흐름 버튼 ? 도움을 주셔서 감사합니다.

답변1

vaadin-button을 대상으로하는 dom-module 대신 을 사용하십시오. 전역 스타일에 사용됩니다.

<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

 

 

 

 

출처 : https://stackoverflow.com/questions/50174807/vaadin-flow-custom-styles