For the perspective progress bar you can display the value and set a max, for example here is 1820 out of 3231:
What I want to do is have the displayed text be “1820 / 3221”.
Is there any way to do it?
Thanks,
Nick
Was there any resolution with this question? I am trying to do something similar. I just want to display some static text directly on the progress bar.
@Ethan_Bachman I didn't pursue it any further, I ended up going with percentages with tooltips.
Cheers,
Nick
I couldn't find a 'clean' way to do this, but if your text is static you could use css.
First, make a style class. For the example, I called mine addtext.
If you're on the last version, with the new css sheet, add this:
.psc-addtext::after {content: " your text";}
If you're on an older version, you can the theme file, or css injection.
If using theme file, add the same line as above in your .css
For injection:
In your style class, pick a property with a text field, for example background image, and add this:
} .psc-addtext::after {content: " your text here"} {
Now, apply that style class to the progress bar's valueDisplay style:
And you're done:
That looks about like what I need. My only difference is that I don't want it to display the value at all. I have created a workaround by just placing a label over the progress bar in a coordinate container. I will play around with that concept and see if I can get it to work.
Here's what I've done in the past:
Wrap your progress bar in a coordinate container.
Put a progress bar and a label component in the container, with the same x/y and size properties.
Make sure the label is the second component so it is displayed on top.
In your progress bar component, set the "valueDisplay->enabled" property to false.
Set the text of the label component to be what ever you want displayed on top of the progress bar.
HTH.
-Shane
1 Like
If you do go the route of "coordinate like flex" to create the exact functionality you want, you can put this binding on the coordinate root to make it flex:
{view.props.defaultSize.width}
+ ":"
+ {view.props.defaultSize.height}
Cheers,
Nick
Then I agree with the other comments, at some point it becomes simpler to just overlay a label on top of your bar.
Yep, using a label overtop of the progress bar in the coordinate container did the trick. Thanks for the help.
2 Likes