@sanity / color-input

这是什么？

颜色输入插件 理智 它以十六进制、hsl、HSV和RGB格式存储选定的颜色。

安装

npm install --save @sanity/color-input

或者

yarn add @sanity/color-input

使用

将其作为插件添加到sanity.config.ts（或.js）中：

import {colorInput} from '@sanity/color-input'

export default defineConfig({
  // ...
  plugins: [colorInput()],
})

现在你可以用 color 输入模式类型：

// [...]
{
  fields: [
    // [...]
    {
      name: 'favoriteColor',
      title: 'Favorite color',
      type: 'color',
    },
  ]
}

选项

禁用α

要禁用alpha选项，请设置 disableAlpha 来 true：

// ...fields...
{
  name: 'favoriteColor',
  title: 'Color no-alpha',
  type: 'color',
  options: {
    disableAlpha: true
  }
}

这将相应地呈现：

颜色列表

添加预定义的可选择色板列表，供用户选择使用 colorList. 取色器是一个小叉 react-color,所以 colorList 接受任何它支持的 颜色格式.

// ...fields...
{
  name: 'favoriteColor',
  title: 'Color with list',
  type: 'color',
  options: {
    colorList: [
      '#FF6900',
      { hex: '#FCB900' },
      { r: 123, g: 220, b: 181 },
      { r: 0, g: 208, b: 132, a: 0.5 },
      { h: 203, s: 95, l: 77, a: 1 },
      { h: 202, s: 95, l: 46, a: 0.5 },
      { h: 345, s: 43, v: 97 },
      { h: 344, s: 91, v: 92, a: 0.5 },
    ]
  }
}

这将相应地呈现：

数据模型

{
  _type: 'color',
  hex: '#29158a',
  alpha: 0.9,
  hsl: {
    _type: 'hslaColor',
    h: 249.99999999999994,
    s: 0.7328000000000001,
    l: 0.313,
    a: 0.9
  },
  hsv: {
    _type: 'hsvaColor',
    h: 249.99999999999994,
    s: 0.8457987072945522,
    v: 0.5423664,
    a: 0.9
  },
  rgb: {
    _type: 'rgbaColor',
    r: 41
    g: 21,
    b: 138,
    a: 0.9
  }
}

许可证

swfobject。看到许可证。