CODEWITHSUNDEEP
progress-barvaadin
user9630935
user9630935

Reputation: 369

How to show the label in a vaadin progress bar

How can i show the label in the vaadin progress bar, for example if the progress bar value is 0.5. I wanted to show the value in the middle of the progress bar. Something like '50' in integer or float form. How can i do it. I have my .scss code below.

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

  }

should i include .v-progressbar-label ? please help.

Upvotes: 1

Views: 540

Answers (1)

Tatu Lund
Tatu Lund

Reputation: 10643

Based on styles you list and mentioning of .scss, I assume your question is about Vaadin 8 ProgressBar component.

There is no integrated label in ProgressBar, there is naturally caption, but I assume you do not want to change that.

I would propose you to create separate Label component, which you can use to display the value and define styles as you wish. E.g. you can wrap both the ProgressBar and Label inside CssLayout. Then you can set the Label to have absolute positioning and z-index in the CssLayout so that it appears on top of the ProgressBar in the middle.

Upvotes: 2

Related Questions