mirror of
https://github.com/tabler/tabler.git
synced 2025-12-22 01:44:25 +04:00
69 lines
2.1 KiB
HTML
69 lines
2.1 KiB
HTML
{% include "parts/form/input-datalist.html" %}
|
|
{% include "parts/form/input-range.html" %}
|
|
|
|
<div class="mb-3">
|
|
<label class="form-label">Datepicker</label>
|
|
{% include "ui/datepicker.html" id="default" class="mb-2" %}
|
|
{% include "ui/datepicker.html" id="icon" layout="icon" class="mb-2" %}
|
|
{% include "ui/datepicker.html" id="icon-prepend" layout="icon-prepend" %}
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label class="form-label">Inline datepicker</label>
|
|
{% include "ui/datepicker.html" id="inline" inline=true %}
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label class="form-label">Progress</label>
|
|
{% include "ui/progress.html" class="mb-2" %}
|
|
{% include "ui/progress.html" indeterminate=true color="green" %}
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label class="form-label">Form buttons</label>
|
|
<div class="row">
|
|
<div class="col">
|
|
{% include "ui/button.html" block=true icon="brand-github" icon-color="github" text="Login with Github" %}
|
|
</div>
|
|
<div class="col">
|
|
{% include "ui/button.html" block=true icon="brand-x" icon-color="x" text="Login with X" %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label class="form-label">Tags input</label>
|
|
{% include "ui/select.html" key="tags" placeholder="Select tags" %}
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label class="form-label">Advanced select</label>
|
|
{% include "ui/select.html" key="users" %}
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label class="form-label">Advanced select with optgroup</label>
|
|
{% include "ui/select.html" key="optgroups" %}
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label class="form-label">Select with avatars</label>
|
|
{% include "ui/select.html" key="people" indicator="avatar" %}
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label class="form-label">Select with flags</label>
|
|
{% include "ui/select.html" key="countries" indicator="flag" %}
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label class="form-label">Select with labels</label>
|
|
{% include "ui/select.html" key="labels" indicator="label" %}
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label class="form-label">Advanced select with validation state</label>
|
|
{% include "ui/select.html" id="countries-valid" key="countries" state="valid" class="mb-3" %}
|
|
{% include "ui/select.html" id="countries-invalid" key="countries" state="invalid" %}
|
|
</div>
|