using hex,hsl, or rgb color with component color attribute

dgk

Not groking why I can’t give a hex,rgb, or hsl string color to any component color attribute in particular q-progress. They seem to be ignored all except for standard html color pallete names.

ie
color = 'hsl(100, 100%, 50%)' does nothing (grey) should be green
color = 'red' red of course

I am wanting to do something like this since there are mutliple progress bars in a v-for loop. BTW binding :percentage works fine

          <q-progress
            :percentage="signal(index)"
            stripe
            height="4px"
            :color="signalColor(index)"
           />

  methods: {
    async scan () {
      this.waps = await wifi.send({cmd: 'scan'})
    },
    async connect (item) {
      this.$q.notify(`would ask for pw and connect here ${item}`)
    },
    signal (item) {
      return this.waps[item].quality
    },
    signalColor (item) {
      return colorByPercent(this.waps[item].quality, 50, 100)

      function colorByPercent (percent, start, end) {
        var a = percent / 100,
          b = (end - start) * a,
          c = b + start

        // Return a CSS HSL string
        return 'hsl(' + c + ', 100%, 50%)'
      }
    }
  },

leopiccionia

They are not colors from HTML/CSS, they are colors from Quasar Color Palette, that’s itself based on Material Design palette.

Notice that you can add your custom colors. While Vue doesn’t re-introduce style interpolations, using v-bind:style accordingly should probably work (I haven’t tried).

dgk

I did think of that after posting but I tried and the bar itself is not q-progress but q-progress-model/track so binding style in the q-progress tag doesn’t set the styles of q-progress-model/track Obviously the color attribute sets the q-progress-model and q-progress-track classes not the q-progess class. Not being able to set that with a custom color function is a bummer

I can’t just change the css for those classes as it will do it for all instances I need to be able to set the inline style per item/index div tag of the v-for. Since those are generated divs I can’t bind style to them in the template.

So then…how does one set the inline style of a child tag from the parent tag??? Never done that before.

One thought for the future (feature request) if the color attribute of many components sets the colors of generated tags could the color attribute code parse some prefix letting it know to use the color functions instead of using the palette? e.g. 'func:hsl(50,50,100)'. I can see this coming up every time I have a set of a particular component generated from a v-for.

dgk

I suppose in the meantime I can set up some clunky function that takes the % and with some ugly ifs returns a particular color name from the palette. .
BTW equivalent hex colors are ignored too which would have been a solution. So if code could handle a hash # prefix and know a hex color is coming instead of something from the palette that would work. Any color functions would have be converted to hex first that I could have done.

leopiccionia

@dgk It seems that it’s being exposed in the parent element, you only need to add !important clause.
https://codepen.io/anon/pen/jzGMZE

chbarr

if you want to style a specific class of a sub-component, you can use the keyword /deep/
for example:

<style scoped lang="stylus">
/deep/ .q-progress-model
  color red
</style>

No More Posting New Topics!

using hex,hsl, or rgb color with component color attribute