Installation

  npm install @ldrender/gradient-picker

Development or Build

  npm run dev

  npm run build

Usage

import GradientPicker from '@ldrender/gradient-picker';
import '@ldrender/gradient-picker/dist/gradient-picker.css';

const gradientPicker = new GradientPicker({
  el: document.querySelector('#gradient-picker'),
  stops: [
    { color: '#ff0000', offset: 0 },
    { color: '#00ff00', offset: 50 },
    { color: '#0000ff', offset: 100 },
  ],
  directionType: "percent",
})

API Documentation

GradientPicker Instance

new GradientPicker(options: GradientPickerOptions): GradientPicker

Create a new instance of GradientPicker. Your element is replaced by the gradient picker. But an input is created with your element id and the value is the gradient string. You can use this input to send the gradient to your server for example.

If your element is input and he have value then value use to generate colorSteps Value = Methods getGradient(): object

GradientPickerOptions

| Name | Type | Default Value | Description | | --- | --- | --- | --- | | defaultElement | ID | | The element where the gradient picker will be created | | stops? | GradientStop[] | | The initial stops of the gradient (optional)| | directionType? | string('select' | 'percent') | 'select' | The type of gradient (optional)| | returnType? | string('string' | 'object' | 'stops-list' ) | 'string' | The type of return value (optional)|

GradientStop

| Name | Type | Description | | --- | --- | --- | | id? | number | The id of the stop (optional)| | color | string | The color of the stop | | offset | number | The position of the stop |

GradientPicker Methods

getGradient(): object (returnType: 'object')

Exemple :

{
    "type": "linear",
    "direction": "to right",
    "colorStops": [
        {
            "color": "#ff0000",
            "offset": 0
        },
        {
            "color": "#00ff00",
            "offset": 50
        },
        {
            "color": "#0000ff",
            "offset": 100
        }
    ]
}

getGradientString(): string (returnType: 'string')

Exemple :

linear-gradient(to right, #ff0000 0%, #00ff00 50%, #0000ff 100%)

getStopList(): GradientStop[] (returnType: 'stops-list')

Exemple :

[
    {
        "color": "#ff0000",
        "offset": 0
    },
    {
        "color": "#00ff00",
        "offset": 50
    },
    {
        "color": "#0000ff",
        "offset": 100
    }
]

addColorStop(color: string, offset: number): void

Add a color stop to the gradient.