Vaadin Flow/10/11 style component via css

廉价感情. 提交于 2019-12-02 09:54:31

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

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