Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-07-23 05:51:42 +04:00
Code Issues Projects Releases Wiki Activity

Release 1.0.0-beta11

Browse Source
This commit is contained in:
codecalm
2022-08-05 11:56:49 +02:00
parent 0b76efb9e9
commit 5c07297182
839 changed files with 509331 additions and 19420 deletions
Download Patch File Download Diff File Expand all files Collapse all files
demo/docs/buttons.html
+83 -31
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-beta10
* @version 1.0.0-beta11
* @link https://tabler.io
* Copyright 2018-2022 The Tabler Authors
* Copyright 2018-2022 codecalm.net Paweł Kuna
@@ -42,7 +42,7 @@
</a>
<a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/heart -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" 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="M19.5 13.572l-7.5 7.428l-7.5 -7.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" 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="M19.5 12.572l-7.5 7.428l-7.5 -7.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
Sponsor
</a>
</div>
@@ -221,6 +221,10 @@
<a class="dropdown-item" href="../colors.html">
Colors
</a>
<a class="dropdown-item" href="../datagrid.html">
Data grid
<span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
</a>
<a class="dropdown-item" href="../datatables.html">
Datatables
<span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
@@ -244,11 +248,11 @@
<a class="dropdown-item" href="../navigation.html">
Navigation
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="../charts.html">
Charts
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="../pagination.html">
<!-- Download SVG icon from http://tabler-icons.io/i/pie-chart -->
Pagination
@@ -278,6 +282,22 @@
<a class="dropdown-item" href="../markdown.html">
Markdown
</a>
<a class="dropdown-item" href="../dropzone.html">
Dropzone
<span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
</a>
<a class="dropdown-item" href="../lightbox.html">
Lightbox
<span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
</a>
<a class="dropdown-item" href="../tinymce.html">
TinyMCE
<span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
</a>
<a class="dropdown-item" href="../inline-player.html">
Inline player
<span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
</a>
<div class="dropend">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
Authentication
@@ -359,6 +379,9 @@
<a class="dropdown-item" href="../pricing.html">
Pricing cards
</a>
<a class="dropdown-item" href="../pricing-table.html">
Pricing table
</a>
<a class="dropdown-item" href="../faq.html">
FAQ
<span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
@@ -387,6 +410,10 @@
<a class="dropdown-item" href="../wizard.html">
Wizard
</a>
<a class="dropdown-item" href="../settings.html">
Settings
<span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
</a>
</div>
</div>
</div>
@@ -455,7 +482,7 @@
<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">
1960 icons
2160 icons
</span>
</a>
</li>
@@ -480,7 +507,7 @@
</a>
<a class="dropdown-item text-pink" href="https://github.com/sponsors/codecalm" target="_blank" rel="noopener">
<!-- Download SVG icon from http://tabler-icons.io/i/heart -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-inline me-1" 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="M19.5 13.572l-7.5 7.428l-7.5 -7.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-inline me-1" 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="M19.5 12.572l-7.5 7.428l-7.5 -7.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
Sponsor project!
</a>
</div>
@@ -672,6 +699,11 @@
Carousel
</a>
</li>
<li class="nav-item">
<a href="../docs/datagrid.html" class="nav-link">
Data grid
</a>
</li>
<li class="nav-item">
<a href="../docs/dropdowns.html" class="nav-link">
Dropdowns
@@ -762,6 +794,11 @@
Tooltips
</a>
</li>
<li class="nav-item">
<a href="../docs/popover.html" class="nav-link">
Popover
</a>
</li>
</ul>
</li>
<li class="nav-item">
@@ -818,12 +855,27 @@
Charts
</a>
</li>
<li class="nav-item">
<a href="../docs/dropzone.html" class="nav-link">
Dropzone
</a>
</li>
<li class="nav-item">
<a href="../docs/inline-player.html" class="nav-link">
Inline player
</a>
</li>
<li class="nav-item">
<a href="../docs/tinymce.html" class="nav-link">
TinyMCE
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="../changelog.html" class="nav-link">
Changelog
<span class="badge bg-blue-lt ms-auto">1.0.0-beta10</span>
<span class="badge bg-blue-lt ms-auto">1.0.0-beta11</span>
</a>
</li>
</ul>
@@ -904,12 +956,12 @@
<a href="javascript:void(0)" class="btn btn-info">
Info
</a>
<a href="javascript:void(0)" class="btn btn-light">
Light
</a>
<a href="javascript:void(0)" class="btn btn-dark">
Dark
</a>
<a href="javascript:void(0)" class="btn btn-light">
Light
</a>
</div>
</div>
</div>
@@ -933,11 +985,11 @@
<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-info"</span><span class="nt">&gt;</span>
Info
<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">"btn btn-light"</span><span class="nt">&gt;</span>
Light
<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">"btn btn-dark"</span><span class="nt">&gt;</span>
Dark
<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">"btn btn-light"</span><span class="nt">&gt;</span>
Light
<span class="nt">&lt;/a&gt;</span></code></pre>
</figure>
</div>
@@ -964,12 +1016,12 @@
<a href="javascript:void(0)" class="btn btn-info disabled">
Info
</a>
<a href="javascript:void(0)" class="btn btn-light disabled">
Light
</a>
<a href="javascript:void(0)" class="btn btn-dark disabled">
Dark
</a>
<a href="javascript:void(0)" class="btn btn-light disabled">
Light
</a>
</div>
</div>
</div>
@@ -993,11 +1045,11 @@
<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-info disabled"</span><span class="nt">&gt;</span>
Info
<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">"btn btn-light disabled"</span><span class="nt">&gt;</span>
Light
<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">"btn btn-dark disabled"</span><span class="nt">&gt;</span>
Dark
<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">"btn btn-light disabled"</span><span class="nt">&gt;</span>
Light
<span class="nt">&lt;/a&gt;</span></code></pre>
</figure>
</div>
@@ -1048,8 +1100,8 @@
<a href="javascript:void(0)" class="btn btn-ghost-warning">Warning</a>
<a href="javascript:void(0)" class="btn btn-ghost-danger">Danger</a>
<a href="javascript:void(0)" class="btn btn-ghost-info">Info</a>
<a href="javascript:void(0)" class="btn btn-ghost-light">Light</a>
<a href="javascript:void(0)" class="btn btn-ghost-dark">Dark</a>
<a href="javascript:void(0)" class="btn btn-ghost-light">Light</a>
</div>
</div>
</div>
@@ -1061,8 +1113,8 @@
<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-ghost-warning"</span><span class="nt">&gt;</span>Warning<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">"btn btn-ghost-danger"</span><span class="nt">&gt;</span>Danger<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">"btn btn-ghost-info"</span><span class="nt">&gt;</span>Info<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">"btn btn-ghost-light"</span><span class="nt">&gt;</span>Light<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">"btn btn-ghost-dark"</span><span class="nt">&gt;</span>Dark<span class="nt">&lt;/a&gt;</span></code></pre>
<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-ghost-dark"</span><span class="nt">&gt;</span>Dark<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">"btn btn-ghost-light"</span><span class="nt">&gt;</span>Light<span class="nt">&lt;/a&gt;</span></code></pre>
</figure>
</div>
<h2 id="square-buttons">Square buttons</h2>
@@ -1124,12 +1176,12 @@
<a href="javascript:void(0)" class="btn btn-outline-info">
Info
</a>
<a href="javascript:void(0)" class="btn btn-outline-light">
Light
</a>
<a href="javascript:void(0)" class="btn btn-outline-dark">
Dark
</a>
<a href="javascript:void(0)" class="btn btn-outline-light">
Light
</a>
</div>
</div>
</div>
@@ -1153,11 +1205,11 @@
<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-outline-info"</span><span class="nt">&gt;</span>
Info
<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">"btn btn-outline-light"</span><span class="nt">&gt;</span>
Light
<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">"btn btn-outline-dark"</span><span class="nt">&gt;</span>
Dark
<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">"btn btn-outline-light"</span><span class="nt">&gt;</span>
Light
<span class="nt">&lt;/a&gt;</span></code></pre>
</figure>
</div>
@@ -1204,7 +1256,7 @@
</button>
<button type="button" class="btn btn-warning">
<!-- Download SVG icon from http://tabler-icons.io/i/heart -->
<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="M19.5 13.572l-7.5 7.428l-7.5 -7.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
<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="M19.5 12.572l-7.5 7.428l-7.5 -7.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
I like
</button>
<button type="button" class="btn btn-success">
@@ -1919,7 +1971,7 @@
<li class="list-inline-item">
<a href="https://github.com/sponsors/codecalm" target="_blank" class="link-secondary" rel="noopener">
<!-- Download SVG icon from http://tabler-icons.io/i/heart -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink icon-filled icon-inline" 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="M19.5 13.572l-7.5 7.428l-7.5 -7.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink icon-filled icon-inline" 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="M19.5 12.572l-7.5 7.428l-7.5 -7.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
Sponsor
</a>
</li>
@@ -1934,7 +1986,7 @@
</li>
<li class="list-inline-item">
<a href="../changelog.html" class="link-secondary" rel="noopener">
v1.0.0-beta10
v1.0.0-beta11
</a>
</li>
</ul>