1
0
mirror of https://github.com/tabler/tabler.git synced 2025-12-21 09:24:24 +04:00
Files
tabler/pages/_includes/forms/form-elements-2.html
2020-03-28 15:46:18 +01:00

44 lines
1.9 KiB
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..">
{% include ui/form/input-icon.html input-class="form-control-rounded" %}
</div>
<div class="mb-3">
<label class="form-label">Form control flush</label>
<input type="text" class="form-control form-control-flush" name="Form control flush" placeholder="Text..">
</div>
<div class="mb-3">
<label class="form-label">Input group</label>
{% include ui/form/input-group.html prepend="@" placeholder="username" class="mb-2" %}
{% include ui/form/input-group.html append=".tabler.io" placeholder="subdomain" class="mb-2" %}
{% include ui/form/input-group.html prepend="https://" append=".tabler.io" placeholder="subdomain" %}
</div>
<div class="mb-3">
<label class="form-label">Input with checkbox or radios</label>
{% include ui/form/input-group.html prepend="checkbox" class="mb-2" %}
{% include ui/form/input-group.html append="radio" %}
</div>
<div class="mb-3">
<label class="form-label">Input with prepended text</label>
{% include ui/form/input-group.html prepend="https://tabler.io/users/" flat=true input-class="pl-0" value="yourfancyusername" %}
</div>
<div class="mb-3">
<label class="form-label">Input with appended text</label>
{% include ui/form/input-group.html append=".tabler.io" input-class="text-right pr-0" flat=true value="yourfancydomain" %}
</div>
<div class="mb-3">
<label class="form-label">Input with appended link</label>
{% include ui/form/input-group.html append-link="Show password" flat=true type="password" value="ultrastrongpassword" %}
</div>
<div class="mb-3">
<label class="form-label">Input with appended icon links</label>
{% include ui/form/input-group.html append-button="x:Clear search,adjustments:Search settings,bell:Add notification" flat=true %}
</div>