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-alpha.12

Browse Source
This commit is contained in:
codecalm
2020-11-09 22:38:34 +01:00
parent f04b08415f
commit 134170ee9b
114 changed files with 11191 additions and 4918 deletions
Download Patch File Download Diff File Expand all files Collapse all files
demo/docs/buttons.html
+29 -28
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-alpha.11
* @version 1.0.0-alpha.12
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -38,7 +38,7 @@
</head>
<body class="antialiased">
<div class="page">
<header class="navbar navbar-expand-md navbar-light">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-menu">
<span class="navbar-toggler-icon"></span>
@@ -163,6 +163,11 @@
Charts
</a>
</li>
<li >
<a class="dropdown-item" href="../charts-heatmap.html" >
Charts heatmap
</a>
</li>
<li >
<a class="dropdown-item" href="../pagination.html" >
Pagination
@@ -173,6 +178,11 @@
Skeleton
</a>
</li>
<li >
<a class="dropdown-item" href="../tabs.html" >
Tabs
</a>
</li>
<li >
<a class="dropdown-item" href="../tables.html" >
Tables
@@ -194,8 +204,13 @@
</a>
</li>
<li >
<a class="dropdown-item" href="../docs-index.html" >
Docs index
<a class="dropdown-item" href="../typography.html" >
Typography
</a>
</li>
<li >
<a class="dropdown-item" href="../markdown.html" >
Markdown
</a>
</li>
<li class="dropright">
@@ -274,6 +289,11 @@
Gallery
</a>
</li>
<li >
<a class="dropdown-item" href="../license.html" >
License
</a>
</li>
<li >
<a class="dropdown-item" href="../profile.html" >
Profile
@@ -389,7 +409,7 @@
<div class="content">
<div class="container-xl">
<!-- Page title -->
<div class="page-header">
<div class="page-header d-print-none">
<div class="row align-items-center">
<div class="col">
<h2 class="page-title">
@@ -621,7 +641,7 @@
<span class="nav-link-icon"><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="7" cy="18" r="2" /><circle cx="7" cy="6" r="2" /><circle cx="17" cy="6" r="2" /><line x1="7" y1="8" x2="7" y2="16" /><path d="M9 18h6a2 2 0 0 0 2 -2v-5" /><polyline points="14 14 17 11 20 14" /></svg>
</span>
Changelog
<span class="badge bg-blue-lt ml-auto">1.0.0-alpha.11</span>
<span class="badge bg-blue-lt ml-auto">1.0.0-alpha.12</span>
</a>
</li>
</ul>
@@ -1084,25 +1104,6 @@
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-sm"</span><span class="nt">&gt;</span>Small button<span class="nt">&lt;/button&gt;</span></code></pre>
</figure>
</div>
<p>You can also add the <code class="language-plaintext highlighter-rouge">.btn-block</code> class to create block level buttons which span the full width of a parent.</p>
<div class="example no_toc_section example-centered">
<div class="example-content">
<div class="btn-list">
<div>
<button type="button" class="btn btn-primary btn-block">Block level button</button>
<button type="button" class="btn btn-block">Block level button</button>
</div>
</div>
</div>
</div>
<div class="example-code">
<figure class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;div&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-primary btn-block"</span><span class="nt">&gt;</span>Block level button<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-block"</span><span class="nt">&gt;</span>Block level button<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
</figure>
</div>
<h2 id="buttons-with-icons">Buttons with icons</h2>
<p>Label your button with text and add an icon to communiacate the action and make it easy to identify for users. Icons are easily recognized and improve the aesthetics of your button design, giving it a modern and atractive look.</p>
<p>Icons can be found <a href="/docs/icons.html#icons"><strong>here</strong></a></p>
@@ -1388,7 +1389,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="M3 12h4l3 8l4 -16l3 8h4" /></svg>
</a>
<a href="javascript:void()" class="btn btn-github btn-icon" aria-label="Button">
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" /></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="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
</a>
<a href="javascript:void()" class="btn btn-success btn-icon" aria-label="Button">
<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="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" /><path d="M9 17v1a3 3 0 0 0 6 0v-1" /></svg>
@@ -1729,7 +1730,7 @@
</div>
</div>
</div>
<footer class="footer footer-transparent">
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ml-lg-auto">
@@ -1747,7 +1748,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="../changelog.html" class="link-secondary">v1.0.0-alpha.11</a>
<a href="../changelog.html" class="link-secondary">v1.0.0-alpha.12</a>
</li>
</ul>
</div>