通过CSS的Vaadin Flow/10/11样式组件 [英] Vaadin Flow/10/11 style component via css

问题描述

我的问题很基本.

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

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

我想不使用的内容

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

我必须@ImportHtml，其中包括CSS代码，还是必须@StyleSheet和CSS文件?然后，是否需要通过.getElement().getClassList().add(...)添加"css样式"?

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.

推荐答案

在我们的

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

在全局样式模块中，您可以应用他们可能的mixins 来更改样式组件的阴影部分等.

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

如果目标不在影子DOM中，则可以直接在自定义样式块中设置样式，例如

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

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

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

在src/main/java/webapp/frontend/styles.html中

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.

另请参阅: 查看全文