Question

我的问题很基本。

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

我想做什么不：

PolymerTemplate
getStlye（）。set（...）

我必须@ImportHtml，其中包括CSS代码，还是必须@StyleSheet和CSS文件？然后，是否需要通过.getElement（）。getClassList（）。add（...）添加“ css样式”？

我真的需要帮助，以获取标签，按钮或其他内容的工作简单代码示例。我找不到满足我要求的东西。

Answer 1

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

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

如果您的目标不在影子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

通过CSS的Vaadin Flow / 10/11样式组件

1 个答案: