mirror of
https://github.com/tabler/tabler.git
synced 2025-12-22 01:44:25 +04:00
added missing forms
This commit is contained in:
codecalm
@@ -1,74 +1,71 @@
|
||||
{% assign horizontal = include.horizontal | default: false %}
|
||||
<div class="card">
|
||||
<form 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="{% if horizontal %}col-3 col-form-label{% else %}form-label{% endif %} required">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 class="mb-3{% if horizontal %} row{% endif %}">
|
||||
<label class="{% if horizontal %}col-3 col-form-label{% else %}form-label{% endif %} required">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="{% if horizontal %}col-3 col-form-label{% else %}form-label{% endif %} required">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 class="mb-3{% if horizontal %} row{% endif %}">
|
||||
<label class="{% if horizontal %}col-3 col-form-label{% else %}form-label{% endif %} required">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="{% if horizontal %}col-3 col-form-label{% else %}form-label{% endif %}">Select</label>
|
||||
<div {% if horizontal %}class="col"{% endif %}>
|
||||
<select class="form-select">
|
||||
<div class="mb-3{% if horizontal %} row{% endif %}">
|
||||
<label class="{% if horizontal %}col-3 col-form-label{% else %}form-label{% endif %}">Select</label>
|
||||
<div{% if horizontal %} class="col"{% endif %}>
|
||||
<select class="form-select">
|
||||
<option>Option 1</option>
|
||||
<optgroup label="Optgroup 1">
|
||||
<option>Option 1</option>
|
||||
<optgroup label="Optgroup 1">
|
||||
<option>Option 1</option>
|
||||
<option>Option 2</option>
|
||||
</optgroup>
|
||||
<option>Option 2</option>
|
||||
<optgroup label="Optgroup 2">
|
||||
<option>Option 1</option>
|
||||
<option>Option 2</option>
|
||||
</optgroup>
|
||||
<optgroup label="Optgroup 3">
|
||||
<option>Option 1</option>
|
||||
<option>Option 2</option>
|
||||
</optgroup>
|
||||
<option>Option 3</option>
|
||||
<option>Option 4</option>
|
||||
</select>
|
||||
</div>
|
||||
<option>Option 2</option>
|
||||
</optgroup>
|
||||
<option>Option 2</option>
|
||||
<optgroup label="Optgroup 2">
|
||||
<option>Option 1</option>
|
||||
<option>Option 2</option>
|
||||
</optgroup>
|
||||
<optgroup label="Optgroup 3">
|
||||
<option>Option 1</option>
|
||||
<option>Option 2</option>
|
||||
</optgroup>
|
||||
<option>Option 3</option>
|
||||
<option>Option 4</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group {% if horizontal %}row{% else %}mb-3{% endif %}">
|
||||
<label class="{% if horizontal %}col-3 col-form-label pt-0{% else %}form-label{% 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 class="{% if horizontal %}row{% else %}mb-3{% endif %}">
|
||||
<label class="{% if horizontal %}col-3 col-form-label pt-0{% else %}form-label{% 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 class="form-footer">
|
||||
<button type="submit" class="btn btn-primary">Submit</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer text-end">
|
||||
<button type="submit" class="btn btn-primary">Submit</button>
|
||||
</div>
|
||||
</form>
|
||||
@@ -1 +1 @@
|
||||
<input type="text" name="input-{{ include.name | default: 'mask' }}" class="form-control" data-mask="{{ include.mask | default: '00/00/0000' }}"{% if include.visible %} data-mask-visible="true"{% endif %}{% if include.placeholder %} placeholder="{{ include.placeholder }}"{% endif %} autocomplete="off"/>
|
||||
<input type="text" name="input-{{ include.name | default: 'mask' }}" class="form-control" data-mask="{{ include.mask | default: '00/00/0000' }}"{% if include.visible %} data-mask-visible="true"{% endif %}{% if include.placeholder %} placeholder="{{ include.placeholder }}"{% else %} placeholder="{{ include.mask }}"{% endif %}{% if include.reverse %} data-mask-reverse="true"{% endif %}autocomplete="off"/>
|
||||
@@ -47,7 +47,8 @@ libs: nouislider, autosize, tabler-flags, tabler-payments, litepicker, tom-selec
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Project ID</h3>
|
||||
<p class="card-subtitle">Used when interacting with the API.</p>
|
||||
{% include ui/form/input-icon.html icon="files" value="prj_5ae74426fe935327a8fa178b07d84ad9" readonly=true %}
|
||||
{% include ui/form/input-icon.html icon="files" value="prj_5ae74426fe935327a8fa178b07d84ad9" readonly=true
|
||||
%}
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<div class="row align-items-center">
|
||||
@@ -64,7 +65,8 @@ libs: nouislider, autosize, tabler-flags, tabler-payments, litepicker, tom-selec
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Node.js Version</h3>
|
||||
<p class="card-subtitle">The version of Node.js that is used in the Build Step and for Serverless Functions. A new Deployment is required for your changes to take effect.</p>
|
||||
<p class="card-subtitle">The version of Node.js that is used in the Build Step and for Serverless Functions.
|
||||
A new Deployment is required for your changes to take effect.</p>
|
||||
<select class="form-select">
|
||||
<option>14.x</option>
|
||||
<option>12.x</option>
|
||||
@@ -83,4 +85,340 @@ libs: nouislider, autosize, tabler-flags, tabler-payments, litepicker, tom-selec
|
||||
<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">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Input mask</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Date</label>
|
||||
{% include ui/form/input-mask.html mask="00/00/0000" visible=true %}
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Hour</label>
|
||||
{% include ui/form/input-mask.html mask="00:00:00" visible=true %}
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Date & Hour</label>
|
||||
{% include ui/form/input-mask.html mask="00/00/0000 00:00:00" visible=true %}
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">ZIP Code</label>
|
||||
{% include ui/form/input-mask.html mask="00000-000" visible=true %}
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Money</label>
|
||||
{% include ui/form/input-mask.html mask="000.000.000.000.000,00" visible=true reverse=true %}
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Telephone</label>
|
||||
{% include ui/form/input-mask.html mask="0000-0000" visible=true %}
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Telephone with Code Area</label>
|
||||
{% include ui/form/input-mask.html mask="(00) 0000-0000" visible=true %}
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">IP Address</label>
|
||||
{% include ui/form/input-mask.html mask="099.099.099.099" placeholder="000.000.000.000" visible=true %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<form class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">My Profile</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="mb-3">
|
||||
<div class="row">
|
||||
<div class="col-auto">
|
||||
{% include ui/avatar.html person-id=3 size="md" %}
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Email-Address</label>
|
||||
<input class="form-control" placeholder="your-email@domain.com">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Bio</label>
|
||||
<textarea class="form-control"
|
||||
rows="5">Big belly rude boy, million dollar hustler. Unemployed.</textarea>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Email-Address</label>
|
||||
<input class="form-control" placeholder="your-email@domain.com">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Password</label>
|
||||
<input type="password" class="form-control" value="password">
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer text-end">
|
||||
{% include ui/button.html text="Save" color="primary" %}
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-8">
|
||||
<div class="row row-cards">
|
||||
<div class="col-12">
|
||||
<form class="card">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Edit Profile</h3>
|
||||
<div class="row row-cards">
|
||||
<div class="col-md-5">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Company</label>
|
||||
<input type="text" class="form-control" disabled="" placeholder="Company"
|
||||
value="Creative Code Inc.">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6 col-md-3">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Username</label>
|
||||
<input type="text" class="form-control" placeholder="Username" value="michael23">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Email address</label>
|
||||
<input type="email" class="form-control" placeholder="Email">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6 col-md-6">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">First Name</label>
|
||||
<input type="text" class="form-control" placeholder="Company" value="Chet">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6 col-md-6">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Last Name</label>
|
||||
<input type="text" class="form-control" placeholder="Last Name" value="Faker">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-12">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Address</label>
|
||||
<input type="text" class="form-control" placeholder="Home Address"
|
||||
value="Melbourne, Australia">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">City</label>
|
||||
<input type="text" class="form-control" placeholder="City" value="Melbourne">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6 col-md-3">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Postal Code</label>
|
||||
<input type="test" class="form-control" placeholder="ZIP Code">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-5">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Country</label>
|
||||
<select class="form-control form-select">
|
||||
<option value="">Germany</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-12">
|
||||
<div class="mb-3 mb-0">
|
||||
<label class="form-label">About Me</label>
|
||||
<textarea rows="5" class="form-control" placeholder="Here can be your description"
|
||||
value="Mike">Oh so, your weak rhyme
|
||||
You doubt I'll bother, reading into it
|
||||
I'll probably won't, left to my own devices
|
||||
But that's the difference in our opinions.</textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer text-end">
|
||||
<button type="submit" class="btn btn-primary">Update Profile</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">HTTP Request</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row row-cards">
|
||||
<div class="mb-3 col-sm-4 col-md-2">
|
||||
<label class="form-label required">Method</label>
|
||||
<select class="form-select">
|
||||
<option value="GET">GET</option>
|
||||
<option value="POST">POST</option>
|
||||
<option value="PUT">PUT</option>
|
||||
<option value="HEAD">HEAD</option>
|
||||
<option value="DELETE">DELETE</option>
|
||||
<option value="PATCH">PATCH</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="mb-3 col-sm-8 col-md-10">
|
||||
<label class="form-label required">URL</label>
|
||||
<input name="url" type="text" class="form-control"
|
||||
value="https://content.googleapis.com/discovery/v1/apis/surveys/v2/rest">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-label">Assertions</div>
|
||||
<div class="table-responsive">
|
||||
<table class="table mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Source</th>
|
||||
<th>Property</th>
|
||||
<th>Comparison</th>
|
||||
<th>Target</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<select class="form-select">
|
||||
<option value="STATUS_CODE" selected="">Status code</option>
|
||||
<option value="JSON_BODY">JSON body</option>
|
||||
<option value="HEADERS">Headers</option>
|
||||
<option value="TEXT_BODY">Text body</option>
|
||||
<option value="RESPONSE_TIME">Response time</option>
|
||||
</select>
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" class="form-control"></td>
|
||||
<td>
|
||||
<select class="form-select">
|
||||
<option value="EQUALS" selected="">Equals</option>
|
||||
<option value="NOT_EQUALS">Not equals</option>
|
||||
<option value="HAS_KEY">Has key</option>
|
||||
<option value="NOT_HAS_KEY">Not has key</option>
|
||||
<option value="HAS_VALUE">Has value</option>
|
||||
<option value="NOT_HAS_VALUE">Not has value</option>
|
||||
<option value="IS_EMPTY">Is empty</option>
|
||||
<option value="NOT_EMPTY">Is not empty</option>
|
||||
<option value="GREATER_THAN">Greater than</option>
|
||||
<option value="LESS_THAN">Less than</option>
|
||||
</select>
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" class="form-control" value="200">
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<select class="form-select">
|
||||
<option value="STATUS_CODE">Status code</option>
|
||||
<option value="JSON_BODY" selected="">JSON body</option>
|
||||
<option value="HEADERS">Headers</option>
|
||||
<option value="TEXT_BODY">Text body</option>
|
||||
<option value="RESPONSE_TIME">Response time</option>
|
||||
</select>
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" class="form-control" value="parameters.alt.type">
|
||||
</td>
|
||||
<td>
|
||||
<select class="form-select">
|
||||
<option value="EQUALS">Equals</option>
|
||||
<option value="NOT_EQUALS">Not equals</option>
|
||||
<option value="HAS_KEY">Has key</option>
|
||||
<option value="NOT_HAS_KEY">Not has key</option>
|
||||
<option value="HAS_VALUE" selected="">Has value</option>
|
||||
<option value="NOT_HAS_VALUE">Not has value</option>
|
||||
<option value="IS_EMPTY">Is empty</option>
|
||||
<option value="NOT_EMPTY">Is not empty</option>
|
||||
<option value="GREATER_THAN">Greater than</option>
|
||||
<option value="LESS_THAN">Less than</option>
|
||||
</select>
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" class="form-control" value="string">
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<select class="form-select">
|
||||
<option value="STATUS_CODE">Status code</option>
|
||||
<option value="JSON_BODY">JSON body</option>
|
||||
<option value="HEADERS">Headers</option>
|
||||
<option value="TEXT_BODY">Text body</option>
|
||||
<option value="RESPONSE_TIME" selected="">Response time</option>
|
||||
</select>
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" class="form-control"></td>
|
||||
<td>
|
||||
<select class="form-select">
|
||||
<option value="EQUALS">Equals</option>
|
||||
<option value="NOT_EQUALS">Not equals</option>
|
||||
<option value="HAS_KEY">Has key</option>
|
||||
<option value="NOT_HAS_KEY">Not has key</option>
|
||||
<option value="HAS_VALUE">Has value</option>
|
||||
<option value="NOT_HAS_VALUE">Not has value</option>
|
||||
<option value="IS_EMPTY">Is empty</option>
|
||||
<option value="NOT_EMPTY">Is not empty</option>
|
||||
<option value="GREATER_THAN">Greater than</option>
|
||||
<option value="LESS_THAN" selected="">Less than</option>
|
||||
</select>
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" class="form-control" value="500">
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<select class="form-select">
|
||||
<option value="STATUS_CODE">Status code</option>
|
||||
<option value="JSON_BODY">JSON body</option>
|
||||
<option value="HEADERS" selected="">Headers</option>
|
||||
<option value="TEXT_BODY">Text body</option>
|
||||
<option value="RESPONSE_TIME">Response time</option>
|
||||
</select>
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" class="form-control" value="content-type">
|
||||
</td>
|
||||
<td>
|
||||
<select class="form-select">
|
||||
<option value="EQUALS" selected="">Equals</option>
|
||||
<option value="NOT_EQUALS">Not equals</option>
|
||||
<option value="HAS_KEY">Has key</option>
|
||||
<option value="NOT_HAS_KEY">Not has key</option>
|
||||
<option value="HAS_VALUE">Has value</option>
|
||||
<option value="NOT_HAS_VALUE">Not has value</option>
|
||||
<option value="IS_EMPTY">Is empty</option>
|
||||
<option value="NOT_EMPTY">Is not empty</option>
|
||||
<option value="GREATER_THAN">Greater than</option>
|
||||
<option value="LESS_THAN">Less than</option>
|
||||
</select>
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" class="form-control" value="application/json; charset=UTF-8">
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer text-end">
|
||||
<button type="submit" class="btn btn-primary">Make request</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -302,7 +302,7 @@ $avatar-size: 2.5rem !default;
|
||||
$avatar-sizes: (
|
||||
"xs": 1.5rem,
|
||||
"sm": 2rem,
|
||||
"md": 3.75rem,
|
||||
"md": 4rem,
|
||||
"lg": 5rem,
|
||||
"xl": 7rem,
|
||||
"2xl": 11rem,
|
||||
|
||||
Reference in New Issue
Block a user