【问题标题】: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 布局。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2017-05-16
    • 2012-09-09
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多