sc

svelte-color

Color pickers for svelte

Showing:

Popularity

Downloads/wk

1

Maintenance

No Maintenance Data Available

Package

Dependencies

1

License

Type Definitions

Tree-Shakeable

No?

Readme

Svelte Color

Color pickers for svelte

Live Demo

enter image description here


Install

npm install svelte-color

Use


  <!-- my-component.svelte -->
<script>
  import ChromePicker from 'svelte-color/Chrome.svelte';
  
  let chrome;
  let color; // same as event.detail

  const handleInput = (event) => {
    {r, g, b, h, s, l, v, a, hex} = event.detail;
    /*
      r: red          Number 0-255,
      g: green        Number 0-255,
      b: blue         Number 0-255,
      h: hue          Number 0-359,
      s: saturation   Number 0-1
      l: lightness    Number 0-1
      v: value        Number 0-1
      a: alpha        Number 0-1
      hex: hex        String (starting with #)
    */
  }

  function setColor(){
    // setColor accepts any value
    // that tinycolor2 accepts
    // use this method, do not do chrome.color = "red"
    // startColor accepts the same arguments
    chrome.setColor("red");
    chrome.setColor("#fff")
    chrome.setColor("#ffffff")
    chrome.setColor("rgb(255, 255, 255, 1)")
    chrome.setColor("rgba(255, 255, 255 ,1)")
    chrome.setColor("hsv(359, 100%, 100%, 1)")
    chrome.setColor("hsva(359, 100%, 100%, 1)")
    chrome.setColor({r: 255, g: 255, b: 255, a?: 1});
    chrome.setColor({h: 359, s: 1, l: 1, a?: 1});
    chrome.setColor({h: 359, s: 1, v: 1, a?: 1});
  }

</script>

<ChromePicker
  class="classes to add to the root element"
  bind:color
  bind:this={chrome}
  startColor="red"
  disableAlpha={false} // default
  on:input={handleInput}
/>
<!-- 
  you can also bind 
  specific props 
  like bind:r={red} bind:h={hue}
-->

API

Prop / MethodTypeDefault / ArgsDescription
classstring""class(es) to add to the root element
startColorstringobjectred
disableAlphabooleanfalseshow or not alpha picker and alpha inputs
bind:colorobjectsee in the usage seccion
bind:r,g,bnumber 0-255red, green, blue
bind:hnumber 0-359hue
bind:s,l,v,anumber 0-1saturation, lightness, value, alpha
setColor(color)methodcolor: string or objectcolor: any color tinycolor2 accepts
on:inputeventevent.detail = colorAny time user changes value, see detail in the usage seccion

License

MIT

Contribute

git clone https://github.com/ramiroaisen/svelte-color.git 
npm install -D
npm run dev

Opens a dev server with the docs github page showing the components

Enjoy!

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Tutorials

No tutorials found
Add a tutorial