Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-08-26 04:44:26 +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 85924 additions and 52608 deletions
Download Patch File Download Diff File Expand all files Collapse all files
demo/docs/popover.html
+25 -20
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>
@@ -684,11 +684,11 @@
</ul>
</li>
<li class="nav-item">
<a href="#menu-components" class="nav-link" data-bs-toggle="collapse" aria-expanded="true">
<a href="#menu-components" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
Components
<span class="nav-link-toggle"></span>
</a>
<ul class="nav nav-pills collapse show" id="menu-components">
<ul class="nav nav-pills collapse" id="menu-components">
<li class="nav-item">
<a href="../docs/alerts.html" class="nav-link">
Alerts
@@ -814,13 +814,18 @@
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
</a>
</li>
<li class="nav-item">
<a href="../docs/popover.html" class="nav-link active">
<a href="../docs/popover.html" class="nav-link">
Popover
</a>
</li>
@@ -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,50 +925,50 @@
</a>
</p>
</div>
<p class="mb-4 text-muted">Popovers are used to provide additional information on elements where a simple tooltip is not sufficient.</p>
<p class="h3 fw-normal mb-4 text-muted">Popovers are used to provide additional information on elements where a simple tooltip is not sufficient.</p>
</div>
<h2 id="default-markup">Default markup</h2>
<p>To create a default popover use:</p>
<div class="example no_toc_section">
<div class="example-content">
<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
<button type="button" class="btn" data-bs-toggle="popover" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
</div>
</div>
<div class="example-code">
<figure class="highlight">
<pre><code class="language-html" data-lang="html"><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-lg btn-danger"</span> <span class="na">data-bs-toggle=</span><span class="s">"popover"</span> <span class="na">title=</span><span class="s">"Popover title"</span> <span class="na">data-bs-content=</span><span class="s">"And here's some amazing content. It's very engaging. Right?"</span><span class="nt">&gt;</span>Click to toggle popover<span class="nt">&lt;/button&gt;</span></code></pre>
<pre><code class="language-html" data-lang="html"><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"</span> <span class="na">data-bs-toggle=</span><span class="s">"popover"</span> <span class="na">title=</span><span class="s">"Popover title"</span> <span class="na">data-bs-content=</span><span class="s">"And here's some amazing content. It's very engaging. Right?"</span><span class="nt">&gt;</span>Click to toggle popover<span class="nt">&lt;/button&gt;</span></code></pre>
</figure>
</div>
<h2 id="four-directions">Four directions</h2>
<p>Four options are available: top, right, bottom, and left aligned. Directions are mirrored when using Bootstrap in RTL.</p>
<p>Four options are available: <code class="language-plaintext highlighter-rouge">top</code>, <code class="language-plaintext highlighter-rouge">right</code>, <code class="language-plaintext highlighter-rouge">bottom</code>, and <code class="language-plaintext highlighter-rouge">left</code> aligned. Directions are mirrored when using Bootstrap in RTL.</p>
<div class="example no_toc_section">
<div class="example-content">
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Top popover">
<button type="button" class="btn" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Top popover">
Popover on top
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Right popover">
<button type="button" class="btn" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Right popover">
Popover on right
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Bottom popover">
<button type="button" class="btn" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Bottom popover">
Popover on bottom
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Left popover">
<button type="button" class="btn" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Left popover">
Popover on left
</button>
</div>
</div>
<div class="example-code">
<figure class="highlight">
<pre><code class="language-html" data-lang="html"><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-secondary"</span> <span class="na">data-bs-container=</span><span class="s">"body"</span> <span class="na">data-bs-toggle=</span><span class="s">"popover"</span> <span class="na">data-bs-placement=</span><span class="s">"top"</span> <span class="na">data-bs-content=</span><span class="s">"Top popover"</span><span class="nt">&gt;</span>
<pre><code class="language-html" data-lang="html"><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"</span> <span class="na">data-bs-container=</span><span class="s">"body"</span> <span class="na">data-bs-toggle=</span><span class="s">"popover"</span> <span class="na">data-bs-placement=</span><span class="s">"top"</span> <span class="na">data-bs-content=</span><span class="s">"Top popover"</span><span class="nt">&gt;</span>
Popover on top
<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-secondary"</span> <span class="na">data-bs-container=</span><span class="s">"body"</span> <span class="na">data-bs-toggle=</span><span class="s">"popover"</span> <span class="na">data-bs-placement=</span><span class="s">"right"</span> <span class="na">data-bs-content=</span><span class="s">"Right popover"</span><span class="nt">&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"</span> <span class="na">data-bs-container=</span><span class="s">"body"</span> <span class="na">data-bs-toggle=</span><span class="s">"popover"</span> <span class="na">data-bs-placement=</span><span class="s">"right"</span> <span class="na">data-bs-content=</span><span class="s">"Right popover"</span><span class="nt">&gt;</span>
Popover on right
<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-secondary"</span> <span class="na">data-bs-container=</span><span class="s">"body"</span> <span class="na">data-bs-toggle=</span><span class="s">"popover"</span> <span class="na">data-bs-placement=</span><span class="s">"bottom"</span> <span class="na">data-bs-content=</span><span class="s">"Bottom popover"</span><span class="nt">&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"</span> <span class="na">data-bs-container=</span><span class="s">"body"</span> <span class="na">data-bs-toggle=</span><span class="s">"popover"</span> <span class="na">data-bs-placement=</span><span class="s">"bottom"</span> <span class="na">data-bs-content=</span><span class="s">"Bottom popover"</span><span class="nt">&gt;</span>
Popover on bottom
<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-secondary"</span> <span class="na">data-bs-container=</span><span class="s">"body"</span> <span class="na">data-bs-toggle=</span><span class="s">"popover"</span> <span class="na">data-bs-placement=</span><span class="s">"left"</span> <span class="na">data-bs-content=</span><span class="s">"Left popover"</span><span class="nt">&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"</span> <span class="na">data-bs-container=</span><span class="s">"body"</span> <span class="na">data-bs-toggle=</span><span class="s">"popover"</span> <span class="na">data-bs-placement=</span><span class="s">"left"</span> <span class="na">data-bs-content=</span><span class="s">"Left popover"</span><span class="nt">&gt;</span>
Popover on left
<span class="nt">&lt;/button&gt;</span></code></pre>
</figure>
@@ -1013,7 +1018,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>