ColorPicker

A <Dropdown> containing an <Input> to choose a color value

Code

<script lang="ts">
  import { ColorPicker } from '@geoffcox/sterling-svelte';
</script>

<ColorPicker />

Members

Property Name	Type	Default	Comment
colorText	string	'#000000'	The color value in HEX, RGB, or HSL format
colorFormat	ColorFormat	'hex'	The current color format
sliderVariant	string	''	Additional classes to apply to the each slider
valueVariant	string	''	Additional classes to apply to the value input
variant	string	''	Additional class names to apply

Types

	Type Name	Definition	Comment
	ColorFormat	'hex' \| 'rgb' \| 'hsl'

Considerations

The dropdown displays a set of sliders based on the color format selected.
Changing the input to a color value with a different color format, switches the selected color format.
Switching from HSL to HEX or RGB rounds values to the nearest color.
There are no slots due to the required coordination between sliders and the dropdown.
Includes Dropdown props, event, and methods

Anatomy

<div class="sterling-color-picker">
  <Dropdown>
    <div class="value" slot="value">
      <div class="color-box" />
      <Input />
    </div>
    <div class="sterling-color-picker-popup">
      <div class="tabs">
        <TabList />
      </div>
      <div class="sliders">
        <HexColorSliders />
        <HslColorSliders />
        <RgbColorSliders />
      </div>
    </div>
  </Dropdown>
</div>