Elegante componente selector de color compatible con móviles-Pickr

Vista prévia

Descripción

La biblioteca de JavaScript Pickr le ayuda a crear un selector de color elegante, personalizable y táctil para su aplicación.

Soporta HEX, RGB, HSL, HSV, CMYK formatos de color y canal alfa.

También proporciona una función que convierte los valores de color predeterminados (HSVa) en valores HSLa, RGBa, HEX y CMYK.

Es compatible con el explorador y node. js.

Funcionamiento

Instale el Pickr.

# NPM
$ npm install pickr-widget --save

Agregue el código JavaScript y la hoja de estilo del Pickr a la página.

<link href="dist/pickr.min.css" rel="stylesheet">
<script src="dist/pickr.min.js"></script>

Cree un elemento contenedor para colocar el selector de color.

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

Inicializar el Pickr para generar un selector de color predeterminado.

const pickr = new Pickr({



el: '.example',



default: '#42445A' // default color
});

Personalice la posición del selector de color cuando se desencadene.

const pickr = new Pickr({



el: '.example',



default: '#42445A',



position: 'middle', // or 'top', 'left'
});

Personalice el componente de selector de color.

const myPickr = new Pickr({




el: '.example',



components: {





// color preview




preview: true,





// enables opacity slider




opacity: true,





// enables HUE slider




hue: true,

 // Hue slider





// shows/hides controls




output: {





hex: true,





rgba: true,





hsla: true,





hsva: true,





cmyk: true,





 input: true




}



}

});

Available color converters.

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

Available options.

const pickr = new Pickr({


// Selector or element which will be replaced with the actual color-picker.

// Can be a HTMLElement.

el: '.color-picker',


// Using the 'el' Element as button, won't replace it with the pickr-button.

// If true, appendToBody will also be automatically true.

useAsButton: false,


// Start state. If true 'disabled' will be added to the button's classlist.

disabled: false,


// If set to false it would directly apply the selected color on the button and preview.

comparison: true,


// Default color

default: 'fff',


// 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,


// 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




// Bottom interaction bar, theoretically you could use 'true' as propery.



// But this would also hide the save-button.



interaction: {





hex: true,
// hex option
(hexadecimal representation of the rgba value)





rgba: true, // rgba option (red green blue and alpha)





hsla: true, // hsla option (hue saturation lightness and alpha)





hsva: true, // hsva option (hue saturation value and alpha)





cmyk: true, // cmyk option (cyan mangenta yellow key )






input: true, // input / output element





clear: true, // Button which provides the ability to select no color,





save: true
 // Save button



},

},


// Button strings, brings the possibility to use a language other than English.

strings: {


 save: 'Save',
// Default for save button


 clear: 'Clear' // Default for clear button

}
});

API methods.

// sets a color
myPickr.setHSVA(h,s,v,a)

// parses a string
myPickr.setColor(string)

// shows the color picker
myPickr.show()

// hides the color picker
myPickr.hide()

// disables the color picker
myPickr.disable()

// enables the color picker
myPickr.enable()

// checks if is ipen
myPickr.isOpen()

// returns the root DOM element
myPickr.getRoot():HTMLElement

// returns the current HSVa color
myPickr.getColor()

// destroy the color picker
myPickr.destroy()

// destroy the color picker and remove it from DOM
myPickr.destroyAndRemove()

Funciones de devolución de llamada.

const pickr = new Pickr({



el: '.example',



onChange(hsva, instance) {




hsva;

 // HSVa color object, if cleared null




instance; // Current Pickr instance



},




// User has clicked the save button



onSave(hsva, instance) {





// same as onChange



}
});

Registro de cambios

04/13/2019

• v0.4.9: Small fix

04/11/2019

• v0.4.8: Small fix

04/09/2019

• v0.4.7: Small fix

04/08/2019

• v0.4.6: Small fix

04/02/2019

• v0.4.5: Small fix

03/17/2019

• v0.4.4: Small fix

03/08/2019

• v0.4.3: Small fix

03/03/2019

• v0.4.2: Small fix

02/28/2019

• v0.4.1: Small fix

02/24/2019

• v0.4.0: Small fix

02/21/2019

• v0.3.6: Small fix

02/14/2019

• v0.3.5: Small fix

01/24/2019

• v0.3.4: Small layout fix

01/21/2019

• v0.3.3

01/18/2019

• Más espacio entre las muestras

01/17/2019

• Añada muestras de color básicas

01/09/2019

• Se ha corregido la llamada inesperada de onUpdate en init

01/01/2019

• v0.3.2: Fix issues with too late applied styles

11/18/2018

• v0.3.1: Fix invisible checkboard pattern if ancestor background set; Adjust css so that non-existing elements doesn't take space

11/04/2018

• v0.3.0: Change to touchstart and mousdown events to detect blur; Update dependencies

10/11/2018

• v0.2.5: Remove appendToBody option; Add parent option; Fix broken mobile input and negative number overflow

10/07/2018

• v0.2.4: Fix delayed color-recalculation; Fix ignored move action in moveable; Remove basically useless function binding

08/28/2018

• v0.2.3: Prevent recalculation on user input and some refactoring; Fix broken useAsButton option

08/23/2018

• v0.2.2: Refactor helper classes to factory functions; Fix hsva representation and missing snipped in moveable; Only round color values on output; Use factory function for hsvacolor class

08/08/2018

• v0.1.7: Fixed Opening page on <iframe> prevents color picker modal to show on mobile devices; minor improvements, smaller code; add enable and disable functions; Fix losting focus on first input bug; Append save-button option to components

07/08/2018

• v0.1.6

07/05/2018

• v0.1.5: Add support for rtl attribute; bugfix

06/28/2018

• v0.1.4: Add support for rtl attribute

06/26/2018

• Agregue la posibilidad de aplicar cadenas de botón personalizadas

06/21/2018

• v0.1.3

06/20/2018

• v0.1.2: Add appendToBody option; Mask invalid characters in data URI's; Add parsing of hex representation with alpha channel