如何设置警告标签的样式

Question

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

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

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

编辑：显示评论中要求的一些代码。

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

Answer 1

两个 success/failure 标签都已定义 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;
  }
}

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

标签的样式名称是warning。所以在标签上做一个setStyleName("warning")。

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

如何设置警告标签的样式

How to style a warning label

css

vaadin

vaadin7