如何在 vaadin 进度条中显示标签答案

【问题标题】：How to show the label in a vaadin progress bar如何在 vaadin 进度条中显示标签
【发布时间】：2018-06-25 11:30:56
【问题描述】：

如何在 vaadin 进度条中显示标签，例如，如果进度条值为 0.5。我想在进度条中间显示值。整数或浮点形式的“50”之类的东西。我该怎么做。我在下面有我的 .scss 代码。

.v-progressbar-fat .v-progressbar-wrapper {
    height: 60px;
    font-size: 10px;
    font-weight: bold;
    content: attr(value)'%';

  }

我应该包括 .v-progressbar-label 吗？请帮忙。

【问题讨论】：

标签： progress-bar vaadin

【解决方案1】：

根据您列出的样式并提到 .scss，我认为您的问题是关于 Vaadin 8 ProgressBar 组件。

ProgressBar 中没有集成标签，自然有标题，但我假设您不想更改它。

我建议您创建单独的 Label 组件，您可以使用它来显示值并根据需要定义样式。例如。您可以将 ProgressBar 和 Label 都包装在 CssLayout 中。然后可以在 CssLayout 中设置 Label 具有绝对定位和 z-index ，使其出现在中间 ProgressBar 的顶部。

【讨论】：

谢谢@Tatu Lund。我最初使用了垂直布局，然后在其上使用了水平布局。所以它看起来像一个网格。我为水平布局添加了四个组件。例如标签、进度条、标签和标签。在这个进度条中，我想在它上面添加两个标签。现在我怎样才能使用绝对或 css 布局。