如何设置警告标签的样式

Question

我希望有一个类似于失败和成功样式的警告标签样式（如requested here）。

我尝试在代码中设置图标，但结果是这样的（左：失败样式，右：我的尝试）：

我想要一个橙色边框和一个橙色警告图标。

编辑：在评论中显示一些代码。

label1.setStyleName(ValoTheme.LABEL_FAILURE); // left
label2.setIcon(FontAwesome.WARNING); // right

Answer 1

成功/失败标签都定义为here（Vaadin 7.5的Valo主题）。因此，您可以根据此代码创建自己的代码。在应用程序主题中添加以下内容：

$warning-color: orange;

.v-label-warning {
  background: $v-textfield-background-color;
  color: valo-font-color($v-textfield-background-color);
  border: 2px solid $warning-color;
  border-radius: $v-border-radius;
  padding: round($v-unit-size/5) round($v-unit-size/2) round($v-unit-size/5) round($v-unit-size);
  font-weight: $v-font-weight + 100;
  font-size: round($v-font-size * 0.95);

  &:before {
    font-family: FontAwesome;
    content: "\f071";
    margin-right: .5em;
    margin-left: round($v-unit-size/-2);
    color: $warning-color;
  }
}

请注意，这基本上只做了两件事：在开头为颜色引入一个新的var（然后用于图标和边框）并使用bundled FontAwesome中的连字。

与标签相关的样式名称为warning。所以在标签上做setStyleName("warning")。

这是针对Vaadin 7.5.5进行测试的。如果您的版本不同，您可能需要检查上面链接的文件以确保从那里复制并采用。如果您想要的不仅仅是这个，我建议创建一个@mixin来减少（甚至更多）复制和粘贴代码。