Package Exports

vue-gradient-component
vue-gradient-component/dist/vue-gradient-component.umd.min.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue-gradient-component) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

vue-gradient-component

Library setup

npm i vue-gradient-component

Import in main

import ColorPicker from 'vue-gradient-component';

const app = createApp(App);
app.use(ColorPicker);

Using in components

<template>
  <div>
    <img
      alt="Vue logo"
      src="./assets/logo.png"
    />
    <color-picker></color-picker>
  </div>
</template>

Properties

Name	Value type	Descriprion	Default
width	[String, Number]	Width of component	300
pickerBodyHeight	[String, Number]	Height of picker part component	300
pickerBodyPointSize	[String, Number]	Diameter of picker point	10
pickerBodyPointColor	String	Color of picker point	'orange'
optionBlockHeight	[String, Number]	Height of property lines (alpha, select color)	15
pickerOptionPointSize	[String, Number]	Diameter of point on property lines	12
pickerOptionPointColor	String	Color of point on property lines	'white'
pickerGradientPointSize	[String, Number]	Diameter of point on gradient line	12
previewWidth	[String, Number]	Width of preview block	50
previewHeight	[String, Number]	Height of preview block	50
anglePointColor	String	Color of angle select point	'orange'
angleCircleColor	String	Color of angle select circle	'orange'
outputTextType	['hex-alpha', 'rgba']	Type of output color	'hex-alpha'
outputValueType	['string/rgba', 'object', 'string/svg']	Type of returning value: 'string/rgba': 'rgba(0,0,0,0)' 'object': '{ angle: 0, points: [{}{}{}]}' (only gradient) 'string/svg': Gradient layout for svg https://developer.mozilla.org/ru/docs/Web/SVG/Tutorial/Gradients	'string/rgba'
mode	['normal', 'gradient']	Single color mode(normal) or gradient	'normal'
gradientType	['linear','radial']	Type of gradient value	'linear'