QColorizeMixin is a Vue Mix-in library for components created with Quasar Framework. It is only for components that use a render
function. It does not work with template formats found with SFC (single file components).
Allows you to "skin" your component with customized text, background and border colors. You can use:
- any color from the Quasar Color Palette,
- any # color (ex:
#c0c0c0
), - rgb/rgba/hsl/hsla color (ex:
rgb(255,0,0)
), - any css named colors (ex:
ghostwhite
) or - any Quasar colors from css var (ex:
--q-color-red-10
) - any Quasar colors as
border-
(ex:border-blue-grey-10
)
This is a lot of choices!
To add this mix-in to your Quasar application, run the following (in your Quasar app folder):
yarn add q-colorize-mixin
# or
npm install q-colorize-mixin
To remove this mix-in from your Quasar application, run the following (in your Quasar app folder):
yarn remove q-colorize-mixin
# or
npm remove q-colorize-mixin
Examples with code can be found here.
Source for the demo application can be found here.
$ cd ui
$ yarn
# start dev in SPA mode
$ yarn dev
$ yarn build
# first time prep
$ cd ui
$ yarn link
$ cd ../demo
$ yarn link "q-colorize-mixin"
# for interactive - browser opens automatically
$ quasar dev
# for build - goes to docs folder
$ yarn build-demo
If you appreciate the work that went into this, please consider donating to Quasar or Jeff.
MIT (c) Jeff Galbraith jeff@quasar.dev