Vaadin Flow/10/11 style component via css

时光怂恿深爱的人放手 提交于 2019-12-02 18:07:19

问题


My question is pretty basic.

How to add styling from a css-file to a basic vaadin component?

What I do NOT want to use:

  • PolymerTemplate
  • getStlye().set(...)

Do I have to @ImportHtml, which includes the css-code or do I have to @StyleSheet with the css-file? And afterwards, do I have to add the "css-style" via .getElement().getClassList().add(...)?

I really need help to have a working simple code example for a Label, Button or whatsever, please. I cannot find anything to satisfy my requirements.


回答1:


In our documentation we guide to use @ImportHtml in MainView for global styles as a html style module.

In the global style module you can apply themable mixins to change stylable shadow parts, etc. of the components.

In case your target is not in shadow DOM, you can set the styles in custom styles block directly, e.g.

Say you have a Label and TextField in your application

   // If styles.html is in src/main/java/webapp/frontend/ path is not needed
   @HtmlImport("styles.html")
   public class MainLayout extends VerticalLayout implements RouterLayout { 
      ...
      Label label = new Label("Title");
      label.addClassName("title-label");
      add(label);
      ...
      TextField limit = new TextField("Limit");
      limit.addClassName("limit-field");
      add(limit);
      ...
   }

And in src/main/java/webapp/frontend/styles.html

   <custom-style>
      <style>
         .title-label {
            color: brown;
            font-weight: bold;
          }
          ...
      </style>
   </custom-style>

   <dom-module theme-for="vaadin-text-field" id="limit-field">
      <template>
         <style>
            :host(.limit-field) [part="value"]{
               color:red
            }
         </style>
      </template>
   </dom-module>

And your "Title" text will have brown bold font, and the value in text field will be red, but its title un-affected.

See also: Dynamically changing font, font-size, font-color, and so on in Vaadin Flow web apps



来源:https://stackoverflow.com/questions/53141129/vaadin-flow-10-11-style-component-via-css

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!