如何使用 CSS 来设置表单组件的样式? [英] How do I use CSS to style my form components?

问题描述

Vaadin 如何使用纯粹为 HTML 元素编写的 CSS(例如 body、h1 等元素的样式和布局)并在 Vaadin 中使用完全相同的 CSS 样式?

How does Vaadin use CSS that was written purely for HTML elements (e.g. styling and layout of body, h1, etc elements) and use that exact CSS style in Vaadin?

是否需要对 CSS 进行更改以映射到相应的 Vaadin 元素，还是可以按原样使用该 CSS?

Does one need to make changes on the CSS to map to corresponding Vaadin elements, or can one use that CSS as is?

推荐答案

您可以按原样使用 CSS，但您(自然地)必须通过调用来告诉 Vaadin 使用哪些 CSS 类

You can use the CSS as is, but you'll (naturally) have to tell Vaadin which CSS classes to use by calling

myComponent.setStyleName("myStyleClass");

或

myComponent.addStyleName("myStyleClass");

两者之间的区别在于 setStyleName 将所有现有样式替换为提供的样式，而 addStyleName 不会替换任何内容，而是为组件添加提供的样式.

The difference between the two is that setStyleName replaces all existing styles with the provided one and addStyleName doesn't replace anything but adds the provided style for the component.

您还可以修改 CSS 以覆盖默认的 Vaadin 样式，例如

You can also modify your CSS to override default Vaadin styles, for example

.v-panel .v-panel-content {
    background: yellow;
}

会将每个面板的背景颜色更改为黄色.

would change every Panel's background color to yellow.

我建议您创建一个基于现有 Vaadin 主题的新主题.方法如下:

I recommend that you create a new theme which is based on an existing Vaadin theme. Here's how to:

1. 在 VAADIN/themes/目录中创建一个目录(例如 VAADIN/themes/myTheme).
2. 在您的主题目录中创建styles.css.
3. 将 @import "../runo/styles.css"; 添加到你的 style.css 的开头(你可以用任何其他现有的主题替换 runo).
4. 在您的 Vaadin 应用程序类中调用 setTheme(myTheme);.
5. 如果您想应用应用程序范围的样式，请覆盖 style.css 中的 Vaadin 组件 CSS 定义.如果您不知道 CSS 类的名称，您可以使用 firebug 并检查 HTML 元素的类.
6. 如果要创建特定于组件的样式，请在styles.css 中定义它并调用setStyleName 或addStyleName 方法.

1. Create a directory in the VAADIN/themes/ directory (eg. VAADIN/themes/myTheme).
2. Create styles.css in your theme directory.
3. Add @import "../runo/styles.css"; to the beginning of your styles.css (you can replace runo by any other existing theme).
4. Call setTheme(myTheme); in your Vaadin application class.
5. If you want to apply application-wide styles, override the Vaadin component CSS definitions in your styles.css. If you don't know the names of the CSS classes, you can use firebug and check the HTML elements' classes.
6. If you want to create a component-specific style, define it in styles.css and call setStyleName or addStyleName methods.

在此处查看《Vaadin 之书》中的 CSS 条目.

See the CSS entry in the Book of Vaadin here.

这篇关于如何使用 CSS 来设置表单组件的样式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！