Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2025-12-26 11:16:12 +04:00
Code Issues Projects Releases Wiki Activity

Release 1.0.0-beta13

Browse Source
This commit is contained in:
codecalm
2022-10-18 23:26:54 +02:00
parent e47b01eb35
commit 2136bee1aa
483 changed files with 85872 additions and 52556 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
demo/docs/form-elements.html
View File

@@ -1,7 +1,7 @@
<!doctype html>
<!--
* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
* @version 1.0.0-beta12
* @version 1.0.0-beta13
* @link https://tabler.io
* Copyright 2018-2022 The Tabler Authors
* Copyright 2018-2022 codecalm.net Paweł Kuna
@@ -506,11 +506,11 @@
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 11a7 7 0 0 1 14 0v7a1.78 1.78 0 0 1 -3.1 1.4a1.65 1.65 0 0 0 -2.6 0a1.65 1.65 0 0 1 -2.6 0a1.65 1.65 0 0 0 -2.6 0a1.78 1.78 0 0 1 -3.1 -1.4v-7" /><line x1="10" y1="10" x2="10.01" y2="10" /><line x1="14" y1="10" x2="14.01" y2="10" /><path d="M10 14a3.5 3.5 0 0 0 4 0" /></svg>
</span>
<span class="nav-link-title">
2681 icons
2853 icons
</span>
</a>
</li>
<li class="nav-item dropdown">
<li class="nav-item active dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-help" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/lifebuoy -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="12" cy="12" r="4" /><circle cx="12" cy="12" r="9" /><line x1="15" y1="15" x2="18.35" y2="18.35" /><line x1="9" y1="15" x2="5.65" y2="18.35" /><line x1="5.65" y1="5.65" x2="9" y2="9" /><line x1="18.35" y1="5.65" x2="15" y2="9" /></svg>
@@ -641,13 +641,13 @@
</ul>
</li>
<li class="nav-item">
<a href="#menu-forms" class="nav-link" data-bs-toggle="collapse" aria-expanded="true">
<a href="#menu-forms" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
Form components
<span class="nav-link-toggle"></span>
</a>
<ul class="nav nav-pills collapse show" id="menu-forms">
<ul class="nav nav-pills collapse" id="menu-forms">
<li class="nav-item">
<a href="../docs/form-elements.html" class="nav-link active">
<a href="../docs/form-elements.html" class="nav-link">
Form elements
</a>
</li>
@@ -814,6 +814,11 @@
Toasts
</a>
</li>
<li class="nav-item">
<a href="../docs/tracking.html" class="nav-link">
Tracking
</a>
</li>
<li class="nav-item">
<a href="../docs/tooltips.html" class="nav-link">
Tooltips
@@ -900,7 +905,7 @@
<li class="nav-item">
<a href="../changelog.html" class="nav-link">
Changelog
<span class="badge bg-primary-lt ms-auto">1.0.0-beta12</span>
<span class="badge bg-primary-lt ms-auto">1.0.0-beta13</span>
</a>
</li>
</ul>
@@ -920,7 +925,7 @@
</a>
</p>
</div>
<p class="mb-4 text-muted">Forms are one of the most important types of interaction with a website or app. Since their aim is to enable users to make a purchase, subscribe to a service or sign up to create an account, it's important to make sure they are easy to complete and help increase conversion rates. Use the available elements to create forms which are well-structured and user-friendly.</p>
<p class="h3 fw-normal mb-4 text-muted">Forms are one of the most important types of interaction with a website or app. Since their aim is to enable users to make a purchase, subscribe to a service or sign up to create an account, it's important to make sure they are easy to complete and help increase conversion rates. Use the available elements to create forms which are well-structured and user-friendly.</p>
</div>
<h2 id="classic-inputs">Classic inputs</h2>
<p>Use classic, user-friendly inputs, label them appropriately and include input placeholders that will help users avoid confusion when completing a form.</p>
@@ -974,7 +979,7 @@
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">value=</span><span class="s">""</span> <span class="na">class=</span><span class="s">"form-control form-control-rounded"</span> <span class="na">placeholder=</span><span class="s">"Search…"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"input-icon-addon"</span><span class="nt">&gt;</span>
<span class="c">&lt;!-- Download SVG icon from http://tabler-icons.io/i/search --&gt;</span>
<span class="c">&lt;!-- SVG icon code --&gt;</span>
<span class="nt">&lt;svg</span> <span class="na">xmlns=</span><span class="s">"http://www.w3.org/2000/svg"</span> <span class="na">class=</span><span class="s">"icon"</span> <span class="na">width=</span><span class="s">"24"</span> <span class="na">height=</span><span class="s">"24"</span> <span class="na">viewBox=</span><span class="s">"0 0 24 24"</span> <span class="na">stroke-width=</span><span class="s">"2"</span> <span class="na">stroke=</span><span class="s">"currentColor"</span> <span class="na">fill=</span><span class="s">"none"</span> <span class="na">stroke-linecap=</span><span class="s">"round"</span> <span class="na">stroke-linejoin=</span><span class="s">"round"</span><span class="nt">&gt;&lt;path</span> <span class="na">stroke=</span><span class="s">"none"</span> <span class="na">d=</span><span class="s">"M0 0h24v24H0z"</span> <span class="na">fill=</span><span class="s">"none"</span><span class="nt">/&gt;&lt;circle</span> <span class="na">cx=</span><span class="s">"10"</span> <span class="na">cy=</span><span class="s">"10"</span> <span class="na">r=</span><span class="s">"7"</span> <span class="nt">/&gt;&lt;line</span> <span class="na">x1=</span><span class="s">"21"</span> <span class="na">y1=</span><span class="s">"21"</span> <span class="na">x2=</span><span class="s">"15"</span> <span class="na">y2=</span><span class="s">"15"</span> <span class="nt">/&gt;&lt;/svg&gt;</span>
<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
@@ -1044,13 +1049,13 @@
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">value=</span><span class="s">""</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">placeholder=</span><span class="s">"Search…"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"input-icon-addon"</span><span class="nt">&gt;</span>
<span class="c">&lt;!-- Download SVG icon from http://tabler-icons.io/i/search --&gt;</span>
<span class="c">&lt;!-- SVG icon code --&gt;</span>
<span class="nt">&lt;svg</span> <span class="na">xmlns=</span><span class="s">"http://www.w3.org/2000/svg"</span> <span class="na">class=</span><span class="s">"icon"</span> <span class="na">width=</span><span class="s">"24"</span> <span class="na">height=</span><span class="s">"24"</span> <span class="na">viewBox=</span><span class="s">"0 0 24 24"</span> <span class="na">stroke-width=</span><span class="s">"2"</span> <span class="na">stroke=</span><span class="s">"currentColor"</span> <span class="na">fill=</span><span class="s">"none"</span> <span class="na">stroke-linecap=</span><span class="s">"round"</span> <span class="na">stroke-linejoin=</span><span class="s">"round"</span><span class="nt">&gt;&lt;path</span> <span class="na">stroke=</span><span class="s">"none"</span> <span class="na">d=</span><span class="s">"M0 0h24v24H0z"</span> <span class="na">fill=</span><span class="s">"none"</span><span class="nt">/&gt;&lt;circle</span> <span class="na">cx=</span><span class="s">"10"</span> <span class="na">cy=</span><span class="s">"10"</span> <span class="na">r=</span><span class="s">"7"</span> <span class="nt">/&gt;&lt;line</span> <span class="na">x1=</span><span class="s">"21"</span> <span class="na">y1=</span><span class="s">"21"</span> <span class="na">x2=</span><span class="s">"15"</span> <span class="na">y2=</span><span class="s">"15"</span> <span class="nt">/&gt;&lt;/svg&gt;</span>
<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"input-icon mb-3"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"input-icon-addon"</span><span class="nt">&gt;</span>
<span class="c">&lt;!-- Download SVG icon from http://tabler-icons.io/i/user --&gt;</span>
<span class="c">&lt;!-- SVG icon code --&gt;</span>
<span class="nt">&lt;svg</span> <span class="na">xmlns=</span><span class="s">"http://www.w3.org/2000/svg"</span> <span class="na">class=</span><span class="s">"icon"</span> <span class="na">width=</span><span class="s">"24"</span> <span class="na">height=</span><span class="s">"24"</span> <span class="na">viewBox=</span><span class="s">"0 0 24 24"</span> <span class="na">stroke-width=</span><span class="s">"2"</span> <span class="na">stroke=</span><span class="s">"currentColor"</span> <span class="na">fill=</span><span class="s">"none"</span> <span class="na">stroke-linecap=</span><span class="s">"round"</span> <span class="na">stroke-linejoin=</span><span class="s">"round"</span><span class="nt">&gt;&lt;path</span> <span class="na">stroke=</span><span class="s">"none"</span> <span class="na">d=</span><span class="s">"M0 0h24v24H0z"</span> <span class="na">fill=</span><span class="s">"none"</span><span class="nt">/&gt;&lt;circle</span> <span class="na">cx=</span><span class="s">"12"</span> <span class="na">cy=</span><span class="s">"7"</span> <span class="na">r=</span><span class="s">"4"</span> <span class="nt">/&gt;&lt;path</span> <span class="na">d=</span><span class="s">"M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2"</span> <span class="nt">/&gt;&lt;/svg&gt;</span>
<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">value=</span><span class="s">""</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">placeholder=</span><span class="s">"Username"</span><span class="nt">&gt;</span>
<span class="nt">&lt;/div&gt;</span>
@@ -1083,7 +1088,7 @@
<input type="text" class="form-control" placeholder="Search for…" />
</div>
<div class="col-auto">
<a href="javascript:void(0)" class="btn btn-white btn-icon" aria-label="Button">
<a href="javascript:void(0)" class="btn btn-icon" aria-label="Button">
<!-- Download SVG icon from http://tabler-icons.io/i/search -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><circle cx="10" cy="10" r="7" /><line x1="21" y1="21" x2="15" y2="15" /></svg>
</a>
@@ -1101,9 +1106,9 @@
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">placeholder=</span><span class="s">"Search for…"</span><span class="nt">&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-auto"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-white btn-icon"</span> <span class="na">aria-label=</span><span class="s">"Button"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-icon"</span> <span class="na">aria-label=</span><span class="s">"Button"</span><span class="nt">&gt;</span>
<span class="c">&lt;!-- Download SVG icon from http://tabler-icons.io/i/search --&gt;</span>
<span class="c">&lt;!-- SVG icon code --&gt;</span>
<span class="nt">&lt;svg</span> <span class="na">xmlns=</span><span class="s">"http://www.w3.org/2000/svg"</span> <span class="na">class=</span><span class="s">"icon"</span> <span class="na">width=</span><span class="s">"24"</span> <span class="na">height=</span><span class="s">"24"</span> <span class="na">viewBox=</span><span class="s">"0 0 24 24"</span> <span class="na">stroke-width=</span><span class="s">"2"</span> <span class="na">stroke=</span><span class="s">"currentColor"</span> <span class="na">fill=</span><span class="s">"none"</span> <span class="na">stroke-linecap=</span><span class="s">"round"</span> <span class="na">stroke-linejoin=</span><span class="s">"round"</span><span class="nt">&gt;&lt;path</span> <span class="na">stroke=</span><span class="s">"none"</span> <span class="na">d=</span><span class="s">"M0 0h24v24H0z"</span> <span class="na">fill=</span><span class="s">"none"</span><span class="nt">/&gt;&lt;circle</span> <span class="na">cx=</span><span class="s">"10"</span> <span class="na">cy=</span><span class="s">"10"</span> <span class="na">r=</span><span class="s">"7"</span> <span class="nt">/&gt;&lt;line</span> <span class="na">x1=</span><span class="s">"21"</span> <span class="na">y1=</span><span class="s">"21"</span> <span class="na">x2=</span><span class="s">"15"</span> <span class="na">y2=</span><span class="s">"15"</span> <span class="nt">/&gt;&lt;/svg&gt;</span>
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
@@ -1734,13 +1739,13 @@
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">autocomplete=</span><span class="s">"off"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"input-group-text"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"link-secondary"</span> <span class="na">title=</span><span class="s">"Clear search"</span> <span class="na">data-bs-toggle=</span><span class="s">"tooltip"</span><span class="nt">&gt;</span><span class="c">&lt;!-- Download SVG icon from http://tabler-icons.io/i/x --&gt;</span>
<span class="c">&lt;!-- SVG icon code --&gt;</span>
<span class="nt">&lt;svg</span> <span class="na">xmlns=</span><span class="s">"http://www.w3.org/2000/svg"</span> <span class="na">class=</span><span class="s">"icon"</span> <span class="na">width=</span><span class="s">"24"</span> <span class="na">height=</span><span class="s">"24"</span> <span class="na">viewBox=</span><span class="s">"0 0 24 24"</span> <span class="na">stroke-width=</span><span class="s">"2"</span> <span class="na">stroke=</span><span class="s">"currentColor"</span> <span class="na">fill=</span><span class="s">"none"</span> <span class="na">stroke-linecap=</span><span class="s">"round"</span> <span class="na">stroke-linejoin=</span><span class="s">"round"</span><span class="nt">&gt;&lt;path</span> <span class="na">stroke=</span><span class="s">"none"</span> <span class="na">d=</span><span class="s">"M0 0h24v24H0z"</span> <span class="na">fill=</span><span class="s">"none"</span><span class="nt">/&gt;&lt;line</span> <span class="na">x1=</span><span class="s">"18"</span> <span class="na">y1=</span><span class="s">"6"</span> <span class="na">x2=</span><span class="s">"6"</span> <span class="na">y2=</span><span class="s">"18"</span> <span class="nt">/&gt;&lt;line</span> <span class="na">x1=</span><span class="s">"6"</span> <span class="na">y1=</span><span class="s">"6"</span> <span class="na">x2=</span><span class="s">"18"</span> <span class="na">y2=</span><span class="s">"18"</span> <span class="nt">/&gt;&lt;/svg&gt;</span>
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"link-secondary ms-2"</span> <span class="na">title=</span><span class="s">"Search settings"</span> <span class="na">data-bs-toggle=</span><span class="s">"tooltip"</span><span class="nt">&gt;</span><span class="c">&lt;!-- Download SVG icon from http://tabler-icons.io/i/adjustments --&gt;</span>
<span class="c">&lt;!-- SVG icon code --&gt;</span>
<span class="nt">&lt;svg</span> <span class="na">xmlns=</span><span class="s">"http://www.w3.org/2000/svg"</span> <span class="na">class=</span><span class="s">"icon"</span> <span class="na">width=</span><span class="s">"24"</span> <span class="na">height=</span><span class="s">"24"</span> <span class="na">viewBox=</span><span class="s">"0 0 24 24"</span> <span class="na">stroke-width=</span><span class="s">"2"</span> <span class="na">stroke=</span><span class="s">"currentColor"</span> <span class="na">fill=</span><span class="s">"none"</span> <span class="na">stroke-linecap=</span><span class="s">"round"</span> <span class="na">stroke-linejoin=</span><span class="s">"round"</span><span class="nt">&gt;&lt;path</span> <span class="na">stroke=</span><span class="s">"none"</span> <span class="na">d=</span><span class="s">"M0 0h24v24H0z"</span> <span class="na">fill=</span><span class="s">"none"</span><span class="nt">/&gt;&lt;circle</span> <span class="na">cx=</span><span class="s">"6"</span> <span class="na">cy=</span><span class="s">"10"</span> <span class="na">r=</span><span class="s">"2"</span> <span class="nt">/&gt;&lt;line</span> <span class="na">x1=</span><span class="s">"6"</span> <span class="na">y1=</span><span class="s">"4"</span> <span class="na">x2=</span><span class="s">"6"</span> <span class="na">y2=</span><span class="s">"8"</span> <span class="nt">/&gt;&lt;line</span> <span class="na">x1=</span><span class="s">"6"</span> <span class="na">y1=</span><span class="s">"12"</span> <span class="na">x2=</span><span class="s">"6"</span> <span class="na">y2=</span><span class="s">"20"</span> <span class="nt">/&gt;&lt;circle</span> <span class="na">cx=</span><span class="s">"12"</span> <span class="na">cy=</span><span class="s">"16"</span> <span class="na">r=</span><span class="s">"2"</span> <span class="nt">/&gt;&lt;line</span> <span class="na">x1=</span><span class="s">"12"</span> <span class="na">y1=</span><span class="s">"4"</span> <span class="na">x2=</span><span class="s">"12"</span> <span class="na">y2=</span><span class="s">"14"</span> <span class="nt">/&gt;&lt;line</span> <span class="na">x1=</span><span class="s">"12"</span> <span class="na">y1=</span><span class="s">"18"</span> <span class="na">x2=</span><span class="s">"12"</span> <span class="na">y2=</span><span class="s">"20"</span> <span class="nt">/&gt;&lt;circle</span> <span class="na">cx=</span><span class="s">"18"</span> <span class="na">cy=</span><span class="s">"7"</span> <span class="na">r=</span><span class="s">"2"</span> <span class="nt">/&gt;&lt;line</span> <span class="na">x1=</span><span class="s">"18"</span> <span class="na">y1=</span><span class="s">"4"</span> <span class="na">x2=</span><span class="s">"18"</span> <span class="na">y2=</span><span class="s">"5"</span> <span class="nt">/&gt;&lt;line</span> <span class="na">x1=</span><span class="s">"18"</span> <span class="na">y1=</span><span class="s">"9"</span> <span class="na">x2=</span><span class="s">"18"</span> <span class="na">y2=</span><span class="s">"20"</span> <span class="nt">/&gt;&lt;/svg&gt;</span>
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"link-secondary ms-2 disabled"</span> <span class="na">title=</span><span class="s">"Add notification"</span> <span class="na">data-bs-toggle=</span><span class="s">"tooltip"</span><span class="nt">&gt;</span><span class="c">&lt;!-- Download SVG icon from http://tabler-icons.io/i/bell --&gt;</span>
<span class="c">&lt;!-- SVG icon code --&gt;</span>
<span class="nt">&lt;svg</span> <span class="na">xmlns=</span><span class="s">"http://www.w3.org/2000/svg"</span> <span class="na">class=</span><span class="s">"icon"</span> <span class="na">width=</span><span class="s">"24"</span> <span class="na">height=</span><span class="s">"24"</span> <span class="na">viewBox=</span><span class="s">"0 0 24 24"</span> <span class="na">stroke-width=</span><span class="s">"2"</span> <span class="na">stroke=</span><span class="s">"currentColor"</span> <span class="na">fill=</span><span class="s">"none"</span> <span class="na">stroke-linecap=</span><span class="s">"round"</span> <span class="na">stroke-linejoin=</span><span class="s">"round"</span><span class="nt">&gt;&lt;path</span> <span class="na">stroke=</span><span class="s">"none"</span> <span class="na">d=</span><span class="s">"M0 0h24v24H0z"</span> <span class="na">fill=</span><span class="s">"none"</span><span class="nt">/&gt;&lt;path</span> <span class="na">d=</span><span class="s">"M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6"</span> <span class="nt">/&gt;&lt;path</span> <span class="na">d=</span><span class="s">"M9 17v1a3 3 0 0 0 6 0v-1"</span> <span class="nt">/&gt;&lt;/svg&gt;</span>
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/div&gt;</span>
@@ -1793,7 +1798,7 @@
</li>
<li class="list-inline-item">
<a href="../changelog.html" class="link-secondary" rel="noopener">
v1.0.0-beta12
v1.0.0-beta13
</a>
</li>
</ul>