mirror of
https://github.com/tabler/tabler.git
synced 2026-07-29 14:34:37 +04:00
form inputs refactoring
This commit is contained in:
@@ -290,13 +290,13 @@ Use the `.text-center` or the `.text-right` modifiers to alter the alignment.
|
||||
|
||||
{% example html wrapper=btn-list %}
|
||||
<a href="#" class="btn btn-secondary">
|
||||
{% include ui/avatar.html person-id="4" class="btn-avatar" %} Avatar
|
||||
{% include_cached ui/avatar.html person-id="4" %} Avatar
|
||||
</a>
|
||||
<a href="#" class="btn btn-secondary">
|
||||
{% include ui/avatar.html person-id="5" class="btn-avatar" %} Avatar
|
||||
{% include_cached ui/avatar.html person-id="5" %} Avatar
|
||||
</a>
|
||||
<a href="#" class="btn btn-secondary">
|
||||
{% include ui/avatar.html person-id="6" class="btn-avatar" %} Avatar
|
||||
{% include_cached ui/avatar.html person-id="6" %} Avatar
|
||||
</a>
|
||||
{% endexample %}
|
||||
|
||||
|
||||
@@ -174,22 +174,22 @@ bootstrap-link: components/forms/
|
||||
{% example %}
|
||||
<div class="mb-2">
|
||||
<label class="form-label">Username</label>
|
||||
{% include ui/input-group.html prepend="@" placeholder="username" %}
|
||||
{% include ui/form/input-group.html prepend="@" placeholder="username" %}
|
||||
</div>
|
||||
|
||||
<div class="mb-2">
|
||||
<label class="form-label">Subdomain</label>
|
||||
{% include ui/input-group.html append=".tabler.io" placeholder="subdomain" %}
|
||||
{% include ui/form/input-group.html append=".tabler.io" placeholder="subdomain" %}
|
||||
</div>
|
||||
|
||||
<div class="mb-2">
|
||||
<label class="form-label">Your vanity URL</label>
|
||||
{% include ui/input-group.html prepend="https://example.com/users/" %}
|
||||
{% include ui/form/input-group.html prepend="https://example.com/users/" %}
|
||||
</div>
|
||||
|
||||
<div class="mb-2">
|
||||
<label class="form-label">Price</label>
|
||||
{% include ui/input-group.html prepend="$" append=".00" %}
|
||||
{% include ui/form/input-group.html prepend="$" append=".00" %}
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
|
||||
@@ -4,5 +4,5 @@ title: Input mask
|
||||
|
||||
{% example %}
|
||||
<label class="form-label">Telephone mask</label>
|
||||
{% include ui/input-mask.html mask="(00) 0000-0000" placeholder="(00) 0000-0000" visible=true %}
|
||||
{% include ui/form/input-mask.html mask="(00) 0000-0000" placeholder="(00) 0000-0000" visible=true %}
|
||||
{% endexample %}
|
||||
|
||||
@@ -7,7 +7,7 @@ done: true
|
||||
### Default markup
|
||||
|
||||
{% example html columns=1 %}
|
||||
{% include cards/ribbon.html %}
|
||||
{% include_cached cards/ribbon.html %}
|
||||
{% endexample %}
|
||||
|
||||
### Ribbon position
|
||||
@@ -22,7 +22,7 @@ You can easily change the position of a ribbon by adding a class to the element.
|
||||
You can also use multiple classes at once for example: `.ribbon.ribbon-top.ribbon-left` moves the ribbon to the top left corner.
|
||||
|
||||
{% example html columns=1 %}
|
||||
{% include cards/ribbon.html top=true left=true %}
|
||||
{% include_cached cards/ribbon.html top=true left=true %}
|
||||
{% endexample %}
|
||||
|
||||
### Ribbon color
|
||||
@@ -30,7 +30,7 @@ You can also use multiple classes at once for example: `.ribbon.ribbon-top.ribbo
|
||||
Customize the ribbon's background color. You can click [here]({% docs_url colors %}) to see the list of available colors.
|
||||
|
||||
{% example html columns=1 %}
|
||||
{% include cards/ribbon.html color="red" %}
|
||||
{% include_cached cards/ribbon.html color="red" %}
|
||||
{% endexample %}
|
||||
|
||||
### Ribbon text
|
||||
@@ -38,7 +38,7 @@ Customize the ribbon's background color. You can click [here]({% docs_url colors
|
||||
Set your own text in a ribbon.
|
||||
|
||||
{% example html columns=1 %}
|
||||
{% include cards/ribbon.html color="green" text="-50%" %}
|
||||
{% include_cached cards/ribbon.html color="green" text="-50%" %}
|
||||
{% endexample %}
|
||||
|
||||
### Ribbon style
|
||||
@@ -46,5 +46,5 @@ Set your own text in a ribbon.
|
||||
Change the style of a ribbon.
|
||||
|
||||
{% example html columns=1 %}
|
||||
{% include cards/ribbon.html bookmark=true color="orange" text="-50%" %}
|
||||
{% include_cached cards/ribbon.html bookmark=true color="orange" text="-50%" %}
|
||||
{% endexample %}
|
||||
|
||||
Reference in New Issue
Block a user