1
0
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:
codecalm
2019-12-15 22:30:21 +01:00
parent 03ada7326c
commit 7079cf4711
16 changed files with 53 additions and 102 deletions
+3 -3
View File
@@ -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 %}
+4 -4
View File
@@ -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 %}
+1 -1
View File
@@ -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 %}
+5 -5
View File
@@ -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 %}