1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768 |
- {% 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-twitter" icon-color="twitter" text="Login with Twitter" %}
- </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>
|