Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2025-12-24 02:38:15 +04:00
Code Issues Projects Releases Wiki Activity

Docs fixes: Remove duplicated code examples, fix links, fix filled icons, fix dropdown examples

Browse Source 
Co-authored-by: ethancrawford <ethan_jc@hotmail.com>
This commit is contained in:
BG-Software
2025-05-08 21:53:47 +02:00
committed by GitHub
parent 8470c9b315
commit 5b3e201d06
32 changed files with 59 additions and 634 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -98,7 +98,6 @@ There is also an example of a color input:
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>
@@ -186,28 +185,10 @@ If you need to select only one color, you can use the radio input type:
{%- endcapture %}
{% include "docs/example.html" html=html %}
```html
<label class="form-colorinput">
<input name="..." type="radio" value="..." class="form-colorinput-input" />
<span class="form-colorinput-color bg-dark rounded-circle"></span>
</label>
```
## Input color picker
Add an color picker to your form to let users customize it according to their preferences.
```html
<input
type="color"
class="form-control form-control-color"
value="#066fd1"
title="Choose your color"
/>
```
There is also an example of a color picker input:
{% capture html -%}
<div class="mb-3">
<label class="form-label">Color picker</label>

18
docs/content/ui/forms/form-elements.md
View File

@@ -97,24 +97,6 @@ Use the `form-control-rounded` class if you prefer form controls with rounded co
{%- endcapture %}
{% include "docs/example.html" html=html %}
```html
<div class="mb-3">
<label class="form-label">Form control rounded</label>
<input
type="text"
class="form-control form-control-rounded mb-2"
name="Form control rounded"
placeholder="Text.."
/>
<div class="input-icon">
<input type="text" value="" class="form-control form-control-rounded" placeholder="Search…" />
<span class="input-icon-addon">
{% include "ui/icon.html" icon="search" %}
</span>
</div>
</div>
```
## Form control flush
You can remove borders from your form control by adding the `form-control-flush` class.

11
docs/content/ui/forms/form-fieldset.md
View File

@@ -33,14 +33,3 @@ Group parts of your form to make it well-structured and clearer for users, using
</fieldset>
{%- endcapture %}
{% include "docs/example.html" html=html %}
```html
<fieldset class="form-fieldset">
...
<div class="mb-3">
<label class="form-label required">Company</label>
<input type="text" class="form-control" autocomplete="off" />
</div>
...
</fieldset>
```

12
docs/content/ui/forms/form-helpers.md
View File

@@ -43,12 +43,6 @@ Look at the example below to see how the input help works:
Use the `.required` class to indicate that a field is required. It will add a red asterisk to the label.
```html
<label class="form-label required">Required</label>
```
Look at the example below to see how the required field works:
{% capture html -%}
<div>
<label class="form-label required">Required</label>
@@ -80,12 +74,6 @@ Look at the example below to see how the form hint works:
Use the `.form-label-description` class to add additional information to the label. The text will appear next to the label. You can use it to add for example a character counter.
```html
<label class="form-label">Textarea <span class="form-label-description">56/100</span> </label>
```
This example shows how to use the additional info inside the label:
{% capture html -%}
<div>
<label class="form-label">Textarea <span class="form-label-description">56/100</span> </label>

20
docs/content/ui/forms/form-image-check.md
View File

@@ -133,15 +133,6 @@ If you want to use the image check as a radio button, you can change the input t
{%- endcapture %}
{% include "docs/example.html" html=html %}
```html
<label class="form-imagecheck">
<input name="..." type="radio" value="1" class="form-imagecheck-input" />
<span class="form-imagecheck-figure">
<img src="..." alt="" class="form-imagecheck-image" />
</span>
</label>
```
## Avatars
If you want to use the image check with avatars, you can use an [avatar component](/ui/components/avatars) instead of an image.
@@ -203,14 +194,3 @@ If you want to use the image check with avatars, you can use an [avatar componen
</div>
{%- endcapture %}
{% include "docs/example.html" html=html %}
```html
<label class="form-imagecheck">
<input name="..." type="checkbox" value="..." class="form-imagecheck-input" />
<span class="form-imagecheck-figure">
<span class="form-imagecheck-image">
<span class="avatar avatar-md" style="background-image: url(...)"></span>
</span>
</span>
</label>
```

22
docs/content/ui/forms/form-selectboxes.md
View File

@@ -380,25 +380,3 @@ Use more advanced selectboxes to display the range of available options. You can
</div>
{%- endcapture %}
{% include "docs/example.html" html=html column %}
```html
<label class="form-selectgroup-item flex-fill">
<input
type="radio"
name="form-payment"
value="mastercard"
class="form-selectgroup-input"
checked
/>
<div class="form-selectgroup-label d-flex align-items-center p-3">
<div class="me-3">
<span class="form-selectgroup-check"></span>
</div>
<div>
<span class="payment payment-provider-mastercard payment-xs me-2"></span>
ending in <strong>2807</strong>
</div>
</div>
</label>
```

13
docs/content/ui/forms/form-validation.md
View File

@@ -20,13 +20,6 @@ To apply the validation state to the form control, use the `.is-valid` and `.is-
To provide users with additional information about the validation state, you can use the `.valid-feedback` and `.invalid-feedback` classes.
```html
<input type="text" class="form-control is-valid" placeholder="Valid State..." />
<div class="valid-feedback">Looks good!</div>
```
This is how it works in the example below:
{% capture html -%}
<div>
<label class="form-label required">City</label>
@@ -53,12 +46,6 @@ If you prefer a more subtle manner of informing users of the input control valid
To do this, use the `.is-valid-lite` and `.is-invalid-lite` classes.
```html
<input type="text" class="form-control is-valid is-valid-lite" placeholder="Valid State..." />
```
Look how it works in the example below:
{% capture html -%}
<input type="text" class="form-control is-valid is-valid-lite" placeholder="Valid State..." />
<input type="text" class="form-control is-invalid is-invalid-lite" placeholder="Invalid State..." />