انتخابگر
مثال ساده
<input type="text" class="form-input" id="datepicker-basic">
تاریخ و زمان
<input type="text" class="form-input" id="datepicker-datetime">
تاریخهای دوستانه برای انسان
<input type="text" class="form-input" id="datepicker-humanfd">
تاریخ شروع و تاریخ پایان
<input type="text" class="form-input" id="datepicker-minmax">
غیرفعال کردن تاریخها
<input type="text" class="form-input" id="datepicker-disable">
انتخاب چندین تاریخ
<input type="text" class="form-input" id="datepicker-multiple">
بازه
<input type="text" class="form-input" id="datepicker-range">
انتخاب کننده
<input type="text" class="form-input" id="datepicker-timepicker">
انتخابگر رنگ
تمها
دموی کلاسیک
از کلاس classic-colorpicker برای تنظیم انتخابگر رنگ کلاسیک استفاده کنید.
دموی مونولیث
از کلاس monolith-colorpicker برای تنظیم انتخابگر رنگ مونولیث استفاده کنید.
دموی نانو
از کلاس nano-colorpicker برای تنظیم انتخابگر رنگ نانو استفاده کنید.
گزینهها
دمو
از کلاس colorpicker-demo برای تنظیم گزینه دمو انتخابگر رنگ استفاده کنید.
انتخابگر با شفافیت و رنگ
از کلاس colorpicker-opacity-hue برای تنظیم انتخابگر رنگ با شفافیت و رنگ استفاده کنید.
کلیدها
از کلاس colorpicker-switch برای تنظیم انتخابگر رنگ کلیدی استفاده کنید.
انتخابگر با ورودی
از کلاس colorpicker-input برای تنظیم انتخابگر رنگ با ورودی استفاده کنید.
فرمت رنگ
از کلاس colorpicker-format برای تنظیم انتخابگر رنگ با گزینه فرمت استفاده کنید.
<div>
<div class="grid lg:grid-cols-3 md:grid-cols-2 gap-6">
<div class="bg-slate-100 p-4 rounded-md flex flex-col">
<h5 class="text-base text-gray-400 mb-2 shrink-0">Classic Demo</h5>
<p class="text-gray-400 grow">Use <code>classic-colorpicker</code> class to set
classic colorpicker.</p>
<div class="classic-colorpicker"></div>
</div>
<div class="bg-slate-100 p-4 rounded-md flex flex-col">
<h5 class="text-base text-gray-400 mb-2 shrink-0">Monolith Demo</h5>
<p class="text-gray-400 grow">Use <code>monolith-colorpicker</code> class to set
monolith colorpicker.</p>
<div class="monolith-colorpicker"></div>
</div>
<div class="bg-slate-100 p-4 rounded-md flex flex-col">
<h5 class="text-base text-gray-400 mb-2 shrink-0">Nano Demo</h5>
<p class="text-gray-400 grow">Use <code>nano-colorpicker</code> class to set nano
colorpicker.</p>
<div class="nano-colorpicker"></div>
</div>
</div>
</div>
<div class="mt-5">
<div class="grid lg:grid-cols-5 md:grid-cols-3 gap-6">
<div class="bg-slate-100 p-4 rounded-md flex flex-col">
<h5 class="text-base text-gray-400 mb-2 shrink-0">Demo</h5>
<p class="text-gray-400 grow">Use <code>colorpicker-demo</code> class to set demo
option colorpicker.</p>
<div class="colorpicker-demo"></div>
</div>
<div class="bg-slate-100 p-4 rounded-md flex flex-col">
<h5 class="text-base text-gray-400 mb-2 shrink-0">Picker with Opacity & Hue</h5>
<p class="text-gray-400 grow">Use <code>colorpicker-opacity-hue</code> class to set
colorpicker with opacity & hue.</p>
<div class="colorpicker-opacity-hue"></div>
</div>
<div class="bg-slate-100 p-4 rounded-md flex flex-col">
<h5 class="text-base text-gray-400 mb-2 shrink-0">Switches</h5>
<p class="text-gray-400 grow">Use <code>colorpicker-switch</code> class to set switch
colorpicker.</p>
<div class="colorpicker-switch"></div>
</div>
<div class="bg-slate-100 p-4 rounded-md flex flex-col">
<h5 class="text-base text-gray-400 mb-2 shrink-0">Picker with Input</h5>
<p class="text-gray-400 grow">Use <code>colorpicker-input</code> class to set
colorpicker with input.</p>
<div class="colorpicker-input"></div>
</div>
<div class="bg-slate-100 p-4 rounded-md flex flex-col">
<h5 class="text-base text-gray-400 mb-2 shrink-0">Color Format</h5>
<p class="text-gray-400 grow">Use <code>colorpicker-format</code> class to set
colorpicker with format option.</p>
<div class="colorpicker-format"></div>
</div>
</div>
</div>