Componente de selector de color en línea básico-selector de color TUI

Vista prévia

Descripción

TUI. Selector de color es un componente de selector de color RGB de JavaScript puro que admite colores predefinidos para la paleta.

Funcionamiento

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

# NPM
$ npm install tui-color-picker --save

Incluya los archivos incluidos en la Página Web.

<link href="dist/tui-color-picker.css" rel="stylesheet">
<script src="dist/tui-color-picker.js"></script>

Cree el marcador de posición del selector de color.

<div id="color-picker"></div>

Represente un selector de color predeterminado dentro del elemento DIV.

const colorpicker = tui.colorPicker.create({



container: document.getElementById('color-picker')
});

Establezca el color predeterminado.

const colorpicker = tui.colorPicker.create({



container: document.getElementById('color-picker'),



color: '#fff'
});

Especifique una matriz de colores para la paleta.

const colorpicker = tui.colorPicker.create({



container: document.getElementById('color-picker'),



preset: []
});

Prefijo CSS predeterminado.

const colorpicker = tui.colorPicker.create({



container: document.getElementById('color-picker'),



cssPrefix： 'tui-colorpicker-'
});

Defina el texto del botón de detalle.

const colorpicker = tui.colorPicker.create({



container: document.getElementById('color-picker'),



detailTxt： 'Detail'
});

Obtenga el color seleccionado con el evento ' selectColor '.

colorpicker.on('selectColor', function(obj) {

console.log(obj);
});