Vaadin Flow / 10/11风格组件通过css

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vaadin Flow / 10/11风格组件通过css相关的知识,希望对你有一定的参考价值。

我的问题非常基本。

如何将css文件中的样式添加到基本的vaadin组件?

我不想用的东西:

  • PolymerTemplate
  • getStlye()。集(...)

我是否必须使用@Importhtml,其中包含css代码,还是必须使用带有css文件的@StyleSheet?然后,我是否必须通过.getElement()。getClassList()。add(...)添加“css-style”?

我真的需要帮助来为Label,Button或whatsever提供一个简单的代码示例。我找不到满足我要求的东西。

答案

在我们的documentation中,我们指导在MainView中使用@ImportHtml作为html样式模块的全局样式。

在全局样式模块中,您可以应用themable mixins来更改组件的可设置阴影部分等。

如果您的目标不在shadow DOM中,您可以直接在自定义样式块中设置样式,例如

假设您的应用程序中有Label和TextField

   // 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);
      ...
   

在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>

并且您的“标题”文本将采用棕色粗体字体,文本字段中的值将为红色,但其标题不受影响。

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

以上是关于Vaadin Flow / 10/11风格组件通过css的主要内容,如果未能解决你的问题,请参考以下文章

Vaadin Flow TextField:如何动态更改字体颜色?

Vaadin Flow & Spring Boot 无法通过 servlet 上下文找到资源

Vaadin Flow:删除 PollListener

Vaadin 21 Flow + Spring Security OAuth2:找不到'oauth2/authorization/google'的路由

在 Vaadin Flow 中的布局中居中小部件

Vaadin Flow 应用程序自动在明暗模式之间切换