Change color of vaadin-progress-bar

Dear all,

I would like to change the color of the progress bar, as soon the process is finished. I know that there fields available for styling (https://vaadin.com/elements/vaadin-progress-bar/html-api/elements/Vaadin.ProgressBarElement) but I have no idea how to access them. I have no prior experience with Polymer.

[code]
<vaadin-progress-bar id="pBar’ min=“0” max=“100”>

[/code]Is there a way to achieve this?

Thank you in advance.

Kind regards,

Sebastian

See documentation here, there are sub parts “bar” value “value” which are available for styling, rest are hidden in shadow dom. It means that in your theme css you should be able to target the color to vaadin-progress-bar and either of these subparts.

https://vaadin.com/elements/vaadin-progress-bar/html-api/elements/Vaadin.ProgressBarElement

Actually, all of the elements are “hidden” in the shadow DOM. But the stylable parts are the ones we promise you can style safely, as a public API.

Read the documentation here to learn how to apply styles for those parts:
https://github.com/vaadin/vaadin-themable-mixin/wiki

Thanks for your reply.

I had a look at your mentioned sites and was able to adjust the colors:

<dom-module id="my-progress-bar-theme" theme-for="vaadin-progress-bar"> <template> <style> [part="bar"] { background-color: grey; } [part="value"] { background-color: green; } </style> </template> </dom-module> Unfortunetaly, I was not able to set background-color dynamically. I tried, for instance:

<style>
    // if value <= max (color of progress bar is red)
    :host:in-range [part="value"]
 {
       background-color: red;
    }
    // else -> (change color to green)
    :host:out-of-range [part="value"]
 {
       background-color: green;
    }
</style> 

How can I access the [part=“value”]
during runtime or how can I leverage the css methods on the shadow DOMs?

::slotted is the wrong solution here. It only targets elements that are “slotted” from the light DOM into the custom element’s shadow DOM. In the vaadin-progress-bar, there are no ’s, all the elements are inside the shadow DOM.

To make runtime changes, use one of the documented approaches from the “scoping” article:
https://github.com/vaadin/vaadin-themable-mixin/wiki/4.-Scoping-Styles-in-a-Theme-Module

The title is a bit misleading, I realize now, but the same approaches can be used to expose dynamic styling for the element.

For example, here’s a way to expose two classes, “in-range” and “out-of-range” for the progress bar:

<dom-module id="my-progress-bar-theme" theme-for="vaadin-progress-bar">
   <template>
      <style>
         [part="bar"]
 {
            background-color: grey;
         }

         :host(.in-range) [part="value"]
 {
             background-color: green;
         }

         :host(.out-of-range) [part="value"]
 {
             background-color: red;
         }
      </style>
   </template>
</dom-module

And here’s then how you would use it:

<vaadin-progress-bar class="in-range"></vaadin-progress-bar>
<vaadin-progress-bar class="out-of-range"></vaadin-progress-bar>

I’m not sure how your code looks like but here is the instruction from Polymer
https://www.polymer-project.org/2.0/docs/devguide/style-shadow-dom

If you want to acces that [part=“value”]
, you should do it like this (slotted is the special keyword reserved for pseudo elements, you should not modify it)

<style>
 host ::slotted([part=value]
) {
  color:green;
 }
</style>

Dear all,

Thank you very much for your guidance. Setting specific classes within the template does the job.

Kind regards

Sebastian