Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2025-12-21 17:34:25 +04:00
Code Issues Projects Releases Wiki Activity

form layouts

Browse Source
This commit is contained in:
codecalm
2020-02-23 18:40:53 +01:00
parent c3a82d0d16
commit f81a1c6c47
5 changed files with 89 additions and 198 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
pages/_includes/cards/form/layout.html Normal file
View File

@@ -0,0 +1,59 @@
{% assign horizontal = include.horizontal | default: false %}
<div class="card">
<div class="card-header">
<h3 class="card-title">{{ include.title | default: 'Basic form' }}</h3>
</div>
<div class="card-body">
<form>
<div class="form-group mb-3 {% if horizontal %}row{% endif %}">
<label class="form-label{% if horizontal %} col-3 col-form-label{% endif %}">Email address</label>
<div {% if horizontal %}class="col"{% endif %}>
<input type="email" class="form-control" aria-describedby="emailHelp" placeholder="Enter email">
<small class="form-hint">We'll never share your email with anyone else.</small>
</div>
</div>
<div class="form-group mb-3 {% if horizontal %}row{% endif %}">
<label class="form-label{% if horizontal %} col-3 col-form-label{% endif %}">Password</label>
<div {% if horizontal %}class="col"{% endif %}>
<input type="password" class="form-control" placeholder="Password">
<small class="form-hint">
Your password must be 8-20 characters long, contain letters and numbers, and must not contain
spaces, special characters, or emoji.
</small>
</div>
</div>
<div class="form-group mb-3 {% if horizontal %}row{% endif %}">
<label class="form-label{% if horizontal %} col-3 col-form-label{% endif %}">Select</label>
<div {% if horizontal %}class="col"{% endif %}>
<select class="form-select">
<option>Option 1</option>
</select>
</div>
</div>
<div class="form-group {% if horizontal %}row{% else %}mb-3{% endif %}">
<label class="form-label{% if horizontal %} col-3 col-form-label pt-0{% endif %}">Checkboxes</label>
<div {% if horizontal %}class="col"{% endif %}>
<label class="form-check">
<input class="form-check-input" type="checkbox" checked="">
<span class="form-check-label">Option 1</span>
</label>
<label class="form-check">
<input class="form-check-input" type="checkbox">
<span class="form-check-label">Option 2</span>
</label>
<label class="form-check">
<input class="form-check-input" type="checkbox" disabled="">
<span class="form-check-label">Option 3</span>
</label>
</div>
</div>
<div class="form-footer">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
</div>
</div>

12
pages/_includes/parts/form/select.html
View File

@@ -1,9 +1,9 @@
{% assign options = include.options | default: "One,Two,Three" | split: "," %} {% assign options = include.options | default: "One,Two,Three" | split: "," %}
<div class="mb-3"> <div class="mb-3">
<div class="form-label">{{ include.label | default: 'Select' }}</div> <div class="form-label">{{ include.label | default: 'Select' }}</div>
<select class="form-select"{% if include.multiple %} multiple{% endif %}> <select class="form-select" {% if include.multiple %} multiple{% endif %}>
{% for option in options %} {% for option in options %}
<option value="{{ forloop.index }}">{{ option }}</option> <option value="{{ forloop.index }}">{{ option }}</option>
{% endfor %} {% endfor %}
</select> </select>
</div> </div>

8
pages/form-elements.html
View File

@@ -40,4 +40,12 @@ menu: forms
</div> </div>
</form> </form>
</div> </div>
<div class="col-md-6">
{% include cards/form/layout.html %}
</div>
<div class="col-md-6">
{% include cards/form/layout.html horizontal=true title="Horizontal form" %}
</div>
</div> </div>

193
pages/tmp3.html
View File

@@ -2,200 +2,11 @@
--- ---
<div class="row"> <div class="row">
<div class="col-md-6"> <div class="col-md-6">
<div class="card"> {% include cards/form/layout.html %}
<div class="card-header"><strong>Basic form</strong></div>
<div class="card-body">
<form>
<div class="form-group mb-3"><label class="text-muted">Email
address</label><input type="email" class="form-control" aria-describedby="emailHelp"
placeholder="Enter email"> <small class="form-text text-muted">We'll never share
your email with anyone else.</small></div>
<div class="form-group mb-3"><label class="text-muted">Password</label><input type="password"
class="form-control" placeholder="Password"> <small class="d-block form-text text-muted"
style="line-height: 1.42;">
Your password must be 8-20 characters long,contain letters and numbers, and must not contain
spaces, special characters, or emoji.</small>
</div>
<div class="form-group mb-3">
<div class="form-check"><input type="checkbox" class="form-check-input"><label
class="form-check-label">Check me out</label></div>
</div><button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<div class="card"> {% include cards/form/layout.html horizontal=true title="Horizontal form" %}
<div class="card-header"><strong>Horizontal form</strong></div>
<div class="card-body">
<form>
<div class="form-group row mb-3"><label class="col-sm-3 col-form-label text-muted">Email</label>
<div class="col-sm-9"><input type="email" class="form-control" placeholder="Email">
</div>
</div>
<div class="form-group row mb-3"><label class="col-sm-3 col-form-label text-muted">Password</label>
<div class="col-sm-9"><input type="password" class="form-control" placeholder="Password"></div>
</div>
<div class="form-group row mb-3"><label class="col-sm-3 col-form-label text-muted">Select</label>
<div class="col-sm-9"><select class="form-control">
<option>Choose...</option>
</select></div>
</div>
<div class="form-group mb-3">
<div class="row">
<div class="col-sm-3 col-form-label pt-0 text-muted">Radios</div>
<div class="col-sm-9">
<div class="form-check">
<input class="form-check-input" type="radio" name="radios" value="option1" checked>
Option one is this and that
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="radios" value="option2"> Option two can be
something else
</div>
</div>
</div>
</div>
<div class="form-group row mb-3">
<div class="col-sm-3 col-form-label pt-0 text-muted">Checkbox</div>
<div class="col-sm-9">
<div class="form-check"><label class="form-check-label"><input class="form-check-input"
type="checkbox"> Check me out</label></div>
</div>
</div><button type="submit" class="btn btn-primary mt-1">Submit</button>
</form>
</div>
</div>
</div> </div>
<div class="col-lg-12">
<div class="card">
<div class="card-header"><strong>Column sizing</strong></div>
<div class="card-body">
<div class="row row-sm">
<div class="col-3"><input type="text" class="form-control" placeholder=".col-3"></div>
<div class="col-4"><input type="text" class="form-control" placeholder=".col-4"></div>
<div class="col-5"><input type="text" class="form-control" placeholder=".col-5"></div>
</div>
</div>
</div>
<div class="card">
<div class="card-header"><strong>Inline form</strong></div>
<div class="card-body">
<form class="form-inline" role="form"><label class="sr-only">Name</label><input type="text"
class="form-control mb-2 mr-sm-2" placeholder="Jane Doe"><label class="sr-only">Username</label>
<div class="input-group mb-2 mr-sm-2">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">@</span>
</div>
<input type="text" class="form-control" placeholder="username" value="">
</div>
</div>
<div class="form-check mb-2 mr-sm-2"><input class="form-check-input" type="checkbox"><label
class="form-check-label">Remember me</label>
</div><button type="submit" class="btn btn-primary mb-2">Sign in</button>
</form>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card">
<div class="card-header"><strong>Billing form</strong></div>
<div class="card-body">
<form>
<div class="form-row mb-3">
<div class="form-group col-md-6"><label class="text-muted">First Name</label><input type="text"
class="form-control" placeholder="First name"></div>
<div class="form-group col-md-6"><label class="text-muted">Last Name</label><input type="text"
class="form-control" placeholder="Last name"></div>
</div>
<div class="form-row mb-3">
<div class="form-group col-md-6"><label class="text-muted">Email</label><input type="email"
class="form-control" placeholder="Email"></div>
<div class="form-group col-md-6"><label class="text-muted">Password <small>(Register
account)</small></label><input type="password" class="form-control" placeholder="Password">
</div>
</div>
<div class="form-group mb-3"><label class="text-muted">Address</label><input type="text"
class="form-control" placeholder="1234 Main St"></div>
<div class="form-row mb-3">
<div class="form-group col-md-6"><label class="text-muted">City</label><input type="text"
class="form-control"></div>
<div class="form-group col-md-4"><label class="text-muted d-block">State</label>
<select class="form-control"><option selected="selected">Choose...</option><option>...</option></select>
</div>
<div class="form-group col-md-2"><label class="text-muted">Zip</label><input type="text"
class="form-control"></div>
</div><button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card">
<div class="card-header"><strong>Event form</strong></div>
<div class="card-body">
<form>
<div class="form-group row mb-3"><label class="col-sm-3 col-form-label text-muted">Title</label>
<div class="col-sm-9"><input type="text" class="form-control" placeholder="Title">
</div>
</div>
<div class="form-group row mb-3"><label class="col-sm-3 col-form-label text-muted">Event type</label>
<div class="col-sm-9">
<div class="mt-2">
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="radio2" value="Appointment">
<label class="form-check-label">Appointment</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="radio2" value="Event">
<label class="form-check-label">Event</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="radio2" value="Important">
<label class="form-check-label">Important</label>
</div>
</div>
</div>
</div>
<div class="form-group row"><label class="col-sm-3 col-form-label text-muted">Start</label>
<div class="col-sm-4 mb-3"><input type="text" class="form-control" placeholder="Date"></div>
<div class="col-sm-4 mb-3"><input type="text" class="form-control" placeholder="Time"></div>
</div>
<div class="form-group row"><label class="col-sm-3 col-form-label text-muted">End</label>
<div class="col-sm-4 mb-3"><input type="text" class="form-control" placeholder="Date">
</div>
<div class="col-sm-4 mb-3"><input type="text" class="form-control" placeholder="Time">
</div>
</div>
<div class="form-group row mb-3"><label class="col-sm-3 col-form-label text-muted">Participate</label>
<div class="col-sm-9">
<div class="d-flex">
<div class="avatar-list avatar-list-stacked">
{% for person in site.data.people limit: 5 offset: 30 %}
{% include ui/avatar.html person=person element="a" %}
{% endfor %}
</div>
<a href="#"
class="btn btn-pill btn-icon btn-primary ml-3">{% include ui/icon.html icon="plus" %}</a>
</div>
</div>
</div>
<div class="form-group row mb-3"><label class="col-sm-3 col-form-label text-muted">Description</label>
<div class="col-sm-9"><textarea class="form-control" rows="6"></textarea></div>
</div>
<div class="form-group row"><label class="col-sm-3"></label>
<div class="col-sm-9"><button type="button" class="btn btn-primary btn-pill">Save</button></div>
</div>
</form>
</div>
</div>
</div>
</div> </div>

15
scss/ui/_forms.scss
View File

@@ -26,14 +26,27 @@ Form label
Form hint Form hint
*/ */
.form-hint { .form-hint {
display: block;
font-size: $small-font-size; font-size: $small-font-size;
color: $text-muted; color: $text-muted;
margin: 0 0 .75rem;
line-height: $line-height-sm; line-height: $line-height-sm;
&:last-child {
margin-bottom: 0;
}
& + .form-control {
margin-top: .25rem;
}
.form-label + & { .form-label + & {
margin-top: -.5rem; margin-top: -.5rem;
} }
.form-control + &,
.form-select + & {
margin-top: .25rem;
}
} }
/** /**