base tabler

This commit is contained in:
JACS 2026-05-01 12:46:11 -05:00
parent ac2cfa9fe1
commit 0f84beacf1
1432 changed files with 28760 additions and 1 deletions

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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 %}

View 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>

View 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>

View 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>

View 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>