mirror of
https://github.com/tabler/tabler.git
synced 2025-12-21 17:34:25 +04:00
feat: create new form layout page (#2303)
This commit is contained in:
Paweł Kuna
GitHub
5
.changeset/silent-planes-hide.md
Normal file
5
.changeset/silent-planes-hide.md
Normal file
@@ -0,0 +1,5 @@
|
||||
---
|
||||
"@tabler/preview": patch
|
||||
---
|
||||
|
||||
Add new form layout page
|
||||
6614
pnpm-lock.yaml
generated
6614
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: 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]
|
||||
layout: default
|
||||
permalink: form-elements.html
|
||||
@@ -84,10 +84,6 @@ permalink: form-elements.html
|
||||
{% include "cards/form/layout.html" %}
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
{% include "cards/form/layout.html" horizontal=true title="Horizontal form" %}
|
||||
</div>
|
||||
|
||||
<div class="col-lg-4">
|
||||
<div class="row row-cards">
|
||||
<div class="col-12">
|
||||
|
||||
322
preview/pages/form-layout.html
Normal file
322
preview/pages/form-layout.html
Normal 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>
|
||||
@@ -203,11 +203,20 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"forms": {
|
||||
"url": "form-elements.html",
|
||||
"form": {
|
||||
"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": {
|
||||
"title": "Extra",
|
||||
|
||||
@@ -64,8 +64,8 @@
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer text-end">
|
||||
<button type="submit" class="btn btn-primary">Submit</button>
|
||||
<div class="text-end">
|
||||
<button type="submit" class="btn btn-primary">Submit</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
@@ -16,7 +16,7 @@
|
||||
{{ addon }}
|
||||
{% 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 %}
|
||||
{{ addon }}
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
{% assign key = include.key | default: 'people' %}
|
||||
{% 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 %}
|
||||
{% assign values = include.values | split: ',' %}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user