@ldrender/gradient-picker NPM

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
    }
]