Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2025-12-26 11:16:12 +04:00
Code Issues Projects Releases Wiki Activity

form elements

Browse Source
This commit is contained in:
codecalm
2020-01-25 00:21:00 +01:00
parent 32a9afe671
commit 3e43568f73
7 changed files with 66 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
pages/_includes/forms/form-elements-1.html
View File

@@ -31,12 +31,21 @@
<div class="mb-3">
<label class="form-label">Input group</label>
<div class="input-group">
<div class="input-group mb-2">
<input type="text" class="form-control" placeholder="Search for…">
<span class="input-group-append">
<button class="btn btn-secondary" type="button">Go!</button>
</span>
</div>
<div class="input-group">
<div class="input-group-prepend">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action
</button>
{% include ui/dropdown-menu.html %}
</div>
<input type="text" class="form-control" aria-label="Text input with dropdown button">
</div>
</div>
<div class="mb-3">
<label class="form-label">Input group buttons</label>

14
pages/_includes/forms/form-elements-2.html
View File

@@ -26,23 +26,9 @@
{% include ui/form/input-group.html prepend="$" append=".00" %}
</div>
<div class="mb-3">
<label class="form-label">Button input</label>
<div class="input-group">
<div class="input-group-prepend">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action
</button>
{% include ui/dropdown-menu.html %}
</div>
<input type="text" class="form-control" aria-label="Text input with dropdown button">
</div>
</div>
<div class="mb-3">
<label class="form-label">Tags</label>
{% include ui/form/selectize.html key="tags" %}
</div>
<div class="mb-3">

4
pages/_includes/forms/form-elements-3.html
View File

@@ -4,13 +4,13 @@
<div class="mb-3">
<label class="form-label">Validation States</label>
<input type="text" class="form-control is-valid mb-3" placeholder="Valid State..">
<input type="text" class="form-control is-valid mb-2" placeholder="Valid State..">
<input type="text" class="form-control is-invalid" placeholder="Invalid State..">
<div class="invalid-feedback">Invalid feedback</div>
</div>
<div class="mb-3">
<label class="form-label">Subtle validation States</label>
<input type="text" class="form-control is-valid is-valid-lite mb-3" placeholder="Valid State..">
<input type="text" class="form-control is-valid is-valid-lite mb-2" placeholder="Valid State..">
<input type="text" class="form-control is-invalid is-invalid-lite" placeholder="Invalid State..">
</div>

15
pages/_includes/forms/form-elements-6.html
View File

@@ -1,8 +1,17 @@
{% include parts/input-datalist.html %}
{% include parts/input-sizes.html %}
{% include parts/input-range.html %}
<div class="mb-3">
<label class="form-label">Progress</label>
{% include ui/progress.html %}
<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="btn-list">
{% include ui/button.html color="secondary" block=true icon="brand/github" icon-color="github" text="Login with Github" %}
{% include ui/button.html color="secondary" block=true icon="brand/twitter" icon-color="twitter" text="Login with Twitter" %}
</div>
</div>

2
pages/_includes/ui/progress.html
View File

@@ -2,7 +2,7 @@
{% assign colors = include.colors | default: 'blue,red,green,yellow,dark' | split: ',' %}
<div class="progress{% if include['size'] %} progress-{{ include['size'] }}{% endif %}{% if include.class %} {{ include.class }}{% endif %}">
{% if include.indeterminate %}
<div class="progress-bar progress-bar-indeterminate"></div>
<div class="progress-bar progress-bar-indeterminate{% if include.color %} bg-{{ include.color }}{% endif %}"></div>
{% elsif include.values %}
{% assign values = include.values | split: ',' %}
{% for value in values %}

71
pages/form-elements.html
View File

@@ -5,40 +5,39 @@ menu: forms
---
<div class="row">
<div class="col-12">
<form action="https://httpbin.org/post" method="post" class="card">
<div class="card-header">
<h4 class="card-title">Form elements</h4>
</div>
<div class="card-body">
<div class="row">
<div class="col-xl-4">
<div class="row">
<div class="col-md-6 col-xl-12">{% include forms/form-elements-1.html %}</div>
<div class="col-md-6 col-xl-12">{% include forms/form-elements-2.html %}</div>
</div>
</div>
<div class="col-xl-4">
<div class="row">
<div class="col-md-6 col-xl-12">{% include forms/form-elements-3.html %}</div>
<div class="col-md-6 col-xl-12">{% include forms/form-elements-4.html %}</div>
</div>
</div>
<div class="col-xl-4">
<div class="row">
<div class="col-md-6 col-xl-12">{% include forms/form-elements-5.html %}</div>
<div class="col-md-6 col-xl-12">{% include forms/form-elements-6.html %}</div>
</div>
</div>
</div>
</div>
<div class="card-footer text-right">
<div class="d-flex">
<a href="#" class="btn btn-link">Cancel</a>
<button type="submit" class="btn btn-primary ml-auto">Send data</button>
</div>
</div>
</form>
</div>
<div class="col-12">
<form action="https://httpbin.org/post" method="post" class="card">
<div class="card-header">
<h4 class="card-title">Form elements</h4>
</div>
<div class="card-body">
<div class="row">
<div class="col-xl-4">
<div class="row">
<div class="col-md-6 col-xl-12">{% include forms/form-elements-1.html %}</div>
<div class="col-md-6 col-xl-12">{% include forms/form-elements-2.html %}</div>
</div>
</div>
<div class="col-xl-4">
<div class="row">
<div class="col-md-6 col-xl-12">{% include forms/form-elements-3.html %}</div>
<div class="col-md-6 col-xl-12">{% include forms/form-elements-4.html %}</div>
</div>
</div>
<div class="col-xl-4">
<div class="row">
<div class="col-md-6 col-xl-12">{% include forms/form-elements-5.html %}</div>
<div class="col-md-6 col-xl-12">{% include forms/form-elements-6.html %}</div>
</div>
</div>
</div>
</div>
<div class="card-footer text-right">
<div class="d-flex">
<a href="#" class="btn btn-link">Cancel</a>
<button type="submit" class="btn btn-primary ml-auto">Send data</button>
</div>
</div>
</form>
</div>
</div>

8
scss/ui/_buttons.scss
View File

@@ -97,8 +97,12 @@
> .btn,
> .dropdown {
margin-bottom: .5rem;
margin-right: .5rem;
margin: 0 .5rem .5rem 0;
}
>.btn-block {
flex: 1;
white-space: nowrap;
}
}