vaadin css,CSS标签样式Vaadin

您可以在自己的主题中覆盖Vaadin样式。如果您还没有主题，请在名为themes的VAADIN目录下创建一个目录，然后根据主题名称在主题中创建一个子目录，例如。 mytheme的。

Vaadin 6：

呼叫setTheme("mytheme")在你的应用程序类

呼叫myTextField.setStyleName("labelstyle");在你的代码

在新的主题目录中创建styles.css的。

添加Styles.css中的以下内容：

styles.css的：

@import "../reindeer/styles.css";

.v-textfield-labelstyle {

background: none repeat scroll 0 0 #F5F5F5;

border-color: #F5F5F5;

border-image: none;

border-left: 1px solid #F5F5F5;

border-radius: 3px 3px 3px 3px;

border-right: 1px solid #F5F5F5;

border-style: solid;

border-width: 1px;

}

Vaadin 7：

添加@Theme("mytheme")标注在UI类

在您的代码中拨打myTextField.setStyleName("labelstyle");

创建样式。 scss在您的新主题目录中。

以样式添加以下内容。 SCSS

styles.css的：

@import "../reindeer/reindeer.scss";

.mytheme {

@include reindeer;

.v-textfield-labelstyle {

background: none repeat scroll 0 0 #F5F5F5;

border-color: #F5F5F5;

border-image: none;

border-left: 1px solid #F5F5F5;

border-radius: 3px 3px 3px 3px;

border-right: 1px solid #F5F5F5;

border-style: solid;

border-width: 1px;

}

}

在主题目录调用java -cp '../../../WEB-INF/lib/*' com.vaadin.sass.SassCompiler styles.scss styles.css编译你的主题

这种小伎俩会给你一个标签般的文本字段当聚焦时它变成正常的TextField。

请注意，这只适用于使用驯鹿主题和默认背景颜色＃F5F5F5。如果您使用其他主题或背景颜色与原始颜色不同，则必须稍微调整一下。