Selector de color de vainilla JS con canal alfa-vainilla-selector

Vista prévia

Descripción

A vanilla JavaScript color picker with alpha channel support that can be attached to any element.

El selector de color también viene con un modo emergente que le permite mostrar el selector de color en una ventana emergente.

Funcionamiento

Instale el selector de color a través de NPM.

# NPM
$ npm install vanilla-picker --save

Importe el selector de color al proyecto.

// ES 6
import Picker from 'vanilla-picker';

<!-- Browser -->
<script src="dist/vanilla-picker.js"></script>

Cree un elemento al que se debe anexar el selector de color.

<div id="example"></div>

Cree una nueva instancia de Picker y adjunte el selector de color al elemento DIV.

new Picker({


parent: document.querySelector('#example')
});

Mostrar el selector de color en una ventana emergente.

new Picker({


parent: document.querySelector('#example'),


popup: false // 'right'(default), 'left', 'top', 'bottom'
});

Activar/desactivar la selección alfa.

new Picker({


parent: document.querySelector('#example'),


alpha: false // default: true
});

Establezca el color inicial.

new Picker({


parent: document.querySelector('#example'),


color: '#222'
});

Decida si desea mostrar un campo de texto para la edición de valor de color.

new Picker({


parent: document.querySelector('#example'),


editor: true
});

Available callback functions which can be used to apply selector color to any element.

new Picker({


onChange: function(color){},


onDone:: function(color){},


onDone:: function(color){},


onDone:: function(color){}
});

Registro de cambios

v2.7.2 (01/27/2019)

• Se eliminó el evento doble onChange

v2.7.1 (01/12/2019)

• Prefijos de proveedor CSS con Autoprefixer.

v2.7.0 (11/18/2018)

• Se corrigió Options. editorFormat

v2.6.0 (10/06/2018)

• Haz un módulo ES6 que realmente funcione.

v2.5.2 (09/15/2018)

• Corrección de errores.
• Navegación por teclado y accesibilidad básica.

v2.4.2 (09/08/2018)

• movePopup (): comparta un selector entre varios padres.
• Bandera silenciosa en setColor ()

08/18/2018

• Se agregaron devoluciones de llamada onOpen/onClose.