quasar-colorize

A Vue mix-in specifically for Quasar Framework to handle color and background-color rendering

Install

yarn add quasar-mixin-colorize

# or

npm install quasar-mixin-colorize

Usage

import { Colorize } from 'quasar-mixin-colorize'

export default Vue.extend({
  name: 'my-component',

  mixins: [Colorize],

  ...

  render (h) {
    return h('div', this.setBothColors(this.color, this.backgroundColor, {
        staticClass: 'my-static-class-1',
        class: {
          'droppable': this.dragOver
        },
        style: {
          marginRight: this.scrollWidth + 'px'
        }
    }))
  }
})

The above is a simple example. Basically, if color and backgroundColor are not set, then nothing will happen. The third parameter, takes and object and the function returns the same object, with style modifications.

Another use case might be where you want to use the values provided by colorize to set your own variables. See this example of how QRibbon handles it (simplified version for illustrative purposes).

// Import all Quasar's colors as CSS vars so we can use e.g --q-color-red-5
import 'quasar-mixin-colorize/src/qColors.styl'

import { Colorize, calculateColor } from 'quasar-mixin-colorize'

export default Vue.extend({
  name: 'my-component',

  mixins: [Colorize],
  
  props: {
    backgroundColor: {
      type: String,
      default: 'primary' // any color
    }
  },
                    
  computed: {
    styles () {
      let style = {}
      style['--qribbon-text-color'] = calculateColor(this.color, 'white')
      style['--qribbon-background-color'] = calculateColor(this.backgroundColor) // Notice default is against the prop in this instance
      return style
    }
  },

  ...

  render (h) {
    return h('div', {
      style: this.styles
    }, [
      slot(this, 'default')
    ])
  }
})

Info

This mix-in only adds a color property to your component. Not all components need a background-color property. If all you need is color, then instead of calling this.setBothColors, then just call this.setTextColor.

So, what can be in a color? Any CSS color or one from the Quasar Color Palette. And, by CSS color, it can be a named css color, like ghostwhite, a hex value (#c0c0c0), or rgb/rgba/hsl/hsla (rgb(120, 12, 152)). Pretty much whatever you can throw at it as long as it is valid. Even CSS vars will work!

Vue Properties

Vue Methods

Exported Functions

Donate

If you appreciate the work that went into this mix-in, please consider donating to Quasar.