Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

q-colorize-mixin

Package Overview
Dependencies
Maintainers
1
Versions
21
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

q-colorize-mixin

Quasar color mixin

  • 2.0.0-alpha.5
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
1
Created
Source

QColorizeMixin

npm

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).

Release Notes

v2.0.0 (alpha) does not have any breaking changes, but it does add new functionality to support Quasar v2 and Vue v3. If using Quasar v1, use this mixin as you normally would. If using Quasar v2, with Vue 3 composition API, there are exposed the useColorizeProps and useColorize methods. The later exposes the methods:

import { useColorizeProps, useColorize } from 'q-colorize-mixin'

// ...

props: {
  // your other prop definitions
  ...useColorizeProps()
},

setup (props) {
  ...useColorize()
}

Features

Allows you to "skin" your component with customized text, background and border colors. You can use:

  1. any color from the Quasar Color Palette,
  2. any # color (ex: #c0c0c0),
  3. rgb/rgba/hsl/hsla color (ex: rgb(255,0,0)),
  4. any css named colors (ex: ghostwhite) or
  5. any Quasar colors from css var (ex: --q-color-red-10)
  6. any Quasar colors as border- (ex: border-blue-grey-10)

This is a lot of choices!

Install

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

Uninstall

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

Documentation and Examples

Examples with code can be found here.

Demo Project (source)

Source for the demo application can be found here.

Building the Projects

Setup

$ yarn

Developing

$ cd ui

# start dev in SPA mode
$ yarn dev

Building package

$ cd ui

$ yarn build

Building Demo

# 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

Donate

If you appreciate the work that went into this, please consider donating to Quasar or Jeff.

License

MIT (c) Jeff Galbraith jeff@quasar.dev

Keywords

FAQs

Package last updated on 27 Mar 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc