mirror of
https://github.com/tabler/tabler.git
synced 2025-12-21 17:34:25 +04:00
form layouts
This commit is contained in:
codecalm
59
pages/_includes/cards/form/layout.html
Normal file
59
pages/_includes/cards/form/layout.html
Normal 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>
|
||||
@@ -1,9 +1,9 @@
|
||||
{% assign options = include.options | default: "One,Two,Three" | split: "," %}
|
||||
<div class="mb-3">
|
||||
<div class="form-label">{{ include.label | default: 'Select' }}</div>
|
||||
<select class="form-select"{% if include.multiple %} multiple{% endif %}>
|
||||
{% for option in options %}
|
||||
<option value="{{ forloop.index }}">{{ option }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
<div class="form-label">{{ include.label | default: 'Select' }}</div>
|
||||
<select class="form-select" {% if include.multiple %} multiple{% endif %}>
|
||||
{% for option in options %}
|
||||
<option value="{{ forloop.index }}">{{ option }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
@@ -40,4 +40,12 @@ menu: forms
|
||||
</div>
|
||||
</form>
|
||||
</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>
|
||||
|
||||
193
pages/tmp3.html
193
pages/tmp3.html
@@ -2,200 +2,11 @@
|
||||
---
|
||||
|
||||
<div class="row">
|
||||
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<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>
|
||||
{% include cards/form/layout.html %}
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<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>
|
||||
{% include cards/form/layout.html horizontal=true title="Horizontal form" %}
|
||||
</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>
|
||||
@@ -26,14 +26,27 @@ Form label
|
||||
Form hint
|
||||
*/
|
||||
.form-hint {
|
||||
display: block;
|
||||
font-size: $small-font-size;
|
||||
color: $text-muted;
|
||||
margin: 0 0 .75rem;
|
||||
line-height: $line-height-sm;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
& + .form-control {
|
||||
margin-top: .25rem;
|
||||
}
|
||||
|
||||
.form-label + & {
|
||||
margin-top: -.5rem;
|
||||
}
|
||||
|
||||
.form-control + &,
|
||||
.form-select + & {
|
||||
margin-top: .25rem;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
Reference in New Issue
Block a user