Pickit Color - Demo in dokumentacija modernega izbirnika barv

🚀 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

Standardna izbira barve

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

HEX z alfo

8-mestni HEX (#RRGGBBAA)

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

RGB z alfo

Podpora prosojnosti

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

Format HSL

Odtenek-Nasičenost-Svetlost

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

Način drsnikov HSL

Ločeni drsniki za H, S, L, A

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

Kompakten način

Za obrazce

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

Z EyeDropper

Izbirnik s kapalko za zaslon

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

Samo prednastavljeno

Samo prednastavljene barve

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

Pogled seznama

Z oznakami

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

Seznam + kompaktno

Gumb s seznamom in oznakami

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

Način predogleda vnosa

Barvni kvadrat vizualno vključen v vnos

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

🎨 Živa tema: ozadje

Spremeni barvo ozadja v živo

Območje živega predogleda

<input data-colorpicker="format:hex,target:#theme-bg-target-sl,property:background-color">

🎨 Živa tema: barva besedila

Spremeni barvo besedila v živo

Živpregled besedila

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

🌍 Večjezičnost

Nastavite jezik ročno ali ga samodejno zaznajte

<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

Vedno viden, prilagaja se širini vsebnika

<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">

TS Pickit Color