dremex / colorpicker

Webcomponent Colorpicker build with Stenciljs

soon-colorpicker

A simple and customizable webcomponent.

Using this component

 <h1>soon-colorpicker</h1>
  <soon-colorpicker id="colorpicker-data" image="/build/soon-colorpicker/assets/text-color.png" style="margin-right: 8px"></soon-colorpicker>
  <span id="color-container"></span>
  <br>
  <br>
  <soon-colorpicker image="/build/soon-colorpicker/assets/text-color.png" value="#000000" style="margin-right: 8px"></soon-colorpicker>
  <span>Default value #000000</span>
  <br />
  <br />
  <soon-colorpicker image="/build/soon-colorpicker/assets/text-color.png" id="colorpicker-reset" value="#f4282d" style="margin-right: 8px"></soon-colorpicker>
  <span>Reset all 5sec</span>
  <br />
  <br />
  <soon-colorpicker image="/build/soon-colorpicker/assets/other-palette.png" style="margin-right: 8px"></soon-colorpicker>
  <span>Custom palette image</span>
  <hr />

  <script>
    var colorPicker = document.getElementById('colorpicker-data');
    colorPicker.addEventListener('soonChange', function (data) {
      var container = document.getElementById('color-container');
      console.log(data);
      container.innerText = data.detail.value;
    });

    var colorReset = document.getElementById('colorpicker-reset');

    setInterval(() => colorReset.value = null, 5000);
  </script>

Script tag

• Publish to NPM
• Put a script tag similar to this <script src='https://unpkg.com/my-component@0.0.1/dist/mycomponent.js'></script> in the head of your index.html
• Then you can use the element anywhere in your template, JSX, html etc

Node Modules

• Run npm install my-component --save
• Put a script tag similar to this <script src='node_modules/my-component/dist/mycomponent.js'></script> in the head of your index.html
• Then you can use the element anywhere in your template, JSX, html etc

In a stencil-starter app

• Run npm install my-component --save
• Add an import to the npm packages import my-component;
• Then you can use the element anywhere in your template, JSX, html etc