Gradient Picker

A powerful and beautiful gradient picker.

Quick links

Documentation | Playground

Features

• Full CSS gradient syntax support
• Full Touch Support
• A11y and keyboard support
• Multiple modular components
• Multiple CSS variables

Installation

npm install @acrodata/gradient-picker --save

Usage

Gradient Picker

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { GradientPicker } from '@acrodata/gradient-picker';

@Component({
  selector: 'your-app',
  template: `
    <gradient-picker [(ngModel)]="value" />
  `,
  imports: [FormsModule, GradientPicker],
})
export class YourAppComponent {
  value = 'linear-gradient(45deg, blue, red)';
}

Modular Gradient Pickers

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { LinearGradientPicker, RadialGradientPicker, ConicGradientPicker } from '@acrodata/gradient-picker';

@Component({
  selector: 'your-app',
  template: `
    <linear-gradient-picker [(ngModel)]="linearValue" />
    <radial-gradient-picker [(ngModel)]="radialValue" />
    <conic-gradient-picker [(ngModel)]="conicValue" />
  `,
  imports: [FormsModule, LinearGradientPicker, RadialGradientPicker, ConicGradientPicker],
})
export class YourAppComponent {
  linearValue = 'linear-gradient(blue, red)';
  radialValue = 'radial-gradient(blue, red)';
  conicValue = 'conic-gradient(blue, red)';
}

Gradient Stops

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { ColorStop, GradientStops } from '@acrodata/gradient-picker';

@Component({
  selector: 'your-app',
  template: `
    <gradient-stops [(ngModel)]="colorStops" />
  `,
  imports: [FormsModule, GradientStops],
})
export class YourAppComponent {
  colorStops: ColorStop[] = [{ color: 'red' }, { color: 'lime' }, { color: 'blue' }];
}

CSS Variables

--gp-container-width
--gp-container-max-height
--gp-container-shape
--gp-container-horizontal-padding
--gp-container-elevation-shadow
--gp-container-background-color
--gp-container-text-color
--gp-container-text-font
--gp-container-text-size

--gp-input-height
--gp-input-padding
--gp-input-shape
--gp-input-background-color
--gp-input-outline-color
--gp-input-outline-focus-color
--gp-unit-select-hover-background-color

--gp-icon-button-shape
--gp-icon-button-text-color
--gp-icon-button-background-color
--gp-icon-button-hover-background-color
--gp-icon-button-active-background-color
--gp-icon-button-focus-background-color
--gp-icon-button-focus-outline-color

--gp-stops-slider-height
--gp-stops-slider-bar-outline-color
--gp-stops-slider-thumb-shadow
--gp-stops-slider-thumb-background-color
--gp-stops-slider-thumb-toggle-outline-color
--gp-stop-item-active-color

License

MIT