Colorpicker

RC 1Kb

import 'pyro/colorpicker'

Preview Code Stackblitz

Usage

<pyro-colorpicker value="#ff7978"></pyro-colorpicker>

Variations

Props

interface ColorpickerProps {
  /** Hex value of the color, eg: #00ff00 */
  value: string;
  /** Makes it a circle */
  circle?: string;
  /** Shows an input field */
  'with-input'?: string;
  onInput?: (e: TargetValueEvent) => void;
}

Slots

/**
 * @slot image - Image on top, prefers `<img>` or `<picture>`
 * @slot header - Header content, prefers `<h*>` or `<header>`
 * @slot content - Main content of the card, any element
 * @slot footer - Header content, prefers `<footer>`
 */

CSS prop theming

The

Full theming sheet

/**
 * @prop {--pyro-colorpicker-spacing = --pyro-spacing} - `gap`
 * @prop {--pyro-colorpicker-border = --pyro-border} - `border`
 * @prop {--pyro-colorpicker-border-radius = --pyro-border-radius} - `border`
 * @prop {--pyro-colorpicker-surface-color = --pyro-surface-color} - `background`
 */