Selector de colors pla, senzill i piratejable

Bloc

Selector de colors pla, senzill i piratejable

Selector de colors pla, senzill i piratejable

Selector de colors pla, senzill i piratejable.

Característiques

  • Temes
  • Ús senzill
  • Zero dependències
  • Representacions de colors múltiples
  • Comparació de colors
  • Control de l’opacitat
  • Detalleu els ajustos mitjançant. roda del ratolí
  • Responsiu i posicionament automàtic
  • Admet dispositius tàctils
  • Mostres per a una selecció ràpida
  • Totalment accessible i i18n
  • Suport Shadow-dom

Temes

Clàssic Monòlit Nano
Tema clàssic Monòlit Nano

Nano utilitza css-grid, de manera que no funcionarà en navegadors antics.

com treure diners de la cartera de confiança al meu compte bancari

Començant

Node

Nota: El fitxer Llegiu-me sempre està actualitzat amb l'última confirmació. Veure Estrenes per obtenir instruccions d'instal·lació sobre l'última versió.

Instal·lació mitjançant npm:

$ npm install @simonwep/pickr

Instal·lació mitjançant filats:

$ yarn add @simonwep/pickr

Inclou el codi i l'estil:

// One of the following themes import '@simonwep/pickr/dist/themes/classic.min.css'; // 'classic' theme import '@simonwep/pickr/dist/themes/monolith.min.css'; // 'monolith' theme import '@simonwep/pickr/dist/themes/nano.min.css'; // 'nano' theme // Modern or es5 bundle (pay attention to the note below!) import Pickr from '@simonwep/pickr'; import Pickr from '@simonwep/pickr/dist/pickr.es5.min';

Atenció: el paquet es5 (per exemple, la versió heretada) és bastant gran (al voltant d’un triple del paquet modern). Tingueu en compte la possibilitat d’utilitzar la versió moderna i afegir poliampliments més tard al paquet final. (O millor: doneu una pista als usuaris perquè facin servir els navegadors més recents). Els navegadors com IE ho són no compatible (almenys no oficialment).

Navegador

jsdelivr:

Assegureu-vos de carregar el pickr.min.js (o la versió es5) després pickr.min.css. A més, | | + _ | l’etiqueta no funciona amb el script atribut.

Ús

defer

Podeu trobar més exemples aquí.

Esdeveniments

Des de la versió // Simple example, see optional options for more configuration. const pickr = Pickr.create({ el: '.color-picker', theme: 'classic', // or 'monolith', or 'nano' swatches: [ 'rgba(244, 67, 54, 1)', 'rgba(233, 30, 99, 0.95)', 'rgba(156, 39, 176, 0.9)', 'rgba(103, 58, 183, 0.85)', 'rgba(63, 81, 181, 0.8)', 'rgba(33, 150, 243, 0.75)', 'rgba(3, 169, 244, 0.7)', 'rgba(0, 188, 212, 0.7)', 'rgba(0, 150, 136, 0.75)', 'rgba(76, 175, 80, 0.8)', 'rgba(139, 195, 74, 0.85)', 'rgba(205, 220, 57, 0.9)', 'rgba(255, 235, 59, 0.95)', 'rgba(255, 193, 7, 1)' ], components: { // Main components preview: true, opacity: true, hue: true, // Input / output Options interaction: { hex: true, rgba: true, hsla: true, hsva: true, cmyk: true, input: true, clear: true, save: true } } }); Pickr està basat en esdeveniments. Utilitzeu el 0.4.x i on(event, cb) funcions per lligar / desenllaçar el llistat d'esdeveniments.

editor de fotos amb joies
Esdeveniment Descripció Arguments
off(event, cb) Inicialització feta: es pot utilitzar pickr init
PickrInstance Pickr es va tancar hide
PickrInstance Pickr es va obrir show
PickrInstance L'usuari ha fet clic al botó Desa / esborra. També es va disparar en clar amb save com a color. null
HSVaColorObject or null, PickrInstance L'usuari ha esborrat el color. clear
PickrInstance El color ha canviat (però no s’ha desat). També es va disparar a change swatchselect
HSVaColorObject, PickrInstance L'usuari s'ha aturat per canviar el color changestop
PickrInstance L'usuari ha fet clic al botó de cancel·lació (torna al color anterior). cancel
PickrInstance L'usuari ha fet clic en una de les mostres swatchselect

Exemple:

HSVaColorObject, PickrInstance

Opcions

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

Selecció mitjançant un Shadow-DOM

Exemple de configuració:

const pickr = new Pickr({ // Selector or element which will be replaced with the actual color-picker. // Can be a HTMLElement. el: '.color-picker', // Where the pickr-app should be added as child. container: 'body', // Which theme you want to use. Can be 'classic', 'monolith' or 'nano' theme: 'classic', // Nested scrolling is currently not supported and as this would be really sophisticated to add this // it's easier to set this to true which will hide pickr if the user scrolls the area behind it. closeOnScroll: false, // Custom class which gets added to the pcr-app. Can be used to apply custom styles. appClass: 'custom-class', // Don't replace 'el' Element with the pickr-button, instead use 'el' as a button. // If true, appendToBody will also be automatically true. useAsButton: false, // Size of gap between pickr (widget) and the corresponding reference (button) in px padding: 8, // If true pickr won't be floating, and instead will append after the in el resolved element. // It's possible to hide it via .hide() anyway. inline: false, // If true, pickr will be repositioned automatically on page scroll or window resize. // Can be set to false to make custom positioning easier. autoReposition: true, // Defines the direction in which the knobs of hue and opacity can be moved. // 'v' => opacity- and hue-slider can both only moved vertically. // 'hv' => opacity-slider can be moved horizontally and hue-slider vertically. // Can be used to apply custom layouts sliders: 'v', // Start state. If true 'disabled' will be added to the button's classlist. disabled: false, // If true, the user won't be able to adjust any opacity. // Opacity will be locked at 1 and the opacity slider will be removed. // The HSVaColor object also doesn't contain an alpha, so the toString() methods just // print HSV, HSL, RGB, HEX, etc. lockOpacity: false, // Precision of output string (only effective if components.interaction.input is true) outputPrecision: 0, // Defines change/save behavior: // - to keep current color in place until Save is pressed, set to `true`, // - to apply color to button and preview (save) in sync with each change // (from picker or palette), set to `false`. comparison: true, // Default color. If you're using a named color such as red, white ... set // a value for defaultRepresentation too as there is no button for named-colors. default: '#42445a', // Optional color swatches. When null, swatches are disabled. // Types are all those which can be produced by pickr e.g. hex(a), hsv(a), hsl(a), rgb(a), cmyk, and also CSS color names like 'magenta'. // Example: swatches: ['#F44336', '#E91E63', '#9C27B0', '#673AB7'], swatches: null, // Default color representation of the input/output textbox. // Valid options are `HEX`, `RGBA`, `HSVA`, `HSLA` and `CMYK`. defaultRepresentation: 'HEX', // Option to keep the color picker always visible. // You can still hide / show it via 'pickr.hide()' and 'pickr.show()'. // The save button keeps its functionality, so still fires the onSave event when clicked. showAlways: false, // Close pickr with a keypress. // Default is 'Escape'. Can be the event key or code. // (see: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key) closeWithKey: 'Escape', // Defines the position of the color-picker. // Any combinations of top, left, bottom or right with one of these optional modifiers: start, middle, end // Examples: top-start / right-end // If clipping occurs, the color picker will automatically choose its position. // Pickr uses https://github.com/Simonwep/nanopop as positioning-engine. position: 'bottom-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: { // Defines if the palette itself should be visible. // Will be overwritten with true if preview, opacity or hue are true palette: true, preview: true, // Display comparison between previous state and new color opacity: true, // Display opacity slider hue: true, // Display hue slider // show or hide components on the bottom interaction bar. interaction: { // Buttons, if you disable one but use the format in default: or setColor() - set the representation-type too! hex: false, // Display 'input/output format as hex' button (hexadecimal representation of the rgba value) rgba: false, // Display 'input/output format as rgba' button (red green blue and alpha) hsla: false, // Display 'input/output format as hsla' button (hue saturation lightness and alpha) hsva: false, // Display 'input/output format as hsva' button (hue saturation value and alpha) cmyk: false, // Display 'input/output format as cmyk' button (cyan mangenta yellow key ) input: false, // Display input/output textbox which shows the selected color value. // the format of the input is determined by defaultRepresentation, // and can be changed by the user with the buttons set by hex, rgba, hsla, etc (above). cancel: false, // Display Cancel Button, resets the color to the previous state clear: false, // Display Clear Button; same as cancel, but keeps the window open save: false, // Display Save Button, }, }, // Translations, these are the default values. i18n: { // Strings visible in the 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' } });

Per seleccionar el #shadow-root #shadow-root element que podeu utilitzar el .pickr personalitzat shadow-dom-selector a >>:

el

Tots el: '.entry >> .innr .another >> .pickr' del resultat de la consulta darrere d'un ShadowRoot s'utilitza a la següent selecció de consultes. Una alternativa seria proporcionar el propi element objectiu com >>.

generador aleatori de sí o no

L'objecte HSVaColor

Com que la representació de color per defecte es fa servir hsva (el, hue, saturation i value), però també podeu convertir-la a altres formats tal i com es detallen a continuació.

  • hsva.toHSVA () - Converteix l'objecte en una matriu hsva.
  • hsva.toHSLA () - Converteix l'objecte en una matriu hsla.
  • hsva.toRGBA () - Converteix l'objecte en una matriu rgba.
  • hsva.toHEXA () - Converteix l'objecte en una matriu hexa-decimal.
  • hsva.toCMYK () - Converteix l'objecte en una matriu cmyk.
  • hsva.clone () - Clona l'objecte de color.

El alpha es sobreescriu perquè pugueu obtenir una cadena de representació del color.

toString()

Mètodes

  • pickr.setHSVA (h hsva.toRGBA(); // Returns [r, g, b, a] hsva.toRGBA().toString(); // Returns rgba(r, g, b, a) with highest precision hsva.toRGBA().toString(3); // Returns rgba(r, g, b, a), rounded to the third decimal , s :Number, v :Number, a :Number, silenciós :Float) - Estableix un color, torna cert si s’ha acceptat el color.
  • pickr.setColor (str: :Boolean, silenciós :String | null) :Boolean - Analitza una cadena que representa un color (p. Ex. :Boolean, #fff) O un nom per exemple 'Magenta', torna cert si s'ha acceptat el color. rgb(10, 156, 23) netejarà el color.

Si null és cert (el valor per defecte és fals), el botó no canviarà el color actual.

  • pickr.on (esdeveniment silent, cb :String) :Function - Afegeix un oient d'esdeveniments al nom d'esdeveniment corresponent (vegeu la secció Esdeveniments).
  • pickr.off (esdeveniment :Pickr, cb :String) :Function - Elimina un oient d'esdeveniments del nom d'esdeveniment corresponent (vegeu la secció Esdeveniments).
  • pickr.show () :Pickr - Mostra el selector de colors.
  • pickr.hide () :Pickr - Amaga el selector de colors.
  • pickr.disable () :Pickr - Desactiva pickr i afegeix el :Pickr classe al botó.
  • pickr.enable () disabled - Habilita pickr i elimina el :Pickr classe des del botó.
  • pickr.isOpen () disabled - Retorna cert si el selector de colors està obert.
  • pickr.getRoot () :Pickr - Retorna l'arbre dom de pickr com a estructura d'arbre.
  • pickr.getColor () :Object - Retorna l'objecte HSVaColor actual.
  • pickr.getSelectedColor () :HSVaColor - Retorna el color aplicat actualment.
  • pickr.destroy () - Destrueix tota la funcionalitat.
  • pickr.destroyAndRemove () - Destrueix tota la funcionalitat i elimina l'element pickr, inclòs el botó.
  • pickr.setColorRepresentation (tipus :HSVaColor) :String - Canvieu la representació de color actual. Les opcions vàlides són :Boolean, HEX, RGBA, HSVA i HSLA, torna fals si el tipus no era vàlid.
  • pickr.getColorRepresentation () CMYK - Retorna la representació de color utilitzada actualment (per exemple, :String, HEXA ...)
  • pickr.applyColor (silent RGBA) :Boolean - Igual que prémer el botó Desa. Si el silenci és cert, el :Pickr l'esdeveniment no es convocarà.
  • pickr.addSwatch (color onSave) :String - Afegeix un color a la paleta de mostres. Retorna :Boolean si el color ha tingut èxit afegit a la paleta.
  • pickr.removeSwatch (índex true) :Number - Elimina un color de la paleta de mostres pel seu índex, torna cert si té èxit.

Mètodes estàtics

pickr

  • crear (opcions :Boolean) :Object - Crea una nova instància.

Pickr.utils

  • once (element :Pickr, esdeveniment :HTMLElement, fn :String [, opcions :Function]) - Adjunteu un identificador d'esdeveniments que només es dispararà una vegada
  • on (elements :Object, esdeveniments :HTMLElement(s), fn :String(s) [, opcions :Function]) - Adjunteu una funció de controlador d'esdeveniments.
  • apagat (elements :Object, esdeveniment :HTMLElement(s), fn :String(s) [, opcions :Function]) - Traieu un gestor d'esdeveniments.
  • createElementFromString (html :Object) :String - Crea un element HTML nou a partir d'aquesta cadena.
  • eventPath (evt :HTMLElement) :Event - Un polilloc per a la prova d'esdeveniments de camí d'esdeveniment.
  • createFromTemplate (str :[HTMLElement]) - Veure doumentació en línia .
  • resolveElement (val :String) - Resol un :String|HTMLElement, suporta HTMLElement com a selector dom domèstic.
  • adjustableInputNumbers (el >>>, mapper :InputElement) - Crea la possibilitat de canviar els números d’un camp d’entrada mitjançant el desplaçament del ratolí. La funció mapeador té tres arguments: el número coincident, un multiplicador i l'índex de la coincidència.

Utilitzeu aquest producte amb cura, no és segur que es quedin per sempre.

Propietats estàtiques

  • versió - La versió actual.
  • I18N_DEFAULTS - Valors predeterminats i18n.
  • OPCIONS DEFAULT - Opcions predeterminades (no anul·leu aquesta propietat en si mateixa, només canvieu-ne les propietats).

Preguntes freqüents

Com inicialitzo diversos pickr? Puc accedir a la instància mitjançant :Function o class?

No, no es pot. Heu de fer un seguiment de les variables de la vostra instància: pickr és (encara no) un component web. La millor opció seria crear nous elements mitjançant id i passar-lo directament com document.createElement. exemple .

aplicacions fetes amb kotlin

Vull utilitzar pickr en un formulari, com puc fer-ho?

Podeu utilitzar el i passeu una referència (o selector) del vostre element d'entrada com useAsButton: true. A continuació, podeu actualitzar l'element d'entrada sempre que es faci un canvi. exemple .

Vull actualitzar les opcions després de muntar Pickr, és possible?

Lamentablement no. El codi bàsic d’aquest projecte és bastant antic (fa més de dos anys), i el vaig fer en els meus primers dies de js: el widget no és capaç de tornar-se a representar dinàmicament d’aquesta manera. Cal destruir-lo i reinicialitzar-lo.

Detalls de la descàrrega:

Autor: Simonwep

Demostració en directe: https://simonwep.github.io/pickr

pausa del sistema a c ++

GitHub: https://github.com/Simonwep/pickr

#javascript #picker