JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 91
  • Score
    100M100P100Q87635F
  • License MIT

Circular Color widget for Netlify CMS.

Package Exports

  • netlify-cms-widget-color

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (netlify-cms-widget-color) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

netlify-cms-widget-color

This project is a simple color widget for Netlify CMS that uses react-color. Remembering all the world's code values for colors is hard. Now you don't have to. Install the color widget so you can make an easy job of things like changing your font color, directly in the editor UI.

Install and Usage

As an npm package:

npm install --save netlify-cms-widget-color
import ColorControl from 'netlify-cms-widget-color'

CMS.registerWidget('color', ColorControl)

Add to your config.yml:

    fields:
      - { name: <fieldname>, label: <fieldlabel>, widget: color }

Via script tag:

<script src="https://unpkg.com/netlify-cms-extended"></script>
<script src="https://unpkg.com/netlify-cms-widget-color"></script>
<script>
  CMS.registerWidget('color', NetlifyCMSColorWidget)
</script>

Configuration Options

Option Type Default Description
alpha bool true enable alpha
presets array undefined Define presets color
default string #ffffff Default color

Example:

- label: "Theme Color"
  name: "color"
  widget: "color"
  format: 'hsl'
  presets: ['red', 'green', 'blue'], default: 'pink'
  alpha: false

Support

For help with this widget, open an issue or ask the Netlify CMS community in Gitter.