Quasar: Add label in Linear Progress

Created on 20 Oct 2019  路  3Comments  路  Source: quasarframework/quasar

I think it is a nice feature if we can display a label in linear progress.
I just edited the image in paint to demo example.

image

feature request

Most helpful comment

Better example:
https://codepen.io/rstoenescu/pen/GRRrRgE?&editable=true&editors=101

From updated docs:

To add a label to the progress bar you can use the default slot. Take care to:

  • use a size big enough to allow showing the label
  • set a text color for the label so that it is visible both on the filled and unfilled areas, or use text-shadow CSS, or use a QBadge as in the example blow

All 3 comments

Just add what you want in the default slot of the QLinearProgreee, like here:
https://codepen.io/pdanpdan/pen/qBBqGWL?editors=1010

@pdanpdan Please add this example in docs.

Better example:
https://codepen.io/rstoenescu/pen/GRRrRgE?&editable=true&editors=101

From updated docs:

To add a label to the progress bar you can use the default slot. Take care to:

  • use a size big enough to allow showing the label
  • set a text color for the label so that it is visible both on the filled and unfilled areas, or use text-shadow CSS, or use a QBadge as in the example blow
Was this page helpful?
0 / 5 - 0 ratings