当前位置:主页 > JavsScript库 > 其它 >

优雅的移动兼容颜色选择器组件 - pickr
栏目分类:其它   发布日期:2021-09-14   浏览次数:

pickr JavaScript 库可帮助您为应用程序创建优雅的、可定制的、支持触摸的颜色选择器。

支持 HEX、RGB、HSL、HSV、CMYK 颜色格式和 alpha 通道。

还提供了将默认颜色值 (HSVa) 转换为 HSLa、RGBa、HEX 和 CMYK 值的功能。

支持浏览器和 node.js。

使用:

安装选择器。

# NPM
$ npm install pickr-widget --save


将选择器的 JavaScript 添加到页面。

<script src="dist/pickr.min.js"></script>


向页面添加主题 CSS。

<link href="themes/classic.min.css" rel="stylesheet">
<link href="themes/monolith.min.css" rel="stylesheet">
<link href="themes/nano.min.css" rel="stylesheet">


创建一个容器元素来放置颜色选择器。

<div class="example"></div>


初始化选择器以生成默认颜色选择器。

const pickr = new Pickr({
      el: '.example',
      default: '#42445A' // 默认颜色
});


触发时自定义颜色选择器的位置。

const pickr = new Pickr({ 
      el: '.example', 
      default: '#42445A', 
      position: 'middle', // or 'top', 'left' 
});


自定义颜色选择器组件。

const myPickr = new Pickr({ 
 
      el: '.example',
      components: { 
 
        // 颜色预览
        preview: true,
 
        // 启用不透明度滑块
        opacity: true, 
 
        // 启用色调滑块
        Hue: true, // 色调滑块
 
        // 显示/ hides控制
        output: {
          hex: true,
          rgba: true,
          hsla: true,
          hsva: true,
          cmyk: true, 
          input: true
        }
      } 
 
});


可用的颜色转换器。

hsva.toHSVA()
hsva.toHSLA()
hsva.toRGBA()
hsva.toHEX() 
hsva.toCMYK()
hsva.clone()


用于自定义颜色选择器的可用选项。

const pickr = new Pickr({
 
  // 自定义类
  appClass: null,
 
  // 'classic', 'monolith' or 'nano'
  theme: 'classic',
 
  // 将被实际颜色选择器替换的选择器或元素。
  // 可以是 HTMLElement.
  el: '.color-picker',
 
  // 使用 'el' 元素作为按钮,不会用pickr-button 替换它。
  // 如果为真,appendToBody 也会自动为真。
  useAsButton: false,
 
  // 以像素为单位
  padding: 8,
 
  // i18n
  i18n: {
    // UI 中可见的字符串
    'ui:dialog': 'color picker dialog',
    'btn:toggle': 'toggle color picker dialog',
    'btn:swatch': 'color swatch',
    'btn:last-color': 'use previous color',
    'btn:save': 'Save',
    'btn:cancel': 'Cancel',
    'btn:clear': 'Clear',
 
    // Strings used for aria-labels
    'aria:btn:save': 'save and close',
    'aria:btn:cancel': 'cancel and close',
    'aria:btn:clear': 'clear and close',
    'aria:input': 'color input field',
    'aria:palette': 'color selection area',
    'aria:hue': 'hue selection slider',
    'aria:opacity': 'selection slider'
  },
 
  // Start state. If true 'disabled' will be added to the button's classlist.
  disabled: false,
 
  // 如果设置为 false,它将直接在按钮上应用所选颜色并进行预览。
  comparison: true,
 
  // 默认颜色
  default: 'fff',
 
  // 有效选项为 `HEX`, `RGBA`, `HSVA`, `HSLA` and `CMYK`.
  defaultRepresentation: null,
 
  // 输出字符串的精度(仅当 components.interaction.input 为真时才有效)
  outputPrecision: 0,
 
  // 在非 alpha 模式下 移动
  lockOpacity: false,
 
  // 自动重新定位颜色选择器以适应screen
  autoReposition: true,
 
  // e.g. ['#F44336', '#E91E63', '#9C27B0', '#673AB7']
  swatches: null,
 
  // 启用内联模式
  inline: false,
 
  // 'v' => opacity- and hue-slider can both only moved vertically.
  // 'hv' => opacity-slider can be moved horizontally and hue-slider vertically.
  sliders: null,
 
  // Option to keep the color picker always visible. You can still hide / show it via
  // 'pickr.hide()' and 'pickr.show()'. The save button keeps his functionality, so if
  // you click it, it will fire the onSave event.
  showAlways: false,
 
  // Closes the picker on scroll
  closeOnScroll: false,
 
  // Defines a parent for pickr, if useAsButton is true and a parent is NOT defined
  // 'body' will be used as fallback.
  parent: null,
 
  // Close pickr with this specific key.
  // Default is 'Escape'. Can be the event key or code.
  closeWithKey: 'Escape',
 
  // Defines the position of the color-picker. Available options are
  // top, left and middle relativ to the picker button.
  // If clipping occurs, the color picker will automatically choose his position.
  position: 'middle',
 
  // Enables the ability to change numbers in an input field with the scroll-wheel.
  // To use it set the cursor on a position where a number is and scroll, use ctrl to make steps of five
  adjustableNumbers: true,
 
  // Show or hide specific components.
  // By default only the palette (and the save button) is visible.
  components: {
 
      preview: true, // Left side color comparison
      opacity: true, // Opacity slider
      hue: true,     // Hue slider
 
      // 底部交互栏,理论上可以使用 'true' 作为属性。
      // 但这也会隐藏保存按钮。
      interaction: {
          hex: true,  // hex 选项(hexadecimal representation of the rgba value)
          rgba: true, // rgba 选项(red green blue and alpha)
          hsla: true, // hsla 选项(hue saturation lightness and alpha)
          hsva: true, // hsva 选项(hue saturation value and alpha)
          cmyk: true, // cmyk 选项(cyan mangenta yellow key )
 
          input: true, // 输入/输出元素
          clear: true, // 提供无颜色选择功能的按钮,
          save: true   // 保存按钮
      },
  },
 
  // 按钮字符串,可以使用英语以外的语言。
  strings: {
     save: 'Save',  // 默认保存按钮
     clear: 'Clear' // 默认清除按钮
  }
   
});

API 方法。

// 设置颜色
myPickr.setHSVA(h,s,v,a) 
 
// 解析字符串
myPickr.setColor(string) 
 
// 获取所选颜色
myPickr.getSelectedColor() 
 
// 显示颜色选择器
myPickr.show() 
 
/ / 隐藏颜色选择器
myPickr.hide() 
 
// 禁用颜色选择器
myPickr.disable() 
 
// 启用颜色选择器
myPickr.enable() 
 
// 检查是否 ipen 
myPickr.isOpen() 
 
// 返回根 DOM 元素
myPickr.getRoot():HTMLElement 
 
// 返回当前的 HSVa 颜色
myPickr.getColor() 
 
// 销毁颜色选择器
myPickr.destroy() 
 
// 销毁颜色选择器并将其从 DOM 中移除
myPickr.destroyAndRemove() 
 
// 更改当前的颜色表示。有效选项为 HEX、RGBA、HSVA、HSLA 和 CMYK,
myPicker.setColorRepresentation(type:String); 
 
// 保存颜色
myPicker.applyColor(silent:Boolean); 
 
// 向色板调色板添加颜色
myPicker.addSwatch(color:String); 
 
// 从色板调色板中移除颜色
myPicker.removeSwatch(index:Number);

事件处理程序。

myPicker.on('init', instance => {
    console.log('init', instance);
}).on('save', (color, instance) => {
    console.log('save', color, instance);
}).on('change', (color, instance) => {
    console.log('change', color, instance);
}).on('swatchselect', (color, instance) => {
    console.log('swatchselect', color, instance);
}).on('clear', (instance) => {
    console.log('clear', instance);
}).on('cancel', (instance) => {
    console.log('cancel', instance);
}).on('hide', (instance) => {
    console.log('hide', instance);
}).on('show', (instance) => {
    console.log('show', instance);
}).on('changestop', (instance) => {
    console.log('changestop', instance);
});

官方网站:https://github.com/Simonwep/pickr

声源:本站内容均来自互联网,仅供交流学习之用,请勿作商业用途,所有资源版权归原作者所有。如果有侵犯到您的权益,请联系本站删除,谢谢合作!
jQuery库 JavsScript库 Html5库 CSS3库