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

feat: create new form layout page (#2303)

Browse Source
This commit is contained in:
Paweł Kuna
2025-05-05 19:12:13 +02:00
committed by GitHub
parent e265681a48
commit 79bd867db5
8 changed files with 3248 additions and 3726 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/silent-planes-hide.md Normal file
View File

@@ -0,0 +1,5 @@
---
"@tabler/preview": patch
---
Add new form layout page

6614
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

6
preview/pages/form-elements.html
View File

@@ -1,7 +1,7 @@
--- ---
title: Form elements title: Form elements
page-header: Form elements page-header: Form elements
page-menu: forms page-menu: form.elements
page-libs: [nouislider, autosize, tabler-flags, tabler-payments, litepicker, tom-select, imask] page-libs: [nouislider, autosize, tabler-flags, tabler-payments, litepicker, tom-select, imask]
layout: default layout: default
permalink: form-elements.html permalink: form-elements.html
@@ -84,10 +84,6 @@ permalink: form-elements.html
{% include "cards/form/layout.html" %} {% include "cards/form/layout.html" %}
</div> </div>
<div class="col-md-6">
{% include "cards/form/layout.html" horizontal=true title="Horizontal form" %}
</div>
<div class="col-lg-4"> <div class="col-lg-4">
<div class="row row-cards"> <div class="row row-cards">
<div class="col-12"> <div class="col-12">

322
preview/pages/form-layout.html Normal file
View File

@@ -0,0 +1,322 @@
---
title: Form layout
page-header: Form Layout
page-menu: form.layout
layout: default
permalink: form-layout.html
page-libs: [litepicker]
---
<div class="row row-cards row-cols-1 row-cols-md-2">
<div class="col">
<div class="row row-cards">
<div class="col-12">
<div class="card">
<div class="card-header">
<h3 class="card-title">
Basic Form
</h3>
</div>
<div class="card-body">
<form class="space-y">
<div class="row">
<div class="col-6">
<input type="text" placeholder="Name" class="form-control" />
</div>
<div class="col-6">
<input type="email" placeholder="Email address" class="form-control" />
</div>
</div>
<div>
<input type="password" placeholder="Password" class="form-control" />
</div>
<div>
<input type="password" placeholder="Confirm Password" class="form-control" />
</div>
<div>
{% include "ui/button.html" color="primary" block text="Submit" %}
</div>
</form>
</div>
</div>
</div>
<div class="col-12">
<div class="card">
<div class="card-header">
<h3 class="card-title">
Example Form
</h3>
</div>
<div class="card-body">
<form>
<div class="space-y">
<div>
<label class="form-label">
First Name
</label>
<input type="text" placeholder="Enter first name" class="form-control">
</div>
<div>
<label class="form-label">
Last Name
</label>
<input type="text" placeholder="Enter last name" class="form-control">
</div>
<div>
<label class="form-label">
Email
</label>
<input type="email" placeholder="Enter email address" class="form-control">
</div>
<div>
<label class="form-label">
Select Subject
</label>
<select class="form-select">
<option>
Option 1
</option>
<option>
Option 2
</option>
<option>
Option 3
</option>
<option>
Option 4
</option>
</select>
</div>
<div>
<label class="form-label">
Message
</label>
<textarea placeholder="Enter your message" rows="6" class="form-control"></textarea>
</div>
<div>
{% include "ui/button.html" color="primary" block text="Send Message" icon-right="arrow-right" %}
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="col">
<div class="row row-cards">
<div class="col-12">
<div class="card">
<div class="card-header">
<h3 class="card-title">
Example Form with Icons
</h3>
</div>
<div class="card-body">
<form class="space-y">
<div>
{% include "ui/form/input-icon.html" icon="user" placeholder="Username" prepend %}
</div>
<div>
{% include "ui/form/input-icon.html" icon="mail" placeholder="Email address" prepend type="mail" %}
</div>
<div>
{% include "ui/form/input-icon.html" icon="lock" placeholder="Password" prepend type="password" %}
</div>
<div>
{% include "ui/form/input-icon.html" icon="lock" placeholder="Confirm Password" prepend type="password" %}
</div>
<div>
<div class="row align-items-center">
<div class="col">
{% include "ui/form/check.html" title="Remember me" class="m-0" %}
</div>
<div class="col-auto">
{% include "ui/button.html" color="primary" text="Create Account" icon-right="arrow-right" %}
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="col-12">
{% include "cards/form/layout.html" horizontal=true title="Horizontal form" %}
</div>
<div class="col-12">
<div class="card">
<div class="card-header">
<h3 class="card-title">
Example Form
</h3>
</div>
<div class="card-body">
<form>
<div class="space-y">
<div>
<h4>
Personal Info
</h4>
</div>
<div class="row row-cols-2 g-4">
<div>
<label class="form-label">
First Name
</label>
<input type="text" placeholder="Enter first name" class="form-control">
</div>
<div>
<label class="form-label">
Last Name
</label>
<input type="text" placeholder="Enter last name" class="form-control">
</div>
<div>
<label class="form-label">
Gender
</label>
<div>
<select class="form-select">
<option>
Male
</option>
<option>
Female
</option>
<option>
Others
</option>
</select>
</div>
</div>
<div>
<label class="form-label">
Date of Birth
</label>
<div>
{% include "ui/datepicker.html" layout="icon" id="birth-date" %}
</div>
</div>
</div>
<div>
<label class="form-label">
Category
</label>
<div>
<select class="form-select">
<option>
Category 1
</option>
<option>
Category 2
</option>
<option>
Category 3
</option>
</select>
</div>
</div>
<div>
<h4>
Address
</h4>
</div>
<div>
<label class="form-label">
Street
</label>
<input type="text" class="form-control">
</div>
<div class="row row-cols-2 g-4">
<div>
<label class="form-label">
City
</label>
<input type="text" class="form-control">
</div>
<div>
<label class="form-label">
State
</label>
<input type="text" class="form-control">
</div>
<div>
<label class="form-label">
Post Code
</label>
<input type="text" class="form-control">
</div>
<div>
<label class="form-label">
Country
</label>
<div>
<select class="form-select">
<option>
--Select Country--
</option>
{% for country in flags %}
<option>
{{ country.name }}
</option>
{% endfor %}
</select>
</div>
</div>
</div>
<div>
<div>
<label class="form-label">
Membership
</label>
<div class="d-flex flex-row gap-4">
{% include "ui/form/check.html" title="Free" type="radio" name="membership" checked=true %}
{% include "ui/form/check.html" title="Paid" type="radio" name="membership" %}
</div>
</div>
</div>
<div class="text-end">
{% include "ui/button.html" text="Cancel" %}
{% include "ui/button.html" color="primary" text="Save Changes" %}
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>

17
shared/data/menu.json
View File

@@ -203,11 +203,20 @@
} }
} }
}, },
"forms": { "form": {
"url": "form-elements.html",
"title": "Forms", "title": "Forms",
"title-long": "Form elements", "icon": "checkbox",
"icon": "checkbox" "children": {
"elements": {
"url": "form-elements.html",
"title": "Form elements"
},
"layout": {
"url": "form-layout.html",
"title": "Form layouts",
"badge": "New"
}
}
}, },
"extra": { "extra": {
"title": "Extra", "title": "Extra",

6
shared/includes/cards/form/layout.html
View File

@@ -64,8 +64,8 @@
</label> </label>
</div> </div>
</div> </div>
</div> <div class="text-end">
<div class="card-footer text-end"> <button type="submit" class="btn btn-primary">Submit</button>
<button type="submit" class="btn btn-primary">Submit</button> </div>
</div> </div>
</form> </form>

2
shared/includes/ui/form/input-icon.html
View File

@@ -16,7 +16,7 @@
{{ addon }} {{ addon }}
{% endif %} {% endif %}
<input type="text" value="{{ include.value }}" class="form-control{% if include.light %} form-control-light{% endif %}{% if include.rounded %} form-control-rounded{% endif %}{% if include.input-class %} {{ include.input-class }}{% endif %}" placeholder="{{ include.placeholder | default: 'Search…' }}"{% if include['aria-label'] %} aria-label="{{ include['aria-label'] }}"{% endif %}{% if include.readonly %} readonly{% endif %}> <input type="{{ include.type | default: 'text' }}" value="{{ include.value }}" class="form-control{% if include.light %} form-control-light{% endif %}{% if include.rounded %} form-control-rounded{% endif %}{% if include.input-class %} {{ include.input-class }}{% endif %}" placeholder="{{ include.placeholder | default: 'Search…' }}"{% if include['aria-label'] %} aria-label="{{ include['aria-label'] }}"{% endif %}{% if include.readonly %} readonly{% endif %}>
{% unless include.prepend %} {% unless include.prepend %}
{{ addon }} {{ addon }}

2
shared/includes/ui/select.html
View File

@@ -5,7 +5,7 @@
{% assign key = include.key | default: 'people' %} {% assign key = include.key | default: 'people' %}
{% assign data = selects[key] %} {% assign data = selects[key] %}
<select type="text" class="form-select{% if include.class %} {{ include.class }}{% endif %}{% if include.state %} is-{{ include.state }}{% endif %}"{% if include.placeholder %} placeholder="{{ include.placeholder }}"{% endif %} id="select-{{ id }}" value="{{ value }}"{% if include.multiple or data.multiple %} multiple{% endif %}> <select class="form-select{% if include.class %} {{ include.class }}{% endif %}{% if include.state %} is-{{ include.state }}{% endif %}"{% if include.placeholder %} placeholder="{{ include.placeholder }}"{% endif %} id="select-{{ id }}" value="{{ value }}"{% if include.multiple or data.multiple %} multiple{% endif %}>
{% if include.values %} {% if include.values %}
{% assign values = include.values | split: ',' %} {% assign values = include.values | split: ',' %}