mirror of
https://github.com/tabler/tabler.git
synced 2025-12-26 11:16:12 +04:00
Monorepo structure, remove Gulp, new build process (#2116)
This commit is contained in:
Paweł Kuna
GitHub
72
preview/pages/_includes/forms/form-elements-1.html
Normal file
72
preview/pages/_includes/forms/form-elements-1.html
Normal file
@@ -0,0 +1,72 @@
|
||||
{% include "parts/form/input.html" type="static" %}
|
||||
{% include "parts/form/input.html" type="text" hint="Here's some more info." %}
|
||||
{% include "parts/form/input.html" type="password" hint="Here's some more info." %}
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Disabled</label>
|
||||
<input type="text" class="form-control" name="example-disabled-input" placeholder="Disabled..."
|
||||
value="Well, she turned me into a newt." disabled>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Readonly</label>
|
||||
<input type="text" class="form-control" name="example-disabled-input" placeholder="Readonly..."
|
||||
value="Well, how'd you become king, then?" readonly>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label required">Required</label>
|
||||
<input type="text" class="form-control" name="example-required-input" placeholder="Required..." >
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Textarea <span class="form-label-description">56/100</span></label>
|
||||
<textarea class="form-control" name="example-textarea-input" rows="6" placeholder="Content..">Oh! Come and see the violence inherent in the system! Help, help, I'm being repressed! We shall say 'Ni' again to you, if you do not appease us. I'm not a witch. I'm not a witch. Camelot!</textarea>
|
||||
</div>
|
||||
|
||||
{% include "parts/form/select.html" %}
|
||||
{% include "parts/form/select.html" label="Select multiple" multiple=true %}
|
||||
|
||||
<div class="mb-3">
|
||||
<div class="form-label">Select multiple states</div>
|
||||
{% include "ui/select.html" key="states" multiple=true %}
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Input group</label>
|
||||
<div class="input-group mb-2">
|
||||
<input type="text" class="form-control" placeholder="Search for…">
|
||||
<button class="btn" type="button">Go!</button>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Action
|
||||
</button>
|
||||
{% include "ui/dropdown-menu.html" %}
|
||||
<input type="text" class="form-control" aria-label="Text input with dropdown button">
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Input group buttons</label>
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control">
|
||||
<button type="button" class="btn">Action</button>
|
||||
<button data-bs-toggle="dropdown" type="button" class="btn dropdown-toggle dropdown-toggle-split"></button>
|
||||
{% include "ui/dropdown-menu.html" right=true %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include "parts/form/input-icon.html" %}
|
||||
{% include "parts/form/input-icon-separated.html" %}
|
||||
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Input with help icon</label>
|
||||
<div class="row g-2">
|
||||
<div class="col">
|
||||
<input type="text" class="form-control" placeholder="Search for…">
|
||||
</div>
|
||||
<div class="col-auto align-self-center">
|
||||
<span class="form-help" data-bs-toggle="popover" data-bs-placement="top"
|
||||
data-bs-content="<p>ZIP Code must be US or CDN format. You can use an extended ZIP+4 code to determine address more accurately.</p><p class='mb-0'><a href='#'>USP ZIP codes lookup tools</a></p>"
|
||||
data-bs-html="true">?</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
73
preview/pages/_includes/forms/form-elements-2.html
Normal file
73
preview/pages/_includes/forms/form-elements-2.html
Normal file
@@ -0,0 +1,73 @@
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Form control rounded</label>
|
||||
<input type="text" class="form-control form-control-rounded mb-2" name="Form control rounded" placeholder="Text..">
|
||||
{% include "ui/form/input-icon.html" input-class="form-control-rounded" %}
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Form control flush</label>
|
||||
<input type="text" class="form-control form-control-flush" name="Form control flush" placeholder="Text..">
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Input group</label>
|
||||
{% include "ui/form/input-group.html" prepend="@" placeholder="username" class="mb-2" %}
|
||||
{% include "ui/form/input-group.html" append=".tabler.io" placeholder="subdomain" class="mb-2" %}
|
||||
{% include "ui/form/input-group.html" prepend="https://" append=".tabler.io" placeholder="subdomain" %}
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Input with checkbox or radios</label>
|
||||
{% include "ui/form/input-group.html" prepend="checkbox" class="mb-2" %}
|
||||
{% include "ui/form/input-group.html" append="radio" %}
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Input with prepended text</label>
|
||||
{% include "ui/form/input-group.html" prepend="https://tabler.io/users/" flat=true input-class="ps-0" value="yourfancyusername" %}
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Input with appended text</label>
|
||||
{% include "ui/form/input-group.html" append=".tabler.io" input-class="text-end pe-0" flat=true value="yourfancydomain" %}
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Input with appended link</label>
|
||||
{% include "ui/form/input-group.html" append-link="Show password" flat=true type="password" value="ultrastrongpassword" %}
|
||||
</div>
|
||||
|
||||
{% capture html %}
|
||||
<kbd>ctrl + K</kbd>
|
||||
{% endcapture %}
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Input with appended kbd</label>
|
||||
{% include "ui/form/input-group.html" append-html=html flat=true %}
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Input with appended icon links</label>
|
||||
{% include "ui/form/input-group.html" append-button="x:Clear search,adjustments:Search settings,bell:Add notification" flat=true %}
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Floating inputs</label>
|
||||
<div class="form-floating mb-3">
|
||||
<input type="email" class="form-control" id="floating-input" value="name@example.com" autocomplete="off">
|
||||
<label for="floating-input">Email address</label>
|
||||
</div>
|
||||
<div class="form-floating mb-3">
|
||||
<input type="password" class="form-control" id="floating-password" value="Password" autocomplete="off">
|
||||
<label for="floating-password">Password</label>
|
||||
</div>
|
||||
<div class="form-floating">
|
||||
<select class="form-select" id="floatingSelect" aria-label="Floating label select example">
|
||||
<option selected>Open this select menu</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</select>
|
||||
<label for="floatingSelect">Select</label>
|
||||
</div>
|
||||
</div>
|
||||
11
preview/pages/_includes/forms/form-elements-3.html
Normal file
11
preview/pages/_includes/forms/form-elements-3.html
Normal file
@@ -0,0 +1,11 @@
|
||||
{% include "parts/form/input-image.html" %}
|
||||
{% include "parts/form/input-image-radio.html" offset=10 %}
|
||||
{% include "parts/form/input-color.html" %}
|
||||
{% include "parts/form/input-color.html" name="color-rounded" rounded=true %}
|
||||
{% include "parts/form/input-colorpicker.html" %}
|
||||
|
||||
{% include "parts/form/validation-states.html" %}
|
||||
{% include "parts/form/validation-states.html" lite=true %}
|
||||
|
||||
<label class="form-label">Form fieldset</label>
|
||||
{% include "parts/form/fieldset.html" %}
|
||||
34
preview/pages/_includes/forms/form-elements-4.html
Normal file
34
preview/pages/_includes/forms/form-elements-4.html
Normal file
@@ -0,0 +1,34 @@
|
||||
|
||||
{% include "parts/form/input-selectgroups.html" %}
|
||||
{% include "parts/form/selectgroup-payments.html" %}
|
||||
{% include "parts/form/selectgroup-project-manager.html" %}
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Buttons group</label>
|
||||
{% include "ui/button-group.html" items="1 min,5 min,10 min,30 min" fluid=true radio=true id="basic" %}
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Buttons group with dropdown</label>
|
||||
{% include "ui/button-group.html" items="Option 1,Option 2" dropdown=true fluid=true radio=true id="dropdown" %}
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Vertical buttons group</label>
|
||||
{% include "ui/button-group.html" items="Button 1,Button 2,Button 3,Button 4,Button 5" fluid=true vertical=true radio=true id="vertical"%}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Vertical with dropdown</label>
|
||||
{% include "ui/button-group.html" items="Button 1,Button 2,Button 3,Button 4" fluid=true vertical=true dropdown=true radio=true id="vertical-dropdown" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Toolbar</label>
|
||||
{% include "ui/button-group.html" icons="bold,italic,underline,copy,scissors,file-plus,file-minus" fluid=true radio=true id="toolbar" %}
|
||||
</div>
|
||||
99
preview/pages/_includes/forms/form-elements-5.html
Normal file
99
preview/pages/_includes/forms/form-elements-5.html
Normal file
@@ -0,0 +1,99 @@
|
||||
{% include "parts/form/input-radios.html" %}
|
||||
{% include "parts/form/input-radios-inline.html" %}
|
||||
|
||||
{% include "parts/form/input-checkboxes.html" %}
|
||||
{% include "parts/form/input-checkboxes-inline.html" %}
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Checkboxes with description</label>
|
||||
|
||||
<label class="form-check">
|
||||
<input class="form-check-input" type="checkbox">
|
||||
<span class="form-check-label">
|
||||
Default checkbox
|
||||
</span>
|
||||
<span class="form-check-description">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
|
||||
</span>
|
||||
</label>
|
||||
<label class="form-check">
|
||||
<input class="form-check-input" type="checkbox">
|
||||
<span class="form-check-label">
|
||||
Longer checkbox item that wraps on to two separate lines
|
||||
</span>
|
||||
<span class="form-check-description">
|
||||
Ab alias aut, consequuntur cumque esse eveniet incidunt laborum minus molestiae.
|
||||
</span>
|
||||
</label>
|
||||
<label class="form-check">
|
||||
<input class="form-check-input" type="checkbox">
|
||||
<span class="form-check-label">
|
||||
Default checkbox without description
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{% include "parts/form/input-toggle.html" %}
|
||||
{% include "parts/form/input-toggle-single.html" %}
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Notification</label>
|
||||
{% include "parts/form/checkboxes-list.html" %}
|
||||
</div>
|
||||
|
||||
{% include "parts/form/input-file.html" %}
|
||||
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Date of birth</label>
|
||||
<div class="row g-2">
|
||||
<div class="col-5">
|
||||
<select name="user[month]" class="form-select">
|
||||
<option value="">Month</option>
|
||||
<option value="1">January</option>
|
||||
<option value="2">February</option>
|
||||
<option value="3">March</option>
|
||||
<option value="4">April</option>
|
||||
<option value="5">May</option>
|
||||
<option selected="selected" value="6">June</option>
|
||||
<option value="7">July</option>
|
||||
<option value="8">August</option>
|
||||
<option value="9">September</option>
|
||||
<option value="10">October</option>
|
||||
<option value="11">November</option>
|
||||
<option value="12">December</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<select name="user[day]" class="form-select">
|
||||
<option value="">Day</option>
|
||||
{% for i in (1..31) %}
|
||||
<option value="{{ i }}" {% if i== 20 %} selected{% endif %}>{{ i }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<select name="user[year]" class="form-select">
|
||||
<option value="">Year</option>
|
||||
{% for i in (1897..2014) reversed %}
|
||||
<option value="{{ i }}" {% if i== 1989 %} selected{% endif %}>{{ i }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Text mask</label>
|
||||
{% include "ui/form/input-mask.html" mask="00/00/0000" placeholder="00/00/0000" visible=true %}
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Telephone mask</label>
|
||||
{% include "ui/form/input-mask.html" mask="(00) 0000-0000" placeholder="(00) 0000-0000" visible=true %}
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Autosize textarea</label>
|
||||
{% include "ui/form/textarea-autosize.html" %}
|
||||
</div>
|
||||
68
preview/pages/_includes/forms/form-elements-6.html
Normal file
68
preview/pages/_includes/forms/form-elements-6.html
Normal file
@@ -0,0 +1,68 @@
|
||||
{% include "parts/form/input-datalist.html" %}
|
||||
{% include "parts/form/input-range.html" %}
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Datepicker</label>
|
||||
{% include "ui/datepicker.html" id="default" class="mb-2" %}
|
||||
{% include "ui/datepicker.html" id="icon" layout="icon" class="mb-2" %}
|
||||
{% include "ui/datepicker.html" id="icon-prepend" layout="icon-prepend" %}
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Inline datepicker</label>
|
||||
{% include "ui/datepicker.html" id="inline" inline=true %}
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Progress</label>
|
||||
{% include "ui/progress.html" class="mb-2" %}
|
||||
{% include "ui/progress.html" indeterminate=true color="green" %}
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Form buttons</label>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
{% include "ui/button.html" block=true icon="brand-github" icon-color="github" text="Login with Github" %}
|
||||
</div>
|
||||
<div class="col">
|
||||
{% include "ui/button.html" block=true icon="brand-x" icon-color="x" text="Login with X" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Tags input</label>
|
||||
{% include "ui/select.html" key="tags" placeholder="Select tags" %}
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Advanced select</label>
|
||||
{% include "ui/select.html" key="users" %}
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Advanced select with optgroup</label>
|
||||
{% include "ui/select.html" key="optgroups" %}
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Select with avatars</label>
|
||||
{% include "ui/select.html" key="people" indicator="avatar" %}
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Select with flags</label>
|
||||
{% include "ui/select.html" key="countries" indicator="flag" %}
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Select with labels</label>
|
||||
{% include "ui/select.html" key="labels" indicator="label" %}
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Advanced select with validation state</label>
|
||||
{% include "ui/select.html" id="countries-valid" key="countries" state="valid" class="mb-3" %}
|
||||
{% include "ui/select.html" id="countries-invalid" key="countries" state="invalid" %}
|
||||
</div>
|
||||
25
preview/pages/_includes/forms/sign-in.html
Normal file
25
preview/pages/_includes/forms/sign-in.html
Normal file
@@ -0,0 +1,25 @@
|
||||
<form action="{{ page | relative }}/" method="get" autocomplete="off" novalidate>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Email address</label>
|
||||
<input type="email" class="form-control" placeholder="your@email.com" autocomplete="off">
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<label class="form-label">
|
||||
Password
|
||||
<span class="form-label-description">
|
||||
<a href="{{ page | relative }}/forgot-password.html">I forgot password</a>
|
||||
</span>
|
||||
</label>
|
||||
{% include "ui/form/input-group.html" type="password" append-button="eye:Show password" flat=true placeholder="Your password" %}
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<label class="form-check">
|
||||
<input type="checkbox" class="form-check-input"/>
|
||||
<span class="form-check-label">Remember me on this device</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="form-footer">
|
||||
<button type="submit" class="btn btn-primary w-100">Sign in</button>
|
||||
</div>
|
||||
</form>
|
||||
Reference in New Issue
Block a user