base tabler
This commit is contained in:
parent
ac2cfa9fe1
commit
0f84beacf1
1432 changed files with 28760 additions and 1 deletions
17
liquid/includes/parts/form/checkboxes-list.html
Normal file
17
liquid/includes/parts/form/checkboxes-list.html
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
{% assign items = include.items | default: "Push Notifications:1,SMS Notifications,Email Notifications:1" | split: ',' %}
|
||||
|
||||
<div class="divide-y{% if include.class %} {{ include.class }}{% endif %}">
|
||||
{% for item in items %}
|
||||
{% assign item-options = item | split: ':' %}
|
||||
<div>
|
||||
<label class="row">
|
||||
<span class="col">{{ item-options[0] }}</span>
|
||||
<span class="col-auto">
|
||||
<label class="form-check form-check-single form-switch">
|
||||
<input class="form-check-input" type="checkbox"{% if item-options[1] == '1' %} checked{% endif %}>
|
||||
</label>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
22
liquid/includes/parts/form/fieldset.html
Normal file
22
liquid/includes/parts/form/fieldset.html
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
<fieldset class="form-fieldset">
|
||||
<div class="mb-3">
|
||||
<label class="form-label required">Full name</label>
|
||||
<input type="text" class="form-control" autocomplete="off"/>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label required">Company</label>
|
||||
<input type="text" class="form-control" autocomplete="off"/>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label required">Email</label>
|
||||
<input type="email" class="form-control" autocomplete="off"/>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Phone number</label>
|
||||
<input type="tel" class="form-control" autocomplete="off"/>
|
||||
</div>
|
||||
<label class="form-check">
|
||||
<input type="checkbox" class="form-check-input"/>
|
||||
<span class="form-check-label required">I agree to the Terms & Conditions</span>
|
||||
</label>
|
||||
</fieldset>
|
||||
8
liquid/includes/parts/form/input-checkboxes-inline.html
Normal file
8
liquid/includes/parts/form/input-checkboxes-inline.html
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
<div class="mb-3">
|
||||
<div class="form-label">Inline Checkboxes</div>
|
||||
<div>
|
||||
{% include "ui/form/check.html" inline=true title="Option 1" type="checkbox" %}
|
||||
{% include "ui/form/check.html" inline=true title="Option 2" type="checkbox" disabled=true %}
|
||||
{% include "ui/form/check.html" inline=true title="Option 3" type="checkbox" checked=true %}
|
||||
</div>
|
||||
</div>
|
||||
8
liquid/includes/parts/form/input-checkboxes.html
Normal file
8
liquid/includes/parts/form/input-checkboxes.html
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
<div class="mb-3">
|
||||
<div class="form-label">Checkboxes</div>
|
||||
<div>
|
||||
{% include "ui/form/check.html" type="checkbox" %}
|
||||
{% include "ui/form/check.html" type="checkbox" disabled=true %}
|
||||
{% include "ui/form/check.html" type="checkbox" checked=true %}
|
||||
</div>
|
||||
</div>
|
||||
22
liquid/includes/parts/form/input-color.html
Normal file
22
liquid/includes/parts/form/input-color.html
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
{% assign colors = '' | split: ',' %}
|
||||
{% unless include.hide-black-white %}
|
||||
{% assign colors = 'dark,white' | split: ',' %}
|
||||
{% endunless %}
|
||||
|
||||
{% for color in site.colors limit: 10 %}
|
||||
{% assign colors = colors | push: color[0] %}
|
||||
{% endfor %}
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">{{ include.label | default: 'Color Input' }}</label>
|
||||
<div class="row g-2">
|
||||
{% for color in colors -%}
|
||||
<div class="col-auto">
|
||||
<label class="form-colorinput{% if color == 'white' %} form-colorinput-light{% endif %}">
|
||||
<input name="{{ include.name | default: 'color' }}" type="{{ include.type | default: 'radio' }}" value="{{ color }}" class="form-colorinput-input" {% if forloop.index == 2 %} checked{% endif %}/>
|
||||
<span class="form-colorinput-color bg-{{ color }}{% if include.rounded %} rounded-circle{% endif %}"></span>
|
||||
</label>
|
||||
</div>
|
||||
{%- endfor %}
|
||||
</div>
|
||||
</div>
|
||||
4
liquid/includes/parts/form/input-colorpicker.html
Normal file
4
liquid/includes/parts/form/input-colorpicker.html
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
<div class="mb-3">
|
||||
<label class="form-label">{{ include.label | default: 'Color picker' }}</label>
|
||||
<input type="color" class="form-control form-control-color" value="{{ include.color | default: site.colors.blue.hex }}" title="Choose your color">
|
||||
</div>
|
||||
8
liquid/includes/parts/form/input-datalist.html
Normal file
8
liquid/includes/parts/form/input-datalist.html
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
<div class="mb-3">
|
||||
<label class="form-label">Datalist example</label>
|
||||
<input class="form-control" list="datalistOptions" placeholder="Type to search..."/>
|
||||
<datalist id="datalistOptions">
|
||||
{% for country in flags limit: 10 %}
|
||||
<option value="{{ country.name | escape }}"/>{% endfor %}
|
||||
</datalist>
|
||||
</div>
|
||||
4
liquid/includes/parts/form/input-file.html
Normal file
4
liquid/includes/parts/form/input-file.html
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
<div class="mb-3">
|
||||
<div class="form-label">{{ include.label | default: 'Custom File Input' }}</div>
|
||||
{% include "ui/form/input-file.html" %}
|
||||
</div>
|
||||
11
liquid/includes/parts/form/input-icon-separated.html
Normal file
11
liquid/includes/parts/form/input-icon-separated.html
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
<div class="mb-3">
|
||||
<label class="form-label">Separated inputs</label>
|
||||
<div class="row g-2">
|
||||
<div class="col">
|
||||
<input type="text" class="form-control" placeholder="Search for…">
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
{% include "ui/button.html" icon="search" icon-only=true %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
11
liquid/includes/parts/form/input-icon.html
Normal file
11
liquid/includes/parts/form/input-icon.html
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
<div class="mb-3">
|
||||
<label class="form-label">Icon input</label>
|
||||
{% include "ui/form/input-icon.html" class="mb-3" %}
|
||||
{% include "ui/form/input-icon.html" class="mb-3" icon="user" prepend=true placeholder="Username" %}
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Loader input</label>
|
||||
{% include "ui/form/input-icon.html" loader=true class="mb-3" placeholder="Loading…" %}
|
||||
{% include "ui/form/input-icon.html" loader=true class="mb-3" icon="user" prepend=true placeholder="Loading…" %}
|
||||
</div>
|
||||
20
liquid/includes/parts/form/input-image-people.html
Normal file
20
liquid/includes/parts/form/input-image-people.html
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
{% assign limit = include.limit | default: 9 %}
|
||||
{% assign offset = include.offset | default: 8 %}
|
||||
{% assign avatar-size = include.avatar-size | default: "md" %}
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Person Check</label>
|
||||
<div class="row g-2">
|
||||
{% for person in people limit: limit offset: offset %}
|
||||
<div class="col-auto">
|
||||
<label class="form-imagecheck mb-2">
|
||||
<input name="form-imagecheck" type="checkbox" value="{{ forloop.index }}" class="form-imagecheck-input" {% if forloop.index == 2 or forloop.index == 4 or forloop.index == 7 %} checked{% endif %}/>
|
||||
<span class="form-imagecheck-figure">
|
||||
<span class="form-imagecheck-image">
|
||||
{% include "ui/avatar.html" size=avatar-size person=person %}
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
20
liquid/includes/parts/form/input-image-radio.html
Normal file
20
liquid/includes/parts/form/input-image-radio.html
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
{% assign limit = include.limit | default: 6 %}
|
||||
{% assign offset = include.offset | default: 0 %}
|
||||
|
||||
{% assign filtered-photos = photos | where: 'horizontal', true %}
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Image Check Radio</label>
|
||||
<div class="row g-2">
|
||||
{% for photo in filtered-photos limit: limit offset: offset%}
|
||||
<div class="{{ include.row-class | default: 'col-6 col-sm-4' }}">
|
||||
<label class="form-imagecheck mb-2">
|
||||
<input name="form-imagecheck-radio" type="radio" value="{{ forloop.index }}" class="form-imagecheck-input" {% if forloop.index == 2 or forloop.index == 4 or forloop.index == 7 %} checked{% endif %}/>
|
||||
<span class="form-imagecheck-figure">
|
||||
<img src="{{ page | relative }}/static/photos/{{ photo.file }}" alt="{{ photo.title }}" class="form-imagecheck-image">
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
19
liquid/includes/parts/form/input-image.html
Normal file
19
liquid/includes/parts/form/input-image.html
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
{% assign limit = include.limit | default: 6 %}
|
||||
{% assign offset = include.offset | default: 0 %}
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Image Check</label>
|
||||
<div class="row g-2">
|
||||
{% assign filtered-photos = photos | where: 'horizontal', true %}
|
||||
|
||||
{% for photo in filtered-photos limit: limit offset: offset %}
|
||||
<div class="{{ include.row-class | default: 'col-6 col-sm-4' }}">
|
||||
<label class="form-imagecheck mb-2">
|
||||
<input name="form-imagecheck" type="checkbox" value="{{ forloop.index }}" class="form-imagecheck-input" {% if forloop.index == 2 or forloop.index == 4 or forloop.index == 7 %} checked{% endif %}/>
|
||||
<span class="form-imagecheck-figure">
|
||||
<img src="{{ page | relative }}/static/photos/{{ photo.file }}" alt="{{ photo.title }}" class="form-imagecheck-image">
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
8
liquid/includes/parts/form/input-radios-inline.html
Normal file
8
liquid/includes/parts/form/input-radios-inline.html
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
<div class="mb-3">
|
||||
<div class="form-label">Inline Radios</div>
|
||||
<div>
|
||||
{% include "ui/form/check.html" title="Option 1" type="radio" name="radios-inline" inline=true checked=true %}
|
||||
{% include "ui/form/check.html" title="Option 2" type="radio" name="radios-inline" inline=true %}
|
||||
{% include "ui/form/check.html" title="Option 3" type="radio" name="radios-inline" inline=true disabled=true %}
|
||||
</div>
|
||||
</div>
|
||||
9
liquid/includes/parts/form/input-radios.html
Normal file
9
liquid/includes/parts/form/input-radios.html
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
<div class="mb-3">
|
||||
<div class="form-label">Radios</div>
|
||||
<div>
|
||||
{% include "ui/form/check.html" title="Option 1" type="radio" name="radios" checked=true %}
|
||||
{% include "ui/form/check.html" title="Option 2" type="radio" name="radios" %}
|
||||
{% include "ui/form/check.html" title="Option 3" type="radio" disabled=true %}
|
||||
{% include "ui/form/check.html" title="Option 4" type="radio" disabled=true checked=true %}
|
||||
</div>
|
||||
</div>
|
||||
8
liquid/includes/parts/form/input-range.html
Normal file
8
liquid/includes/parts/form/input-range.html
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
<div class="mb-3">
|
||||
<label class="form-label">Range input</label>
|
||||
|
||||
{% include "ui/range.html" value=40 %}
|
||||
{% include "ui/range.html" value="20" id="simple" connect=true %}
|
||||
{% include "ui/range.html" value="60,90" id="connect" %}
|
||||
{% include "ui/range.html" value="40" id="color" class="text-green" connect=true %}
|
||||
</div>
|
||||
19
liquid/includes/parts/form/input-selectgroups.html
Normal file
19
liquid/includes/parts/form/input-selectgroups.html
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
<div class="mb-3">
|
||||
<label class="form-label">Simple selectgroup</label>
|
||||
{% include "ui/form/input-selectgroup.html" values="HTML,CSS,PHP,JavaScript" %}
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Icon input</label>
|
||||
{% include "ui/form/input-selectgroup.html" values="i:sun,i:moon,i:cloud-rain,i:cloud,Other" %}
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Selectgroup with icons and text</label>
|
||||
{% include "ui/form/input-selectgroup.html" values="i:home,i:user,i:circle,i:square" type="radio" name="icons" with-text=true %}
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Different style</label>
|
||||
{% include "ui/form/input-selectgroup.html" values="HTML,CSS,PHP,JavaScript" class="form-selectgroup-pills" %}
|
||||
</div>
|
||||
6
liquid/includes/parts/form/input-sizes.html
Normal file
6
liquid/includes/parts/form/input-sizes.html
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
<div class="mb-3">
|
||||
<label class="form-label">Input sizing</label>
|
||||
<input class="form-control form-control-lg mb-2" type="text" placeholder=".form-control-lg">
|
||||
<input class="form-control mb-2" type="text" placeholder="Default input">
|
||||
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">
|
||||
</div>
|
||||
4
liquid/includes/parts/form/input-toggle-single.html
Normal file
4
liquid/includes/parts/form/input-toggle-single.html
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
<div class="mb-3">
|
||||
<div class="form-label">Single switch</div>
|
||||
{% include "ui/form/check.html" switch=true title="I agree with terms and conditions" %}
|
||||
</div>
|
||||
6
liquid/includes/parts/form/input-toggle.html
Normal file
6
liquid/includes/parts/form/input-toggle.html
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
<div class="mb-3">
|
||||
<div class="form-label">Toggle switches</div>
|
||||
{% include "ui/form/check.html" switch=true title="Option 1" checked=true %}
|
||||
{% include "ui/form/check.html" switch=true title="Option 2" %}
|
||||
{% include "ui/form/check.html" switch=true title="Option 3" %}
|
||||
</div>
|
||||
28
liquid/includes/parts/form/input.html
Normal file
28
liquid/includes/parts/form/input.html
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
{% assign type = include.type %}
|
||||
|
||||
{% if type == 'static' %}
|
||||
<div class="mb-3">
|
||||
<label class="form-label">{{ include.label | default: 'Static' }}</label>
|
||||
<div class="form-control-plaintext">{{ include.value | default: 'Input value' }}</div>
|
||||
</div>
|
||||
|
||||
{% elsif type == 'password' %}
|
||||
<div class="mb-3">
|
||||
<label class="form-label">{{ include.label | default: 'Password' }}</label>
|
||||
<input type="text" class="form-control" name="example-password-input" placeholder="{{ include.placeholder | default: 'Input placeholder' }}">
|
||||
</div>
|
||||
|
||||
{% elsif type == 'textarea' %}
|
||||
<div class="mb-3">
|
||||
<label class="form-label">{{ include.label | default: 'Textarea' }}</label>
|
||||
<textarea class="form-control" name="example-textarea" placeholder="{{ include.placeholder | default: 'Textarea placeholder' }}">{{ include.value }}</textarea>
|
||||
</div>
|
||||
|
||||
{% else %}
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">{{ include.label | default: 'Text' }}</label>
|
||||
<input type="text" class="form-control" name="example-text-input" placeholder="{{ include.placeholder | default: 'Input placeholder' }}">
|
||||
</div>
|
||||
|
||||
{% endif %}
|
||||
9
liquid/includes/parts/form/select.html
Normal file
9
liquid/includes/parts/form/select.html
Normal file
|
|
@ -0,0 +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>
|
||||
24
liquid/includes/parts/form/selectgroup-payments.html
Normal file
24
liquid/includes/parts/form/selectgroup-payments.html
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
<div class="mb-3">
|
||||
<label class="form-label">Payment method</label>
|
||||
|
||||
{% assign items = "visa,mastercard,paypal" | split: ',' %}
|
||||
<div class="form-selectgroup form-selectgroup-boxes d-flex flex-column">
|
||||
{% for item in items %}
|
||||
<label class="form-selectgroup-item flex-fill">
|
||||
<input type="radio" name="form-payment" value="{{ item | escape }}" class="form-selectgroup-input"{% if forloop.index == 2 %} checked{% endif %}>
|
||||
<div class="form-selectgroup-label d-flex align-items-center p-3">
|
||||
<div class="me-3">
|
||||
<span class="form-selectgroup-check"></span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="payment payment-provider-{{ item }} payment-xs me-2"></span>
|
||||
|
||||
{% if forloop.index < 3 %}
|
||||
ending in <strong>{{ forloop.index | random_number: 1000, 9999 }}</strong>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
24
liquid/includes/parts/form/selectgroup-project-manager.html
Normal file
24
liquid/includes/parts/form/selectgroup-project-manager.html
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
<div class="mb-3">
|
||||
<label class="form-label">Project Manager</label>
|
||||
|
||||
<div class="form-selectgroup form-selectgroup-boxes d-flex flex-column">
|
||||
{% for person in people limit: 5 %}
|
||||
<label class="form-selectgroup-item flex-fill">
|
||||
<input type="checkbox" name="form-project-manager[]" value="{{ person.id }}" class="form-selectgroup-input" {%
|
||||
if forloop.index== 2 %} checked{% endif %}>
|
||||
<div class="form-selectgroup-label d-flex align-items-center p-3">
|
||||
<div class="me-3">
|
||||
<span class="form-selectgroup-check"></span>
|
||||
</div>
|
||||
<div class="form-selectgroup-label-content d-flex align-items-center">
|
||||
{% include "ui/avatar.html" person=person class="me-3" %}
|
||||
<div>
|
||||
<div class="fw-medium">{{ person.full_name }}</div>
|
||||
<div class="text-secondary">{{ person.job_title }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
6
liquid/includes/parts/form/validation-states.html
Normal file
6
liquid/includes/parts/form/validation-states.html
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
<div class="mb-3">
|
||||
<label class="form-label">Validation States {% if include.lite %}(lite){% endif %}</label>
|
||||
<input type="text" class="form-control is-valid{% if include.lite %} is-valid-lite{% endif %} mb-2" placeholder="Valid State..">
|
||||
<input type="text" class="form-control is-invalid{% if include.lite %} is-invalid-lite{% endif %}" placeholder="Invalid State..">
|
||||
{% unless include.lite %}<div class="invalid-feedback">Invalid feedback</div>{% endunless %}
|
||||
</div>
|
||||
Loading…
Add table
Add a link
Reference in a new issue