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

5
.changeset/twenty-meals-hug.md Normal file
View File

@@ -0,0 +1,5 @@
---
"@tabler/docs": patch
---
Use color-input examples in documentation

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: There is also an example of a color input:
{% capture html -%} {% capture html -%}
<div class="mb-3"> {% include "parts/form/input-color.html" type="checkbox" %}
<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>
{%- endcapture %} {%- endcapture %}
{% include "docs/example.html" html=html %} {% include "docs/example.html" html=html %}
If you need to select only one color, you can use the radio input type: If you need to select only one color, you can use the radio input type:
{% capture html -%} {% capture html -%}
<div class="mb-3"> {% include "parts/form/input-color.html" name="color-rounded" rounded=true %}
<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>
{%- endcapture %} {%- endcapture %}
{% include "docs/example.html" html=html %} {% include "docs/example.html" html=html %}

4
shared/includes/forms/form-elements-3.html
View File

@@ -1,7 +1,7 @@
{% include "parts/form/input-image.html" %} {% include "parts/form/input-image.html" %}
{% include "parts/form/input-image-radio.html" offset=10 %} {% include "parts/form/input-image-radio.html" offset=10 %}
{% include "parts/form/input-color.html" %} {% include "parts/form/input-color.html" type="checkbox" label="Color Input Check" %}
{% include "parts/form/input-color.html" name="color-rounded" rounded=true %} {% include "parts/form/input-color.html" name="color-rounded" rounded=true label="Color Input Radio" %}
{% include "parts/form/input-colorpicker.html" %} {% include "parts/form/input-colorpicker.html" %}
{% include "parts/form/validation-states.html" %} {% include "parts/form/validation-states.html" %}

6
shared/includes/parts/form/input-color.html
View File

@@ -10,13 +10,13 @@
<div class="mb-3"> <div class="mb-3">
<label class="form-label">{{ include.label | default: 'Color Input' }}</label> <label class="form-label">{{ include.label | default: 'Color Input' }}</label>
<div class="row g-2"> <div class="row g-2">
{% for color in colors %} {% for color in colors -%}
<div class="col-auto"> <div class="col-auto">
<label class="form-colorinput{% if color == 'white' %} form-colorinput-light{% endif %}"> <label class="form-colorinput{% if color == 'white' %} form-colorinput-light{% endif %}">
<input name="{{ include.name | default: 'color' }}" type="radio" value="{{ color }}" class="form-colorinput-input" {% if forloop.index == 2 %} checked{% endif %}/> <input name="{{ include.name | default: 'color' }}" type="{{ include.type | default: 'radio' }}" value="{{ color }}" class="form-colorinput-input" {% if forloop.index == 2 %} checked{% endif %}/>
<span class="form-colorinput-color bg-{{ color }}{% if include.rounded %} rounded-circle{% endif %}"></span> <span class="form-colorinput-color bg-{{ color }}{% if include.rounded %} rounded-circle{% endif %}"></span>
</label> </label>
</div> </div>
{% endfor %} {%- endfor %}
</div> </div>
</div> </div>