TS Pickit Color

🇬🇧 EN 🇩🇪 DE 🇸🇮 SI

Sodoben, dostopen izbirnik barv z avtomatsko inicializacijo

⭐ GitHub HEX / RGB / HSL Podpora alfa ~15 KB ♿ A11y
Poglej na GitHub 💖 Sponzoriraj

🚀 Hiter začetek

Izbirnik barv se inicializira samodejno! Preprosto dodajte atribut data-colorpicker vašim vnosnim poljem:

<!-- Vključite CSS --> <link rel="stylesheet" href="dist/colorpicker.css"> <!-- Inicializirajte izbirnik barv z atributom --> <input type="text" data-colorpicker="format:hex" value="#3b82f6"> <!-- Vključite JavaScript (na koncu body) --> <script src="dist/colorpicker.js"></script>

Demo v živo - samodejni zagon z atributom

Format HEX

<input data-colorpicker="format:hex">

HEX z alfo

<input data-colorpicker="format:hex,alpha:true">

RGB z alfo

<input data-colorpicker="format:rgb,alpha:true">

Format HSL

<input data-colorpicker="format:hsl,alpha:true">

Način drsnikov HSL

<input data-colorpicker="format:hsl,sliderMode:true,alpha:true">

Kompakten način

<input data-colorpicker="format:hex,compact:true">

Z EyeDropper

<input data-colorpicker="format:hex,eyeDropper:true">

Samo prednastavljeno

<input data-colorpicker="format:hex,presets:true" data-preset-colors="#3b82f6,#10b981,...">

Pogled seznama

<input data-colorpicker="presets:true,list:true" data-preset-colors="...">

Seznam + kompaktno

<input id="myPicker"> <script> colorpicker('#myPicker', { compact: true, listView: true, presetsOnly: true, presetColors: [...], presetLabels: ['Primarna barva', ...] }); </script>

Način predogleda vnosa

<input data-colorpicker="format:hex,showAlpha:true,inputPreview:true">

🎨 Živa tema: ozadje

Območje živega predogleda
<input data-colorpicker="format:hex,target:#theme-bg-target-sl,property:background-color">

🎨 Živa tema: barva besedila

Živpregled besedila
<input data-colorpicker="format:hex,target:#theme-text-target-sl,property:color">

🌍 Večjezičnost

<input data-colorpicker="format:hex,language:si"> <!-- Samodejno zaznava iz <html lang="si"> ali brskalnika -->

Podpira: de (Deutsch), en (English), si (Slovenščina)

Vgrajen način

<div style="max-width: 800px;"> <input data-colorpicker="format:hex,inline:true"> </div>

📋 Referenca atributov

Konfigurirajte izbirnik barv neposredno v HTML z data-colorpicker:

Atribut Vrednosti Opis
format hex, rgb, hsl Format barve za izhod
alpha true, false Omogoči kanal alfa (prosojnost)
compact true, false Kompakten pogled gumba za obrazce
inline true, false Vedno viden (brez pojavnega okna)
presets true, false Prikaži samo prednastavljene barve
list true, false Prednastavljeno kot seznam z oznakami

Primeri

<!-- HEX z alfo --> <input data-colorpicker="format:hex,alpha:true"> <!-- Kompaktno za obrazce --> <input data-colorpicker="format:rgb,compact:true"> <!-- Samo prednastavljeno --> <input data-colorpicker="presets:true" data-preset-colors="#ff0000,#00ff00,#0000ff"> <!-- Kombinacija več možnosti --> <input data-colorpicker="format:hsl,alpha:true,compact:true">

Ustvarjeno z ❤️ avtor Thomas Skerbis (KLXM Crossmedia)

Ta program je Donationware • Podprite razvoj

GitHubTežaveLicenca