CSS 标签样式 Vaadin

Question

我正在尝试在 Vaadin 中进行内联编辑。我认为实现这一目标的好方法是造型文本字段使它们看起来像标签，并在获得焦点时切换到文本字段的样式。

是否可以将文本字段样式设置为看起来像标签？如果可能，我怎样才能做到？

Answer 1

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

Vaadin 6:

1. 在您的应用程序类中调用setTheme("mytheme")
2. 在您的代码中调用 myTextField.setStyleName("labelstyle");
3. 在您的新主题目录中创建 styles.css。
4. 在 styles.css 中添加以下内容:

样式.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:

1. 在您的 UI 类中添加 @Theme("mytheme") 注释
2. 在您的代码中调用 myTextField.setStyleName("labelstyle");
3. 在您的新主题目录中创建样式。scss。
4. 在样式中添加如下内容。scss

样式.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;
    }
}

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

这个小技巧会给你一个类似标签的 TextField，它在获得焦点时变成一个普通的 TextField。

请注意，这仅在使用驯鹿主题和默认背景颜色#F5F5F5 时有效。如果您使用其他主题或背景颜色与原始颜色不同，则需要稍微调整一下。