Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2025-12-21 17:34:25 +04:00
Code Issues Projects Releases Wiki Activity

Use color-input include file more (#2347)

Browse Source 
Co-authored-by: Paweł Kuna <1282324+codecalm@users.noreply.github.com>
This commit is contained in:
ethancrawford
2025-05-11 18:31:56 +08:00
committed by GitHub
parent 467c529fdc
commit 5fa662bfae
4 changed files with 12 additions and 165 deletions
Download Patch File Download Diff File Expand all files Collapse all files

162
docs/content/ui/forms/form-color-check.md
View File

@@ -16,172 +16,14 @@ Your input controls can come in a variety of colors, depending on your preferenc
There is also an example of a color input:
{% capture html -%}
<div class="mb-3">
<label class="form-label">Color Input</label>
<div class="row g-2">
<div class="col-auto">
<label class="form-colorinput">
<input name="color" type="radio" value="dark" class="form-colorinput-input" />
<span class="form-colorinput-color bg-dark"></span>
</label>
</div>
<div class="col-auto">
<label class="form-colorinput form-colorinput-light">
<input name="color" type="radio" value="white" class="form-colorinput-input" checked />
<span class="form-colorinput-color bg-white"></span>
</label>
</div>
<div class="col-auto">
<label class="form-colorinput">
<input name="color" type="radio" value="blue" class="form-colorinput-input" />
<span class="form-colorinput-color bg-blue"></span>
</label>
</div>
<div class="col-auto">
<label class="form-colorinput">
<input name="color" type="radio" value="azure" class="form-colorinput-input" />
<span class="form-colorinput-color bg-azure"></span>
</label>
</div>
<div class="col-auto">
<label class="form-colorinput">
<input name="color" type="radio" value="indigo" class="form-colorinput-input" />
<span class="form-colorinput-color bg-indigo"></span>
</label>
</div>
<div class="col-auto">
<label class="form-colorinput">
<input name="color" type="radio" value="purple" class="form-colorinput-input" />
<span class="form-colorinput-color bg-purple"></span>
</label>
</div>
<div class="col-auto">
<label class="form-colorinput">
<input name="color" type="radio" value="pink" class="form-colorinput-input" />
<span class="form-colorinput-color bg-pink"></span>
</label>
</div>
<div class="col-auto">
<label class="form-colorinput">
<input name="color" type="radio" value="red" class="form-colorinput-input" />
<span class="form-colorinput-color bg-red"></span>
</label>
</div>
<div class="col-auto">
<label class="form-colorinput">
<input name="color" type="radio" value="orange" class="form-colorinput-input" />
<span class="form-colorinput-color bg-orange"></span>
</label>
</div>
<div class="col-auto">
<label class="form-colorinput">
<input name="color" type="radio" value="yellow" class="form-colorinput-input" />
<span class="form-colorinput-color bg-yellow"></span>
</label>
</div>
<div class="col-auto">
<label class="form-colorinput">
<input name="color" type="radio" value="lime" class="form-colorinput-input" />
<span class="form-colorinput-color bg-lime"></span>
</label>
</div>
<div class="col-auto">
<label class="form-colorinput">
<input name="color" type="radio" value="green" class="form-colorinput-input" />
<span class="form-colorinput-color bg-green"></span>
</label>
</div>
</div>
</div>
{% include "parts/form/input-color.html" type="checkbox" %}
{%- endcapture %}
{% include "docs/example.html" html=html %}
If you need to select only one color, you can use the radio input type:
{% capture html -%}
<div class="mb-3">
<label class="form-label">Color Input</label>
<div class="row g-2">
<div class="col-auto">
<label class="form-colorinput">
<input name="color-rounded" type="radio" value="dark" class="form-colorinput-input" />
<span class="form-colorinput-color bg-dark rounded-circle"></span>
</label>
</div>
<div class="col-auto">
<label class="form-colorinput form-colorinput-light">
<input
name="color-rounded"
type="radio"
value="white"
class="form-colorinput-input"
checked
/>
<span class="form-colorinput-color bg-white rounded-circle"></span>
</label>
</div>
<div class="col-auto">
<label class="form-colorinput">
<input name="color-rounded" type="radio" value="blue" class="form-colorinput-input" />
<span class="form-colorinput-color bg-blue rounded-circle"></span>
</label>
</div>
<div class="col-auto">
<label class="form-colorinput">
<input name="color-rounded" type="radio" value="azure" class="form-colorinput-input" />
<span class="form-colorinput-color bg-azure rounded-circle"></span>
</label>
</div>
<div class="col-auto">
<label class="form-colorinput">
<input name="color-rounded" type="radio" value="indigo" class="form-colorinput-input" />
<span class="form-colorinput-color bg-indigo rounded-circle"></span>
</label>
</div>
<div class="col-auto">
<label class="form-colorinput">
<input name="color-rounded" type="radio" value="purple" class="form-colorinput-input" />
<span class="form-colorinput-color bg-purple rounded-circle"></span>
</label>
</div>
<div class="col-auto">
<label class="form-colorinput">
<input name="color-rounded" type="radio" value="pink" class="form-colorinput-input" />
<span class="form-colorinput-color bg-pink rounded-circle"></span>
</label>
</div>
<div class="col-auto">
<label class="form-colorinput">
<input name="color-rounded" type="radio" value="red" class="form-colorinput-input" />
<span class="form-colorinput-color bg-red rounded-circle"></span>
</label>
</div>
<div class="col-auto">
<label class="form-colorinput">
<input name="color-rounded" type="radio" value="orange" class="form-colorinput-input" />
<span class="form-colorinput-color bg-orange rounded-circle"></span>
</label>
</div>
<div class="col-auto">
<label class="form-colorinput">
<input name="color-rounded" type="radio" value="yellow" class="form-colorinput-input" />
<span class="form-colorinput-color bg-yellow rounded-circle"></span>
</label>
</div>
<div class="col-auto">
<label class="form-colorinput">
<input name="color-rounded" type="radio" value="lime" class="form-colorinput-input" />
<span class="form-colorinput-color bg-lime rounded-circle"></span>
</label>
</div>
<div class="col-auto">
<label class="form-colorinput">
<input name="color-rounded" type="radio" value="green" class="form-colorinput-input" />
<span class="form-colorinput-color bg-green rounded-circle"></span>
</label>
</div>
</div>
</div>
{% include "parts/form/input-color.html" name="color-rounded" rounded=true %}
{%- endcapture %}
{% include "docs/example.html" html=html %}