Skip to content

Latest commit

 

History

History
27 lines (22 loc) · 1.39 KB

color-preview.md

File metadata and controls

27 lines (22 loc) · 1.39 KB
Raw

Color Picker and Preview

A color picker preview where you can choose to have the color or backgroundColor get updated based on the result of a color picker.

It also supports ensuring the foreground text is always readable by performing a YIQ calculation to set the text to black or white based on the contrast of the color and backgroundColor.

Usage

<div class="mt-3 flex items-center" data-controller="color-preview">
  <p data-color-preview-target="preview" class="h-10 w-10 mr-2 rounded-full text-2xl text-white text-center" style="background-color: #ba1e03; color: #fff; padding-top: 1px;">A</p>
  <span class="ml-2">
    <div class="flex rounded-md shadow-sm">
      <span class="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500">#</span>
      <input data-action="input->color-preview#update"
        data-color-preview-target="color"
        id="hex_color_bg"
        name="hex_color_bg"
        type="color"
        value="#ba1e03"
        class="focus:ring-indigo-500 focus:border-indigo-500 block shadow-sm sm:text-sm border-gray-300 flex-1 rounded-r-md mt-0 w-24 h-8 px-1 py-1 border" />
    </div>
  </span>
</div>

This will update the backgroundColor by default but you can choose to have the color preview update the color instead by setting the data-color-preview-style-value="color" attribute of the color preview controller.