फ्लैट, सरल, हैक करने योग्य कलर-पिकर

फ्लैट, सरल, हैक करने योग्य कलर-पिकर

फ्लैट, सरल, हैक करने योग्य कलर-पिकर।

विशेषताएं

• विषयों
• सरल उपयोग
• शून्य निर्भरता
• एकाधिक रंग प्रतिनिधित्व
• रंग तुलना
• अस्पष्टता नियंत्रण
• के माध्यम से विस्तार समायोजन। माउस व्हील
• उत्तरदायी और ऑटो-पोजिशनिंग
• स्पर्श उपकरणों का समर्थन करता है
• त्वरित चयन के लिए नमूने
• पूरी तरह से सुलभ और i18n
• शैडो-डोम सपोर्ट

विषयों

क्लासिक	एकाश्म	नैनो

नैनो सीएसएस-ग्रिड का उपयोग करती है इसलिए यह पुराने ब्राउज़रों में काम नहीं करेगा।

हटाए गए ट्विटर चित्रों को कैसे देखें

शुरू करना

नोड

नोट: रीडमी हमेशा नवीनतम प्रतिबद्धताओं के साथ अद्यतित होती है। देखो विज्ञप्ति नवीनतम संस्करण के संबंध में स्थापना निर्देशों के लिए।

एनपीएम के माध्यम से स्थापित करें:

यार्न के माध्यम से स्थापित करें:

कोड और शैली शामिल करें:

ध्यान दें: es5-बंडल (उदाहरण के लिए विरासत संस्करण) काफी बड़ा है (आधुनिक बंडल के एक तिहाई के आसपास)। कृपया आधुनिक संस्करण का उपयोग करने पर ध्यान दें और बाद में अपने अंतिम बंडल में पॉलीफ़िल जोड़ें! (या बेहतर: उपयोगकर्ताओं को संकेत दें कि उन्हें नवीनतम ब्राउज़र का उपयोग करना चाहिए)। IE जैसे ब्राउज़र हैं समर्थित नहीं (कम से कम आधिकारिक तौर पर नहीं)।

ब्राउज़र

जेएसडेलिव्र:

|_+_| . को लोड करना सुनिश्चित करें (या es5 संस्करण) उपरांत |_+_|. इसके अलावा |_+_| टैग |_+_| . के साथ काम नहीं करता है गुण।

प्रयोग

आप यहां और उदाहरण पा सकते हैं।

आयोजन

संस्करण के बाद से |_+_| पिकर घटना संचालित है। |_+_| . का प्रयोग करें और |_+_| ईवेंटलिस्टर को बाइंड / अनबाइंड करने के लिए कार्य करता है।

फ़ॉन्ट आकार बदलें बुकमार्क बार क्रोम

उदाहरण:

विकल्प

छाया-डोम के माध्यम से चयन

उदाहरण सेटअप:

|_+_| . का चयन करने के लिए तत्व आप कस्टम का उपयोग कर सकते हैं |_+_| छाया-डोम-चयनकर्ता |_+_| में:

प्रत्येक |_+_| एक |_+_| . के पीछे क्वेरी-परिणाम का अगले क्वेरी चयन में उपयोग किया जाता है। लक्ष्य-तत्व स्वयं को |_+_| के रूप में प्रदान करना एक विकल्प होगा।

शुरुआती के लिए जावास्क्रिप्ट कोडिंग चुनौतियां

HSVaColor ऑब्जेक्ट

डिफ़ॉल्ट रंग प्रतिनिधित्व के रूप में hsva (|_+_|, |_+_|, |_+_| और |_+_|) का उपयोग किया जाता है, लेकिन आप इसे नीचे सूचीबद्ध अन्य प्रारूपों में भी परिवर्तित कर सकते हैं।

• hsva.toHSVA () - ऑब्जेक्ट को hsva ऐरे में कनवर्ट करता है।
• hsva.toHSLA () - ऑब्जेक्ट को hsla ऐरे में कनवर्ट करता है।
• hsva.toRGBA () - ऑब्जेक्ट को rgba ऐरे में कनवर्ट करता है।
• hsva.toHEXA () - वस्तु को हेक्सा-दशमलव सरणी में परिवर्तित करता है।
• hsva.toCMYK () - ऑब्जेक्ट को cmyk ऐरे में कनवर्ट करता है।
• एचएसवीए.क्लोन () - कलर ऑब्जेक्ट को क्लोन करता है।

|_+_| ओवरराइड किया गया है ताकि आप रंग प्रतिनिधित्व स्ट्रिंग प्राप्त कर सकें।

तरीकों

• pickr.setHSVA(h|_+_|,s|_+_|,v|_+_|,a|_+_|, मौन|_+_|) - एक रंग सेट करें, अगर रंग स्वीकार कर लिया गया है तो सही हो जाता है।
• pickr.setColor(str: |_+_|, साइलेंट|_+_|)|_+_| - एक स्ट्रिंग को पार करता है जो एक रंग का प्रतिनिधित्व करता है (जैसे |_+_|, |_+_|) या नाम उदा। अगर रंग स्वीकार कर लिया गया है, तो 'मैजेंटा' सही है। |_+_| रंग साफ कर देगा।

अगर |_+_| सत्य है (डिफ़ॉल्ट गलत है), बटन वर्तमान रंग नहीं बदलेगा।

• pickr.on(event|_+_|, cb|_+_|)|_+_| - एक ईवेंट श्रोता को दिए गए संबंधित ईवेंट-नाम में जोड़ता है (अनुभाग ईवेंट देखें)।
• pickr.off(ईवेंट|_+_|, सीबी|_+_|)|_+_| - किसी ईवेंट श्रोता को दिए गए संबंधित ईवेंट-नाम से हटा देता है (अनुभाग ईवेंट देखें)।
• पिकर.शो ()|_+_| - रंग बीनने वाला दिखाता है।
• पिकर छुपाएं ()|_+_| - रंग-पिकर छुपाता है।
• पिकर.अक्षम ()|_+_| - पिकर को अक्षम करता है और |_+_| . जोड़ता है बटन के लिए कक्षा।
• pickr.enable()|_+_| - पिकर को सक्षम करता है और हटाता है |_+_| बटन से कक्षा।
• pickr.isOpen()|_+_| - यदि रंग बीनने वाला वर्तमान में खुला है, तो सही लौटाता है।
• pickr.getRoot()|_+_| - पिकर के डोम-ट्री को ट्री-स्ट्रक्चर के रूप में लौटाता है।
• pickr.getColor()|_+_| - वर्तमान HSVaColor ऑब्जेक्ट लौटाता है।
• pickr.getSelectedColor()|_+_| - वर्तमान में लागू रंग लौटाता है।
• पिकर.नष्ट () - सभी कार्यक्षमता को नष्ट कर देता है।
• pickr.destroyAndRemove () - सभी कार्यक्षमता को नष्ट कर देता है और बटन सहित पिकर तत्व को हटा देता है।
• pickr.setColorRepresentation(type|_+_|)|_+_| - वर्तमान रंग-प्रतिनिधित्व बदलें। मान्य विकल्प हैं |_+_|, |_+_|, |_+_|, |_+_| और |_+_|, यदि प्रकार अमान्य था, तो गलत लौटाता है।
• pickr.getColorRepresentation()|_+_| - वर्तमान में उपयोग किया गया रंग-प्रतिनिधित्व लौटाता है (उदा. |_+_|, |_+_|…)
• pickr.applyColor(silent|_+_|)|_+_| - सेव बटन दबाने के समान। अगर मौन सत्य है |_+_| घटना नहीं कहा जाएगा।
• pickr.addSwatch (रंग cancel) PickrInstance - स्वैच पैलेट में रंग जोड़ता है। रिटर्न |_+_| यदि रंग सफलतापूर्वक पैलेट में जोड़ा गया है।
• pickr.removeSwatch(index|_+_|)|_+_| - स्वैच पैलेट से उसकी अनुक्रमणिका द्वारा एक रंग हटाता है, सफल होने पर सत्य लौटाता है।

स्थिर तरीके

पिकर

• बनाएं(विकल्प|_+_|)|_+_| - एक नया उदाहरण बनाता है।

पिकर.बर्तन

• एक बार (तत्व|_+_|, घटना|_+_|, एफएन|_+_|[, विकल्प |_+_|]) - एक ईवेंट हैंडल संलग्न करें जिसे केवल एक बार सक्रिय किया जाएगा
• on(elements|_+_|, ईवेंट|_+_|, fn|_+_|[, विकल्प |_+_|]) - एक ईवेंट हैंडलर फ़ंक्शन संलग्न करें।
• बंद(तत्व|_+_|, घटना|_+_|, एफएन|_+_|[, विकल्प |_+_|]) - एक ईवेंट हैंडलर निकालें।
• createElementFromString(html|_+_|)|_+_| - इस स्ट्रिंग से एक नया HTML एलिमेंट बनाता है।
• इवेंटपाथ (evt swatchselect) HSVaColorObject, PickrInstance - इवेंट-पाथ इवेंट प्रोपेरी के लिए एक पॉलीफ़िल।
• createFromTemplate(str|_+_|) - देखो इनलाइन डौमेंटेशन .
• संकल्प तत्व (वैल 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); }); ) - हल करता है |_+_|, समर्थन करता है |_+_| छाया डोम चयनकर्ता के रूप में।
• एडजस्टेबल इनपुट नंबर (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' } }); , मैपर #shadow-root #shadow-root ) - माउस स्क्रॉलिंग के जरिए इनपुटफील्ड में नंबर बदलने की संभावना पैदा करता है। मैपर फ़ंक्शन तीन तर्क लेता है: मिलान संख्या, गुणक और मिलान का सूचकांक।

इस बर्तन का सावधानी से उपयोग करें, यह सुनिश्चित नहीं है कि वे हमेशा के लिए रहेंगे!

स्थिर गुण

• संस्करण - वर्तमान संस्करण।
• I18N_DEFAULTS - i18n डिफ़ॉल्ट मान।
• DEFAULT_OPTIONS - डिफ़ॉल्ट विकल्प (इस संपत्ति को स्वयं ओवरराइड न करें, केवल इसके गुणों को बदलें!)।

सामान्य प्रश्न

मैं एकाधिक पिकर को कैसे प्रारंभ करूं? क्या मैं इंस्टेंस को |_+_| . के माध्यम से एक्सेस कर सकता हूं या |_+_|?

नहीं, आप नहीं कर सकते। आपको अपने इंस्टेंस वेरिएबल्स का ट्रैक रखने की आवश्यकता है - पिकर एक वेब-घटक है (अभी तक नहीं)। सबसे अच्छा विकल्प यह होगा कि |_+_| . के माध्यम से नए तत्वों का निर्माण किया जाए और सीधे इसे |_+_| के रूप में पास करें। उदाहरण .

मशीन लर्निंग के लिए पायथन लाइब्रेरी

मैं एक फॉर्म में पिकर का उपयोग करना चाहता हूं, मैं यह कैसे कर सकता हूं?

आप उपयोग कर सकते हैं |_+_| और अपने इनपुट-एलिमेंट के संदर्भ (या चयनकर्ता) को |_+_| के रूप में पास करें। फिर जब भी कोई बदलाव किया गया तो आप इनपुट-एलिमेंट को अपडेट कर सकते हैं। उदाहरण .

मैं पिकर माउंट करने के बाद विकल्पों को अपडेट करना चाहता हूं, क्या यह संभव है?

दुर्भाग्य से नहीं। इस परियोजना का मूल-कोड पुराना है (2 वर्ष से अधिक), और मैंने इसे अपने शुरुआती जेएस-दिनों में बनाया - विजेट उस तरह से गतिशील रूप से फिर से प्रस्तुत करने में सक्षम नहीं है। आपको इसे नष्ट करना और फिर से शुरू करना होगा।

विवरण डाउनलोड करें:

लेखक: साइमनवेप

लाइव डेमो: https://simonwep.github.io/pickr

एजी ग्रिड: चयनित पंक्तियाँ प्राप्त करें

गिटहब: https://github.com/Simonwep/pickr

#जावास्क्रिप्ट #पिकर

यह सभी देखें:

• PyRFC के साथ SAP में डेटा डालने के लिए Python का उपयोग करना
• नक्षत्र कैसे और कहाँ से खरीदें (DAG) – एक आसान चरण दर चरण मार्गदर्शिका
• BestWritingService.com - क्योंकि हम परवाह करते हैं
• Next.js 10 के साथ नए छवि घटक की खोज करना
• टेलविंड कॉन्फिग में रंग कैसे अनुकूलित करें [टेलविंड सीएसएस की मूल बातें]