3

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

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

4

2 回答 2

5

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

瓦丁 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;
 }

瓦丁 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。

请注意，这仅在使用 Reindeer 主题和默认背景颜色 #F5F5F5 时有效。如果您使用其他主题或背景颜色与原始颜色不同，则必须对其进行一些调整。

于 2013-02-20T20:37:20.600 回答
1

文本字段由以下 HTML 表示：

<input type="text" class="v-textfield v-widget" tabindex="0" style="">

应用这个怎么样：如何删除文本/输入框周围的边框（轮廓）？(Chrome)在“v-textfield v-widget”CSS 上？

于 2013-02-17T12:33:08.677 回答