Как показать метку в прогресс-баре vaadin

Question

Как я могу показать метку на индикаторе прогресса 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? пожалуйста помоги.

Answer 1

Исходя из перечисленных вами стилей и упоминания .scss, я предполагаю, что ваш вопрос касается компонента Vaadin 8 ProgressBar.

В ProgressBar нет встроенной метки, естественно, есть заголовок, но я предполагаю, что вы не хотите это менять.

Я бы предложил вам создать отдельный компонент Label, который вы можете использовать для отображения значения и определения стилей по своему усмотрению. Например. вы можете обернуть ProgressBar и Label внутри CssLayout. Затем вы можете установить для Label абсолютное позиционирование и z-индекс в CssLayout, чтобы он отображался в верхней части ProgressBar в середине.