1
0
mirror of https://github.com/tabler/tabler.git synced 2025-12-21 17:34:25 +04:00

Release 1.0.0-alpha.11

This commit is contained in:
codecalm
2020-11-07 01:53:22 +01:00
parent 6ee1d90573
commit b998a6bc2c
114 changed files with 12239 additions and 16193 deletions

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.10
* @version 1.0.0-alpha.11
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -361,181 +361,14 @@
</li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
<li class="nav-item">
<a class="nav-link" href="./docs/index.html" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><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="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
</span>
<span class="nav-link-title">
Docs
Documentation
</span>
</a>
<ul class="dropdown-menu dropdown-menu-columns dropdown-menu-columns-3">
<li >
<a class="dropdown-item" href="./docs/index.html" >
Introduction
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/alerts.html" >
Alerts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/autosize.html" >
Autosize
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/avatars.html" >
Avatars
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/badges.html" >
Badges
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/breadcrumb.html" >
Breadcrumb
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/buttons.html" >
Buttons
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/cards.html" >
Cards
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/carousel.html" >
Carousel
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/colors.html" >
Colors
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/cursors.html" >
Cursors
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/charts.html" >
Charts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/dropdowns.html" >
Dropdowns
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/divider.html" >
Divider
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/empty.html" >
Empty states
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/flags.html" >
Flags
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/form-elements.html" >
Form elements
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/form-helpers.html" >
Form helpers
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/input-mask.html" >
Form input mask
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/modals.html" >
Modals
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/progress.html" >
Progress
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/payments.html" >
Payments
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/range-slider.html" >
Range slider
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/ribbons.html" >
Ribbons
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/skeleton.html" >
Skeleton
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/spinners.html" >
Spinners
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/steps.html" >
Steps
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tables.html" >
Tables
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tabs.html" >
Tabs
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/timelines.html" >
Timelines
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/toasts.html" >
Toasts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tooltips.html" >
Tooltips
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/typography.html" >
Typography
</a>
</li>
</ul>
</li>
</ul>
<div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
@@ -575,8 +408,8 @@
<div class="card-body">
<ul>
<li>
<a href="/layout-vertical.html">
layout-vertical.html
<a href="/search-results.html">
search-results.html
</a>
</li>
<li>
@@ -584,21 +417,16 @@
redirects.json
</a>
</li>
<li>
<a href="/docs.html">
redirect.html
</a>
</li>
<li>
<a href="/tables.html">
tables.html
</a>
</li>
<li>
<a href="/skeleton.html">
skeleton.html
</a>
</li>
<li>
<a href="/settings-index.html">
settings-index.html
</a>
</li>
<li>
<a href="/layout-combo.html">
layout-combo.html
@@ -645,8 +473,8 @@
</a>
</li>
<li>
<a href="/search-results.html">
search-results.html
<a href="/skeleton.html">
skeleton.html
</a>
</li>
<li>
@@ -654,6 +482,16 @@
layout-vertical-right.html
</a>
</li>
<li>
<a href="/layout-vertical.html">
layout-vertical.html
</a>
</li>
<li>
<a href="/settings-index.html">
settings-index.html
</a>
</li>
<li>
<a href="/blank.html">
Blank page
@@ -699,11 +537,6 @@
Crypto currencies
</a>
</li>
<li>
<a href="/docs.html">
Documentation
</a>
</li>
<li>
<a href="/dropdowns.html">
Dropdowns
@@ -878,7 +711,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="https://github.com/tabler/tabler/releases" target="_blank" class="link-secondary">v1.0.0-alpha.10</a>
<a href="./changelog.html" class="link-secondary">v1.0.0-alpha.11</a>
</li>
</ul>
</div>

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.10
* @version 1.0.0-alpha.11
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -361,181 +361,14 @@
</li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
<li class="nav-item">
<a class="nav-link" href="./docs/index.html" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><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="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
</span>
<span class="nav-link-title">
Docs
Documentation
</span>
</a>
<ul class="dropdown-menu dropdown-menu-columns dropdown-menu-columns-3">
<li >
<a class="dropdown-item" href="./docs/index.html" >
Introduction
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/alerts.html" >
Alerts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/autosize.html" >
Autosize
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/avatars.html" >
Avatars
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/badges.html" >
Badges
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/breadcrumb.html" >
Breadcrumb
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/buttons.html" >
Buttons
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/cards.html" >
Cards
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/carousel.html" >
Carousel
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/colors.html" >
Colors
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/cursors.html" >
Cursors
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/charts.html" >
Charts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/dropdowns.html" >
Dropdowns
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/divider.html" >
Divider
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/empty.html" >
Empty states
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/flags.html" >
Flags
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/form-elements.html" >
Form elements
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/form-helpers.html" >
Form helpers
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/input-mask.html" >
Form input mask
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/modals.html" >
Modals
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/progress.html" >
Progress
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/payments.html" >
Payments
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/range-slider.html" >
Range slider
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/ribbons.html" >
Ribbons
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/skeleton.html" >
Skeleton
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/spinners.html" >
Spinners
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/steps.html" >
Steps
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tables.html" >
Tables
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tabs.html" >
Tabs
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/timelines.html" >
Timelines
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/toasts.html" >
Toasts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tooltips.html" >
Tooltips
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/typography.html" >
Typography
</a>
</li>
</ul>
</li>
</ul>
<div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
@@ -555,8 +388,7 @@
<div class="content">
<div class="container-xl d-flex flex-column justify-content-center">
<div class="empty">
<div class="empty-icon">
<img src="./static/illustrations/undraw_printing_invoices_5r4r.svg" height="128" class="mb-4" alt="">
<div class="empty-img"><img src="./static/illustrations/undraw_printing_invoices_5r4r.svg" height="128" alt="">
</div>
<p class="empty-title">No results found</p>
<p class="empty-subtitle text-muted">
@@ -588,7 +420,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="https://github.com/tabler/tabler/releases" target="_blank" class="link-secondary">v1.0.0-alpha.10</a>
<a href="./changelog.html" class="link-secondary">v1.0.0-alpha.11</a>
</li>
</ul>
</div>

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.10
* @version 1.0.0-alpha.11
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -361,181 +361,14 @@
</li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
<li class="nav-item">
<a class="nav-link" href="./docs/index.html" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><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="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
</span>
<span class="nav-link-title">
Docs
Documentation
</span>
</a>
<ul class="dropdown-menu dropdown-menu-columns dropdown-menu-columns-3">
<li >
<a class="dropdown-item" href="./docs/index.html" >
Introduction
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/alerts.html" >
Alerts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/autosize.html" >
Autosize
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/avatars.html" >
Avatars
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/badges.html" >
Badges
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/breadcrumb.html" >
Breadcrumb
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/buttons.html" >
Buttons
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/cards.html" >
Cards
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/carousel.html" >
Carousel
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/colors.html" >
Colors
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/cursors.html" >
Cursors
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/charts.html" >
Charts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/dropdowns.html" >
Dropdowns
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/divider.html" >
Divider
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/empty.html" >
Empty states
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/flags.html" >
Flags
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/form-elements.html" >
Form elements
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/form-helpers.html" >
Form helpers
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/input-mask.html" >
Form input mask
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/modals.html" >
Modals
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/progress.html" >
Progress
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/payments.html" >
Payments
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/range-slider.html" >
Range slider
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/ribbons.html" >
Ribbons
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/skeleton.html" >
Skeleton
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/spinners.html" >
Spinners
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/steps.html" >
Steps
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tables.html" >
Tables
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tabs.html" >
Tabs
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/timelines.html" >
Timelines
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/toasts.html" >
Toasts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tooltips.html" >
Tooltips
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/typography.html" >
Typography
</a>
</li>
</ul>
</li>
</ul>
<div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
@@ -1356,7 +1189,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="https://github.com/tabler/tabler/releases" target="_blank" class="link-secondary">v1.0.0-alpha.10</a>
<a href="./changelog.html" class="link-secondary">v1.0.0-alpha.11</a>
</li>
</ul>
</div>

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.10
* @version 1.0.0-alpha.11
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -365,181 +365,14 @@
</li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
<li class="nav-item">
<a class="nav-link" href="./docs/index.html" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><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="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
</span>
<span class="nav-link-title">
Docs
Documentation
</span>
</a>
<ul class="dropdown-menu dropdown-menu-columns dropdown-menu-columns-3">
<li >
<a class="dropdown-item" href="./docs/index.html" >
Introduction
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/alerts.html" >
Alerts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/autosize.html" >
Autosize
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/avatars.html" >
Avatars
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/badges.html" >
Badges
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/breadcrumb.html" >
Breadcrumb
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/buttons.html" >
Buttons
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/cards.html" >
Cards
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/carousel.html" >
Carousel
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/colors.html" >
Colors
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/cursors.html" >
Cursors
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/charts.html" >
Charts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/dropdowns.html" >
Dropdowns
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/divider.html" >
Divider
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/empty.html" >
Empty states
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/flags.html" >
Flags
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/form-elements.html" >
Form elements
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/form-helpers.html" >
Form helpers
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/input-mask.html" >
Form input mask
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/modals.html" >
Modals
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/progress.html" >
Progress
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/payments.html" >
Payments
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/range-slider.html" >
Range slider
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/ribbons.html" >
Ribbons
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/skeleton.html" >
Skeleton
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/spinners.html" >
Spinners
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/steps.html" >
Steps
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tables.html" >
Tables
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tabs.html" >
Tabs
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/timelines.html" >
Timelines
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/toasts.html" >
Toasts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tooltips.html" >
Tooltips
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/typography.html" >
Typography
</a>
</li>
</ul>
</li>
</ul>
<div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
@@ -601,7 +434,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="https://github.com/tabler/tabler/releases" target="_blank" class="link-secondary">v1.0.0-alpha.10</a>
<a href="./changelog.html" class="link-secondary">v1.0.0-alpha.11</a>
</li>
</ul>
</div>

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.10
* @version 1.0.0-alpha.11
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -361,181 +361,14 @@
</li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
<li class="nav-item">
<a class="nav-link" href="./docs/index.html" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><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="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
</span>
<span class="nav-link-title">
Docs
Documentation
</span>
</a>
<ul class="dropdown-menu dropdown-menu-columns dropdown-menu-columns-3">
<li >
<a class="dropdown-item" href="./docs/index.html" >
Introduction
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/alerts.html" >
Alerts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/autosize.html" >
Autosize
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/avatars.html" >
Avatars
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/badges.html" >
Badges
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/breadcrumb.html" >
Breadcrumb
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/buttons.html" >
Buttons
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/cards.html" >
Cards
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/carousel.html" >
Carousel
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/colors.html" >
Colors
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/cursors.html" >
Cursors
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/charts.html" >
Charts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/dropdowns.html" >
Dropdowns
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/divider.html" >
Divider
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/empty.html" >
Empty states
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/flags.html" >
Flags
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/form-elements.html" >
Form elements
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/form-helpers.html" >
Form helpers
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/input-mask.html" >
Form input mask
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/modals.html" >
Modals
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/progress.html" >
Progress
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/payments.html" >
Payments
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/range-slider.html" >
Range slider
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/ribbons.html" >
Ribbons
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/skeleton.html" >
Skeleton
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/spinners.html" >
Spinners
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/steps.html" >
Steps
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tables.html" >
Tables
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tabs.html" >
Tabs
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/timelines.html" >
Timelines
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/toasts.html" >
Toasts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tooltips.html" >
Tooltips
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/typography.html" >
Typography
</a>
</li>
</ul>
</li>
</ul>
<div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
@@ -695,8 +528,7 @@
<div class="col-sm-6 col-lg-4">
<div class="card">
<div class="empty">
<div class="empty-icon">
<img src="./static/illustrations/undraw_quitting_time_dm8t.svg" height="128" class="mb-4" alt="">
<div class="empty-img"><img src="./static/illustrations/undraw_quitting_time_dm8t.svg" height="128" alt="">
</div>
<p class="empty-title">No results found</p>
<p class="empty-subtitle text-muted">
@@ -831,7 +663,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="https://github.com/tabler/tabler/releases" target="_blank" class="link-secondary">v1.0.0-alpha.10</a>
<a href="./changelog.html" class="link-secondary">v1.0.0-alpha.11</a>
</li>
</ul>
</div>

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.10
* @version 1.0.0-alpha.11
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -361,181 +361,14 @@
</li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
<li class="nav-item">
<a class="nav-link" href="./docs/index.html" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><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="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
</span>
<span class="nav-link-title">
Docs
Documentation
</span>
</a>
<ul class="dropdown-menu dropdown-menu-columns dropdown-menu-columns-3">
<li >
<a class="dropdown-item" href="./docs/index.html" >
Introduction
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/alerts.html" >
Alerts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/autosize.html" >
Autosize
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/avatars.html" >
Avatars
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/badges.html" >
Badges
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/breadcrumb.html" >
Breadcrumb
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/buttons.html" >
Buttons
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/cards.html" >
Cards
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/carousel.html" >
Carousel
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/colors.html" >
Colors
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/cursors.html" >
Cursors
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/charts.html" >
Charts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/dropdowns.html" >
Dropdowns
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/divider.html" >
Divider
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/empty.html" >
Empty states
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/flags.html" >
Flags
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/form-elements.html" >
Form elements
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/form-helpers.html" >
Form helpers
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/input-mask.html" >
Form input mask
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/modals.html" >
Modals
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/progress.html" >
Progress
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/payments.html" >
Payments
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/range-slider.html" >
Range slider
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/ribbons.html" >
Ribbons
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/skeleton.html" >
Skeleton
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/spinners.html" >
Spinners
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/steps.html" >
Steps
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tables.html" >
Tables
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tabs.html" >
Tabs
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/timelines.html" >
Timelines
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/toasts.html" >
Toasts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tooltips.html" >
Tooltips
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/typography.html" >
Typography
</a>
</li>
</ul>
</li>
</ul>
<div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
@@ -725,8 +558,7 @@
<div class="col-12">
<div class="card">
<div class="empty">
<div class="empty-icon">
<img src="./static/illustrations/undraw_quitting_time_dm8t.svg" height="128" class="mb-4" alt="">
<div class="empty-img"><img src="./static/illustrations/undraw_quitting_time_dm8t.svg" height="128" alt="">
</div>
<p class="empty-title">No results found</p>
<p class="empty-subtitle text-muted">
@@ -1119,7 +951,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="https://github.com/tabler/tabler/releases" target="_blank" class="link-secondary">v1.0.0-alpha.10</a>
<a href="./changelog.html" class="link-secondary">v1.0.0-alpha.11</a>
</li>
</ul>
</div>

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.10
* @version 1.0.0-alpha.11
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -361,181 +361,14 @@
</li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
<li class="nav-item">
<a class="nav-link" href="./docs/index.html" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><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="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
</span>
<span class="nav-link-title">
Docs
Documentation
</span>
</a>
<ul class="dropdown-menu dropdown-menu-columns dropdown-menu-columns-3">
<li >
<a class="dropdown-item" href="./docs/index.html" >
Introduction
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/alerts.html" >
Alerts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/autosize.html" >
Autosize
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/avatars.html" >
Avatars
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/badges.html" >
Badges
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/breadcrumb.html" >
Breadcrumb
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/buttons.html" >
Buttons
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/cards.html" >
Cards
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/carousel.html" >
Carousel
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/colors.html" >
Colors
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/cursors.html" >
Cursors
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/charts.html" >
Charts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/dropdowns.html" >
Dropdowns
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/divider.html" >
Divider
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/empty.html" >
Empty states
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/flags.html" >
Flags
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/form-elements.html" >
Form elements
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/form-helpers.html" >
Form helpers
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/input-mask.html" >
Form input mask
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/modals.html" >
Modals
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/progress.html" >
Progress
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/payments.html" >
Payments
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/range-slider.html" >
Range slider
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/ribbons.html" >
Ribbons
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/skeleton.html" >
Skeleton
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/spinners.html" >
Spinners
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/steps.html" >
Steps
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tables.html" >
Tables
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tabs.html" >
Tabs
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/timelines.html" >
Timelines
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/toasts.html" >
Toasts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tooltips.html" >
Tooltips
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/typography.html" >
Typography
</a>
</li>
</ul>
</li>
</ul>
<div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
@@ -745,7 +578,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="https://github.com/tabler/tabler/releases" target="_blank" class="link-secondary">v1.0.0-alpha.10</a>
<a href="./changelog.html" class="link-secondary">v1.0.0-alpha.11</a>
</li>
</ul>
</div>

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.10
* @version 1.0.0-alpha.11
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -361,181 +361,14 @@
</li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
<li class="nav-item active">
<a class="nav-link" href="./docs/index.html" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><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="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
</span>
<span class="nav-link-title">
Docs
Documentation
</span>
</a>
<ul class="dropdown-menu dropdown-menu-columns dropdown-menu-columns-3">
<li >
<a class="dropdown-item" href="./docs/index.html" >
Introduction
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/alerts.html" >
Alerts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/autosize.html" >
Autosize
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/avatars.html" >
Avatars
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/badges.html" >
Badges
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/breadcrumb.html" >
Breadcrumb
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/buttons.html" >
Buttons
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/cards.html" >
Cards
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/carousel.html" >
Carousel
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/colors.html" >
Colors
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/cursors.html" >
Cursors
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/charts.html" >
Charts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/dropdowns.html" >
Dropdowns
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/divider.html" >
Divider
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/empty.html" >
Empty states
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/flags.html" >
Flags
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/form-elements.html" >
Form elements
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/form-helpers.html" >
Form helpers
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/input-mask.html" >
Form input mask
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/modals.html" >
Modals
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/progress.html" >
Progress
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/payments.html" >
Payments
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/range-slider.html" >
Range slider
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/ribbons.html" >
Ribbons
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/skeleton.html" >
Skeleton
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/spinners.html" >
Spinners
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/steps.html" >
Steps
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tables.html" >
Tables
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tabs.html" >
Tabs
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/timelines.html" >
Timelines
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/toasts.html" >
Toasts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tooltips.html" >
Tooltips
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/typography.html" >
Typography
</a>
</li>
</ul>
</li>
</ul>
<div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
@@ -559,13 +392,251 @@
<div class="row align-items-center">
<div class="col">
<h2 class="page-title">
Changelog
Documentation
</h2>
</div>
</div>
</div>
<div class="card card-lg">
<div class="card-body markdown">
<div class="row g-5">
<div class="d-none d-lg-block col-lg-3">
<ul class="nav nav-pills nav-vertical">
<li class="nav-item">
<a href="#menu-base" class="nav-link" data-toggle="collapse" aria-expanded="false">
<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"/><path d="M8 9l3 3l-3 3" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
</span>
Getting started
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-base">
<li class="nav-item">
<a href="./docs/index.html" class="nav-link">
Introduction
</a>
</li>
<li class="nav-item">
<a href="./docs/colors.html" class="nav-link">
Colors
</a>
</li>
<li class="nav-item">
<a href="./docs/typography.html" class="nav-link">
Typography
</a>
</li>
<li class="nav-item">
<a href="./docs/icons.html" class="nav-link">
Icons
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#menu-components" class="nav-link" data-toggle="collapse" aria-expanded="false">
<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"/><path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>
</span>
Components
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-components">
<li class="nav-item">
<a href="./docs/alerts.html" class="nav-link">
Alerts
</a>
</li>
<li class="nav-item">
<a href="./docs/avatars.html" class="nav-link">
Avatars
</a>
</li>
<li class="nav-item">
<a href="./docs/badges.html" class="nav-link">
Badges
</a>
</li>
<li class="nav-item">
<a href="./docs/breadcrumb.html" class="nav-link">
Breadcrumb
</a>
</li>
<li class="nav-item">
<a href="./docs/buttons.html" class="nav-link">
Buttons
</a>
</li>
<li class="nav-item">
<a href="./docs/cards.html" class="nav-link">
Cards
</a>
</li>
<li class="nav-item">
<a href="./docs/carousel.html" class="nav-link">
Carousel
</a>
</li>
<li class="nav-item">
<a href="./docs/dropdowns.html" class="nav-link">
Dropdowns
</a>
</li>
<li class="nav-item">
<a href="./docs/divider.html" class="nav-link">
Divider
</a>
</li>
<li class="nav-item">
<a href="./docs/empty.html" class="nav-link">
Empty states
</a>
</li>
<li class="nav-item">
<a href="./docs/form-elements.html" class="nav-link">
Form elements
</a>
</li>
<li class="nav-item">
<a href="./docs/form-helpers.html" class="nav-link">
Form helpers
</a>
</li>
<li class="nav-item">
<a href="./docs/modals.html" class="nav-link">
Modals
</a>
</li>
<li class="nav-item">
<a href="./docs/progress.html" class="nav-link">
Progress
</a>
</li>
<li class="nav-item">
<a href="./docs/payments.html" class="nav-link">
Payments
</a>
</li>
<li class="nav-item">
<a href="./docs/range-slider.html" class="nav-link">
Range slider
</a>
</li>
<li class="nav-item">
<a href="./docs/ribbons.html" class="nav-link">
Ribbons
</a>
</li>
<li class="nav-item">
<a href="./docs/skeleton.html" class="nav-link">
Skeleton
</a>
</li>
<li class="nav-item">
<a href="./docs/spinners.html" class="nav-link">
Spinners
</a>
</li>
<li class="nav-item">
<a href="./docs/steps.html" class="nav-link">
Steps
</a>
</li>
<li class="nav-item">
<a href="./docs/switch-icon.html" class="nav-link">
Switch icon
</a>
</li>
<li class="nav-item">
<a href="./docs/tables.html" class="nav-link">
Tables
</a>
</li>
<li class="nav-item">
<a href="./docs/tabs.html" class="nav-link">
Tabs
</a>
</li>
<li class="nav-item">
<a href="./docs/timelines.html" class="nav-link">
Timelines
</a>
</li>
<li class="nav-item">
<a href="./docs/toasts.html" class="nav-link">
Toasts
</a>
</li>
<li class="nav-item">
<a href="./docs/tooltips.html" class="nav-link">
Tooltips
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#menu-utils" class="nav-link" data-toggle="collapse" aria-expanded="false">
<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"/><path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z" /></svg>
</span>
Utilities
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-utils">
<li class="nav-item">
<a href="./docs/cursors.html" class="nav-link">
Cursors
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#menu-plugins" class="nav-link" data-toggle="collapse" aria-expanded="false">
<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"/><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><rect x="14" y="14" width="6" height="6" rx="1" /><line x1="14" y1="7" x2="20" y2="7" /><line x1="17" y1="4" x2="17" y2="10" /></svg>
</span>
Plugins
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-plugins">
<li class="nav-item">
<a href="./docs/autosize.html" class="nav-link">
Autosize
</a>
</li>
<li class="nav-item">
<a href="./docs/input-mask.html" class="nav-link">
Form input mask
</a>
</li>
<li class="nav-item">
<a href="./docs/flags.html" class="nav-link">
Flags
</a>
</li>
<li class="nav-item">
<a href="./docs/charts.html" class="nav-link">
Charts
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="./changelog.html" class="nav-link active">
<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>
</a>
</li>
</ul>
</div>
<div class="col-lg-9">
<div class="card card-lg">
<div class="card-body">
<div class="markdown">
<div class="mb-5">
<div class="d-flex mb-3">
<h1 class="mt-0">Changelog</h1>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@@ -587,7 +658,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="https://github.com/tabler/tabler/releases" target="_blank" class="link-secondary">v1.0.0-alpha.10</a>
<a href="./changelog.html" class="link-secondary">v1.0.0-alpha.11</a>
</li>
</ul>
</div>

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.10
* @version 1.0.0-alpha.11
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -361,181 +361,14 @@
</li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
<li class="nav-item">
<a class="nav-link" href="./docs/index.html" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><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="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
</span>
<span class="nav-link-title">
Docs
Documentation
</span>
</a>
<ul class="dropdown-menu dropdown-menu-columns dropdown-menu-columns-3">
<li >
<a class="dropdown-item" href="./docs/index.html" >
Introduction
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/alerts.html" >
Alerts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/autosize.html" >
Autosize
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/avatars.html" >
Avatars
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/badges.html" >
Badges
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/breadcrumb.html" >
Breadcrumb
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/buttons.html" >
Buttons
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/cards.html" >
Cards
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/carousel.html" >
Carousel
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/colors.html" >
Colors
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/cursors.html" >
Cursors
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/charts.html" >
Charts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/dropdowns.html" >
Dropdowns
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/divider.html" >
Divider
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/empty.html" >
Empty states
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/flags.html" >
Flags
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/form-elements.html" >
Form elements
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/form-helpers.html" >
Form helpers
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/input-mask.html" >
Form input mask
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/modals.html" >
Modals
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/progress.html" >
Progress
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/payments.html" >
Payments
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/range-slider.html" >
Range slider
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/ribbons.html" >
Ribbons
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/skeleton.html" >
Skeleton
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/spinners.html" >
Spinners
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/steps.html" >
Steps
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tables.html" >
Tables
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tabs.html" >
Tabs
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/timelines.html" >
Timelines
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/toasts.html" >
Toasts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tooltips.html" >
Tooltips
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/typography.html" >
Typography
</a>
</li>
</ul>
</li>
</ul>
<div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
@@ -768,7 +601,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="https://github.com/tabler/tabler/releases" target="_blank" class="link-secondary">v1.0.0-alpha.10</a>
<a href="./changelog.html" class="link-secondary">v1.0.0-alpha.11</a>
</li>
</ul>
</div>

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.10
* @version 1.0.0-alpha.11
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -361,181 +361,14 @@
</li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
<li class="nav-item">
<a class="nav-link" href="./docs/index.html" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><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="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
</span>
<span class="nav-link-title">
Docs
Documentation
</span>
</a>
<ul class="dropdown-menu dropdown-menu-columns dropdown-menu-columns-3">
<li >
<a class="dropdown-item" href="./docs/index.html" >
Introduction
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/alerts.html" >
Alerts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/autosize.html" >
Autosize
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/avatars.html" >
Avatars
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/badges.html" >
Badges
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/breadcrumb.html" >
Breadcrumb
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/buttons.html" >
Buttons
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/cards.html" >
Cards
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/carousel.html" >
Carousel
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/colors.html" >
Colors
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/cursors.html" >
Cursors
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/charts.html" >
Charts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/dropdowns.html" >
Dropdowns
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/divider.html" >
Divider
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/empty.html" >
Empty states
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/flags.html" >
Flags
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/form-elements.html" >
Form elements
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/form-helpers.html" >
Form helpers
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/input-mask.html" >
Form input mask
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/modals.html" >
Modals
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/progress.html" >
Progress
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/payments.html" >
Payments
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/range-slider.html" >
Range slider
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/ribbons.html" >
Ribbons
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/skeleton.html" >
Skeleton
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/spinners.html" >
Spinners
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/steps.html" >
Steps
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tables.html" >
Tables
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tabs.html" >
Tabs
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/timelines.html" >
Timelines
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/toasts.html" >
Toasts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tooltips.html" >
Tooltips
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/typography.html" >
Typography
</a>
</li>
</ul>
</li>
</ul>
<div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
@@ -762,7 +595,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="https://github.com/tabler/tabler/releases" target="_blank" class="link-secondary">v1.0.0-alpha.10</a>
<a href="./changelog.html" class="link-secondary">v1.0.0-alpha.11</a>
</li>
</ul>
</div>

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.10
* @version 1.0.0-alpha.11
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -361,181 +361,14 @@
</li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
<li class="nav-item">
<a class="nav-link" href="./docs/index.html" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><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="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
</span>
<span class="nav-link-title">
Docs
Documentation
</span>
</a>
<ul class="dropdown-menu dropdown-menu-columns dropdown-menu-columns-3">
<li >
<a class="dropdown-item" href="./docs/index.html" >
Introduction
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/alerts.html" >
Alerts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/autosize.html" >
Autosize
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/avatars.html" >
Avatars
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/badges.html" >
Badges
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/breadcrumb.html" >
Breadcrumb
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/buttons.html" >
Buttons
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/cards.html" >
Cards
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/carousel.html" >
Carousel
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/colors.html" >
Colors
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/cursors.html" >
Cursors
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/charts.html" >
Charts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/dropdowns.html" >
Dropdowns
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/divider.html" >
Divider
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/empty.html" >
Empty states
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/flags.html" >
Flags
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/form-elements.html" >
Form elements
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/form-helpers.html" >
Form helpers
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/input-mask.html" >
Form input mask
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/modals.html" >
Modals
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/progress.html" >
Progress
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/payments.html" >
Payments
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/range-slider.html" >
Range slider
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/ribbons.html" >
Ribbons
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/skeleton.html" >
Skeleton
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/spinners.html" >
Spinners
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/steps.html" >
Steps
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tables.html" >
Tables
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tabs.html" >
Tabs
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/timelines.html" >
Timelines
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/toasts.html" >
Toasts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tooltips.html" >
Tooltips
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/typography.html" >
Typography
</a>
</li>
</ul>
</li>
</ul>
<div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
@@ -1799,7 +1632,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="https://github.com/tabler/tabler/releases" target="_blank" class="link-secondary">v1.0.0-alpha.10</a>
<a href="./changelog.html" class="link-secondary">v1.0.0-alpha.11</a>
</li>
</ul>
</div>

194
demo/dist/css/demo.css vendored
View File

@@ -1,6 +1,6 @@
/*!
* Tabler v1.0.0-alpha.10 (https://tabler.io)
* @version 1.0.0-alpha.10
* Tabler v1.0.0-alpha.11 (https://tabler.io)
* @version 1.0.0-alpha.11
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -12,9 +12,7 @@ pre.highlight,
margin: 1.5rem 0;
overflow: auto;
font-size: 85.7142857%;
background: #232e3c;
border-radius: 3px;
color: #ffffff; }
border-radius: 3px; }
pre.highlight::-webkit-scrollbar,
.highlight pre::-webkit-scrollbar {
width: 6px;
@@ -24,32 +22,159 @@ pre.highlight,
pre.highlight::-webkit-scrollbar-thumb,
.highlight pre::-webkit-scrollbar-thumb {
border-radius: 5px;
background: transparent; }
background: #dbdee3; }
pre.highlight::-webkit-scrollbar-corner,
.highlight pre::-webkit-scrollbar-corner {
background: transparent; }
pre.highlight:hover::-webkit-scrollbar-thumb,
.highlight pre:hover::-webkit-scrollbar-thumb {
background: #c4c8cf;
background: #4f5863; }
background: #c6cad0;
background: #c6cad0; }
.highlight .c, .highlight .c1 {
color: #a0aec0; }
.highlight .na, .highlight .nx, .highlight .nl, .language-css .highlight .na, .language-scss .highlight .na {
color: #ffe484; }
.highlight .s, .highlight .dl, .highlight .s1, .highlight .s2, .highlight .mh {
color: #b5f4a5; }
.highlight .mi, .highlight .language-js .nb, .highlight .nc, .highlight .nd, .highlight .nt {
color: #93ddfd; }
.highlight .language-html .nt, .highlight .nb {
color: #ff8383; }
.highlight .k, .highlight .kd, .highlight .nv, .highlight .n {
color: #d9a9ff; }
.highlight {
margin: 0; }
.highlight .dl {
color: #4070a0; }
.highlight .c {
color: #727272; }
.highlight .c1 {
color: #727272; }
.highlight .ch {
font-style: italic;
color: #60a0b0; }
.highlight .cm {
color: #727272; }
.highlight .cp {
color: #008085; }
.highlight .cpf {
color: #007020; }
.highlight .cs {
color: #727272; }
.highlight .gd {
background-color: #fcc;
border: 1px solid #c00; }
.highlight .ge {
font-style: italic; }
.highlight .gh {
color: #030; }
.highlight .gi {
background-color: #cfc;
border: 1px solid #0c0; }
.highlight .gl {
text-decoration: underline; }
.highlight .go {
color: #aaa; }
.highlight .gp {
color: #009; }
.highlight .gr {
color: #f00; }
.highlight .gs {
font-weight: 700; }
.highlight .gt {
color: #9c6; }
.highlight .gu {
color: #030; }
.highlight .il {
color: #c24f19; }
.highlight .k {
color: #069; }
.highlight .kc {
color: #069; }
.highlight .kd {
color: #069; }
.highlight .kn {
color: #069; }
.highlight .kp {
color: #069; }
.highlight .kr {
color: #069; }
.highlight .kt {
color: #078; }
.highlight .m {
color: #c24f19; }
.highlight .mf {
color: #c24f19; }
.highlight .mb {
color: #40a070; }
.highlight .mh {
color: #c24f19; }
.highlight .mi {
color: #c24f19; }
.highlight .mo {
color: #c24f19; }
.highlight .na {
color: #006ee0; }
.highlight .nb {
color: #366; }
.highlight .nc {
color: #168174; }
.highlight .nd {
color: #6b62de; }
.highlight .ne {
color: #c00; }
.highlight .nf {
color: #b715f4; }
.highlight .ni {
color: #727272; }
.highlight .nl {
color: #6b62de; }
.highlight .nn {
color: #007ca5; }
.highlight .no {
color: #360; }
.highlight .nt {
color: #2f6f9f; }
.highlight .nv {
color: #033; }
.highlight .o {
color: #555; }
.highlight .ow {
color: #000; }
.highlight .s {
color: #d73038; }
.highlight .s1 {
color: #c30; }
.highlight .s2 {
color: #c30; }
.highlight .sa {
color: #4070a0; }
.highlight .sb {
color: #c30; }
.highlight .sc {
color: #c30; }
.highlight .sd {
font-style: italic;
color: #c30; }
.highlight .se {
color: #c30; }
.highlight .sh {
color: #c30; }
.highlight .si {
color: #a00; }
.highlight .sr {
color: #337e7e; }
.highlight .ss {
color: #fc3; }
.highlight .sx {
color: #c30; }
.highlight .w {
color: #bbb; }
.highlight .language-bash::before, .highlight .language-sh::before {
color: #009;
content: "$ ";
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none; }
.highlight .language-bash .m, .highlight .language-sh .m {
color: inherit; }
.highlight .language-powershell::before {
color: #009;
content: "PM> ";
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none; }
.example {
padding: 2rem;
@@ -69,14 +194,17 @@ pre.highlight,
.example-content {
font-size: 0.875rem;
line-height: 1.4285714;
color: #232e3c;
flex: 1;
max-width: 100%; }
.example-bg {
background: #f1f4f8; }
background: #f4f6fa; }
.example-code {
margin: 2rem 0;
border: 1px solid #e8e9ea;
border-top: none; }
.example-code pre {
margin: 0;
@@ -123,13 +251,6 @@ pre.highlight,
body.no-transitions * {
transition: none !important; }
.toc-entry:before {
content: '- '; }
.toc-entry ul {
list-style: none;
padding-left: 1rem; }
.dropdown-menu-demo {
display: inline-block;
width: 100%;
@@ -148,3 +269,10 @@ body.no-transitions * {
max-width: 15rem;
margin: 0 auto;
display: block; }
.demo-dividers > p {
opacity: .2;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none; }

View File

@@ -1,9 +1,9 @@
/*!
* Tabler v1.0.0-alpha.10 (https://tabler.io)
* @version 1.0.0-alpha.10
* Tabler v1.0.0-alpha.11 (https://tabler.io)
* @version 1.0.0-alpha.11
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
*/
.highlight pre,pre.highlight{max-height:30rem;margin:1.5rem 0;overflow:auto;font-size:85.7142857%;background:#232e3c;border-radius:3px;color:#fff}.highlight pre::-webkit-scrollbar,pre.highlight::-webkit-scrollbar{width:6px;height:6px;-webkit-transition:.3s background;transition:.3s background}.highlight pre::-webkit-scrollbar-thumb,pre.highlight::-webkit-scrollbar-thumb{border-radius:5px;background:0 0}.highlight pre::-webkit-scrollbar-corner,pre.highlight::-webkit-scrollbar-corner{background:0 0}.highlight pre:hover::-webkit-scrollbar-thumb,pre.highlight:hover::-webkit-scrollbar-thumb{background:#c4c8cf;background:#4f5863}.highlight .c,.highlight .c1{color:#a0aec0}.highlight .na,.highlight .nl,.highlight .nx,.language-css .highlight .na,.language-scss .highlight .na{color:#ffe484}.highlight .dl,.highlight .mh,.highlight .s,.highlight .s1,.highlight .s2{color:#b5f4a5}.highlight .language-js .nb,.highlight .mi,.highlight .nc,.highlight .nd,.highlight .nt{color:#93ddfd}.highlight .language-html .nt,.highlight .nb{color:#ff8383}.highlight .k,.highlight .kd,.highlight .n,.highlight .nv{color:#d9a9ff}.example{padding:2rem;margin:2rem 0;border:1px solid #e8e9ea;border-radius:3px 3px 0 0;position:relative;min-height:12rem;display:flex;align-items:center;overflow-x:auto}.example-centered{justify-content:center}.example-centered .example-content{flex:0 auto}.example-content{font-size:.875rem;flex:1;max-width:100%}.example-bg{background:#f1f4f8}.example-code{margin:2rem 0;border-top:none}.example-code pre{margin:0;border-radius:0 0 3px 3px}.example+.example-code{margin-top:-2rem}.example-column{margin:0 auto}.example-column>.card:last-of-type{margin-bottom:0}.example-column-1{max-width:26rem}.example-column-2{max-width:52rem}.example-modal-backdrop{background:#232e3c;opacity:.24;position:absolute;width:100%;left:0;top:0;height:100%;border-radius:2px 2px 0 0}@media not print{.theme-dark .example-code{border:1px solid #e8e9ea;border-top:none}}@media not print and (prefers-color-scheme:dark){.theme-dark-auto .example-code{border:1px solid #e8e9ea;border-top:none}}.card-sponsor{background:#dbe7f6 no-repeat center/100% 100%;border-color:#548ed2;min-height:316px}body.no-transitions *{transition:none!important}.toc-entry:before{content:'- '}.toc-entry ul{list-style:none;padding-left:1rem}.dropdown-menu-demo{display:inline-block;width:100%;position:relative;top:0;margin-bottom:1rem}.demo-icon-preview{position:-webkit-sticky;position:sticky;top:0}.demo-icon-preview svg{width:100%;height:auto;stroke-width:1.5;max-width:15rem;margin:0 auto;display:block}
.highlight pre,pre.highlight{max-height:30rem;margin:1.5rem 0;overflow:auto;font-size:85.7142857%;border-radius:3px}.highlight pre::-webkit-scrollbar,pre.highlight::-webkit-scrollbar{width:6px;height:6px;-webkit-transition:.3s background;transition:.3s background}.highlight pre::-webkit-scrollbar-thumb,pre.highlight::-webkit-scrollbar-thumb{border-radius:5px;background:#dbdee3}.highlight pre::-webkit-scrollbar-corner,pre.highlight::-webkit-scrollbar-corner{background:0 0}.highlight pre:hover::-webkit-scrollbar-thumb,pre.highlight:hover::-webkit-scrollbar-thumb{background:#c6cad0;background:#c6cad0}.highlight{margin:0}.highlight .dl{color:#4070a0}.highlight .c{color:#727272}.highlight .c1{color:#727272}.highlight .ch{font-style:italic;color:#60a0b0}.highlight .cm{color:#727272}.highlight .cp{color:#008085}.highlight .cpf{color:#007020}.highlight .cs{color:#727272}.highlight .gd{background-color:#fcc;border:1px solid #c00}.highlight .ge{font-style:italic}.highlight .gh{color:#030}.highlight .gi{background-color:#cfc;border:1px solid #0c0}.highlight .gl{text-decoration:underline}.highlight .go{color:#aaa}.highlight .gp{color:#009}.highlight .gr{color:red}.highlight .gs{font-weight:700}.highlight .gt{color:#9c6}.highlight .gu{color:#030}.highlight .il{color:#c24f19}.highlight .k{color:#069}.highlight .kc{color:#069}.highlight .kd{color:#069}.highlight .kn{color:#069}.highlight .kp{color:#069}.highlight .kr{color:#069}.highlight .kt{color:#078}.highlight .m{color:#c24f19}.highlight .mf{color:#c24f19}.highlight .mb{color:#40a070}.highlight .mh{color:#c24f19}.highlight .mi{color:#c24f19}.highlight .mo{color:#c24f19}.highlight .na{color:#006ee0}.highlight .nb{color:#366}.highlight .nc{color:#168174}.highlight .nd{color:#6b62de}.highlight .ne{color:#c00}.highlight .nf{color:#b715f4}.highlight .ni{color:#727272}.highlight .nl{color:#6b62de}.highlight .nn{color:#007ca5}.highlight .no{color:#360}.highlight .nt{color:#2f6f9f}.highlight .nv{color:#033}.highlight .o{color:#555}.highlight .ow{color:#000}.highlight .s{color:#d73038}.highlight .s1{color:#c30}.highlight .s2{color:#c30}.highlight .sa{color:#4070a0}.highlight .sb{color:#c30}.highlight .sc{color:#c30}.highlight .sd{font-style:italic;color:#c30}.highlight .se{color:#c30}.highlight .sh{color:#c30}.highlight .si{color:#a00}.highlight .sr{color:#337e7e}.highlight .ss{color:#fc3}.highlight .sx{color:#c30}.highlight .w{color:#bbb}.highlight .language-bash::before,.highlight .language-sh::before{color:#009;content:"$ ";-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.highlight .language-bash .m,.highlight .language-sh .m{color:inherit}.highlight .language-powershell::before{color:#009;content:"PM> ";-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.example{padding:2rem;margin:2rem 0;border:1px solid #e8e9ea;border-radius:3px 3px 0 0;position:relative;min-height:12rem;display:flex;align-items:center;overflow-x:auto}.example-centered{justify-content:center}.example-centered .example-content{flex:0 auto}.example-content{font-size:.875rem;line-height:1.4285714;color:#232e3c;flex:1;max-width:100%}.example-bg{background:#f4f6fa}.example-code{margin:2rem 0;border:1px solid #e8e9ea;border-top:none}.example-code pre{margin:0;border-radius:0 0 3px 3px}.example+.example-code{margin-top:-2rem}.example-column{margin:0 auto}.example-column>.card:last-of-type{margin-bottom:0}.example-column-1{max-width:26rem}.example-column-2{max-width:52rem}.example-modal-backdrop{background:#232e3c;opacity:.24;position:absolute;width:100%;left:0;top:0;height:100%;border-radius:2px 2px 0 0}@media not print{.theme-dark .example-code{border:1px solid #e8e9ea;border-top:none}}@media not print and (prefers-color-scheme:dark){.theme-dark-auto .example-code{border:1px solid #e8e9ea;border-top:none}}.card-sponsor{background:#dbe7f6 no-repeat center/100% 100%;border-color:#548ed2;min-height:316px}body.no-transitions *{transition:none!important}.dropdown-menu-demo{display:inline-block;width:100%;position:relative;top:0;margin-bottom:1rem}.demo-icon-preview{position:-webkit-sticky;position:sticky;top:0}.demo-icon-preview svg{width:100%;height:auto;stroke-width:1.5;max-width:15rem;margin:0 auto;display:block}.demo-dividers>p{opacity:.2;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}

View File

@@ -1,6 +1,6 @@
/*!
* Tabler v1.0.0-alpha.10 (https://tabler.io)
* @version 1.0.0-alpha.10
* Tabler v1.0.0-alpha.11 (https://tabler.io)
* @version 1.0.0-alpha.11
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna

View File

@@ -1,6 +1,6 @@
/*!
* Tabler v1.0.0-alpha.10 (https://tabler.io)
* @version 1.0.0-alpha.10
* Tabler v1.0.0-alpha.11 (https://tabler.io)
* @version 1.0.0-alpha.11
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna

View File

@@ -1,6 +1,6 @@
/*!
* Tabler v1.0.0-alpha.10 (https://tabler.io)
* @version 1.0.0-alpha.10
* Tabler v1.0.0-alpha.11 (https://tabler.io)
* @version 1.0.0-alpha.11
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna

View File

@@ -1,6 +1,6 @@
/*!
* Tabler v1.0.0-alpha.10 (https://tabler.io)
* @version 1.0.0-alpha.10
* Tabler v1.0.0-alpha.11 (https://tabler.io)
* @version 1.0.0-alpha.11
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

View File

@@ -1,6 +1,6 @@
/*!
* Tabler v1.0.0-alpha.10 (https://tabler.io)
* @version 1.0.0-alpha.10
* Tabler v1.0.0-alpha.11 (https://tabler.io)
* @version 1.0.0-alpha.11
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -3056,6 +3056,26 @@
});
});
var selectors = '.dropdown, .dropup, .dropright, .dropleft',
dropdowns = document.querySelectorAll(selectors);
var currentTarget = undefined;
dropdowns.forEach(function (dropdown) {
dropdown.addEventListener('mousedown', function (e) {
e.stopPropagation();
if (e.target.dataset.toggle && e.target.dataset.toggle === 'dropdown') {
currentTarget = e.currentTarget;
}
});
dropdown.addEventListener('hide.bs.dropdown', function (e) {
e.stopPropagation();
var parent = currentTarget ? currentTarget.parentElement.closest(selectors) : undefined;
if (parent && parent === dropdown) {
e.preventDefault();
}
currentTarget = undefined;
});
});
(function () {
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-toggle="tooltip"]'));
tooltipTriggerList.map(function (tooltipTriggerEl) {
@@ -3085,6 +3105,13 @@
dropdownTriggerList.map(function (dropdownTriggerEl) {
return new bootstrap.Dropdown(dropdownTriggerEl);
});
var switchesTriggerList = [].slice.call(document.querySelectorAll('[data-toggle="switch-icon"]'));
switchesTriggerList.map(function (switchTriggerEl) {
switchTriggerEl.addEventListener('click', function (e) {
e.stopPropagation();
switchTriggerEl.classList.toggle('active');
});
});
})();
})));

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

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.10
* @version 1.0.0-alpha.11
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -362,181 +362,14 @@
</li>
</ul>
</li>
<li class="nav-item active dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
<li class="nav-item active">
<a class="nav-link" href="../docs/index.html" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><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="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
</span>
<span class="nav-link-title">
Docs
Documentation
</span>
</a>
<ul class="dropdown-menu dropdown-menu-columns dropdown-menu-columns-3">
<li >
<a class="dropdown-item" href="../docs/index.html" >
Introduction
</a>
</li>
<li >
<a class="dropdown-item active" href="../docs/alerts.html" >
Alerts
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/autosize.html" >
Autosize
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/avatars.html" >
Avatars
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/badges.html" >
Badges
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/breadcrumb.html" >
Breadcrumb
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/buttons.html" >
Buttons
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/cards.html" >
Cards
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/carousel.html" >
Carousel
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/colors.html" >
Colors
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/cursors.html" >
Cursors
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/charts.html" >
Charts
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/dropdowns.html" >
Dropdowns
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/divider.html" >
Divider
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/empty.html" >
Empty states
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/flags.html" >
Flags
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/form-elements.html" >
Form elements
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/form-helpers.html" >
Form helpers
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/input-mask.html" >
Form input mask
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/modals.html" >
Modals
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/progress.html" >
Progress
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/payments.html" >
Payments
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/range-slider.html" >
Range slider
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/ribbons.html" >
Ribbons
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/skeleton.html" >
Skeleton
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/spinners.html" >
Spinners
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/steps.html" >
Steps
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/tables.html" >
Tables
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/tabs.html" >
Tabs
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/timelines.html" >
Timelines
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/toasts.html" >
Toasts
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/tooltips.html" >
Tooltips
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/typography.html" >
Typography
</a>
</li>
</ul>
</li>
</ul>
<div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
@@ -565,38 +398,250 @@
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="d-none d-lg-block col-lg-3 order-lg-1 mb-4">
<div class="sticky-top lh-lg py-4">
<a href="https://github.com/tabler/tabler" class="btn btn-white mb-6 btn-block" target="_blank" rel="noreferrer">
<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>
Browse source code
</a>
<h5 class="subheader">On this page</h5>
<ul class="list-unstyled">
<li class="toc-entry toc-h2"><a href="#default-markup">Default markup</a></li>
<li class="toc-entry toc-h2"><a href="#alert-links">Alert links</a></li>
<li class="toc-entry toc-h2"><a href="#dismissible-alerts">Dismissible alerts</a></li>
<li class="toc-entry toc-h2"><a href="#alerts-with-icons">Alerts with icons</a></li>
<li class="toc-entry toc-h2"><a href="#alert-with-avatar">Alert with avatar</a></li>
<li class="toc-entry toc-h2"><a href="#alert-with-buttons">Alert with buttons</a></li>
</ul>
</div>
<div class="row g-5">
<div class="d-none d-lg-block col-lg-3">
<ul class="nav nav-pills nav-vertical">
<li class="nav-item">
<a href="#menu-base" class="nav-link" data-toggle="collapse" aria-expanded="false">
<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"/><path d="M8 9l3 3l-3 3" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
</span>
Getting started
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-base">
<li class="nav-item">
<a href="../docs/index.html" class="nav-link">
Introduction
</a>
</li>
<li class="nav-item">
<a href="../docs/colors.html" class="nav-link">
Colors
</a>
</li>
<li class="nav-item">
<a href="../docs/typography.html" class="nav-link">
Typography
</a>
</li>
<li class="nav-item">
<a href="../docs/icons.html" class="nav-link">
Icons
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#menu-components" class="nav-link" data-toggle="collapse" aria-expanded="true">
<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"/><path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>
</span>
Components
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse show" id="menu-components">
<li class="nav-item">
<a href="../docs/alerts.html" class="nav-link active">
Alerts
</a>
</li>
<li class="nav-item">
<a href="../docs/avatars.html" class="nav-link">
Avatars
</a>
</li>
<li class="nav-item">
<a href="../docs/badges.html" class="nav-link">
Badges
</a>
</li>
<li class="nav-item">
<a href="../docs/breadcrumb.html" class="nav-link">
Breadcrumb
</a>
</li>
<li class="nav-item">
<a href="../docs/buttons.html" class="nav-link">
Buttons
</a>
</li>
<li class="nav-item">
<a href="../docs/cards.html" class="nav-link">
Cards
</a>
</li>
<li class="nav-item">
<a href="../docs/carousel.html" class="nav-link">
Carousel
</a>
</li>
<li class="nav-item">
<a href="../docs/dropdowns.html" class="nav-link">
Dropdowns
</a>
</li>
<li class="nav-item">
<a href="../docs/divider.html" class="nav-link">
Divider
</a>
</li>
<li class="nav-item">
<a href="../docs/empty.html" class="nav-link">
Empty states
</a>
</li>
<li class="nav-item">
<a href="../docs/form-elements.html" class="nav-link">
Form elements
</a>
</li>
<li class="nav-item">
<a href="../docs/form-helpers.html" class="nav-link">
Form helpers
</a>
</li>
<li class="nav-item">
<a href="../docs/modals.html" class="nav-link">
Modals
</a>
</li>
<li class="nav-item">
<a href="../docs/progress.html" class="nav-link">
Progress
</a>
</li>
<li class="nav-item">
<a href="../docs/payments.html" class="nav-link">
Payments
</a>
</li>
<li class="nav-item">
<a href="../docs/range-slider.html" class="nav-link">
Range slider
</a>
</li>
<li class="nav-item">
<a href="../docs/ribbons.html" class="nav-link">
Ribbons
</a>
</li>
<li class="nav-item">
<a href="../docs/skeleton.html" class="nav-link">
Skeleton
</a>
</li>
<li class="nav-item">
<a href="../docs/spinners.html" class="nav-link">
Spinners
</a>
</li>
<li class="nav-item">
<a href="../docs/steps.html" class="nav-link">
Steps
</a>
</li>
<li class="nav-item">
<a href="../docs/switch-icon.html" class="nav-link">
Switch icon
</a>
</li>
<li class="nav-item">
<a href="../docs/tables.html" class="nav-link">
Tables
</a>
</li>
<li class="nav-item">
<a href="../docs/tabs.html" class="nav-link">
Tabs
</a>
</li>
<li class="nav-item">
<a href="../docs/timelines.html" class="nav-link">
Timelines
</a>
</li>
<li class="nav-item">
<a href="../docs/toasts.html" class="nav-link">
Toasts
</a>
</li>
<li class="nav-item">
<a href="../docs/tooltips.html" class="nav-link">
Tooltips
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#menu-utils" class="nav-link" data-toggle="collapse" aria-expanded="false">
<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"/><path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z" /></svg>
</span>
Utilities
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-utils">
<li class="nav-item">
<a href="../docs/cursors.html" class="nav-link">
Cursors
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#menu-plugins" class="nav-link" data-toggle="collapse" aria-expanded="false">
<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"/><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><rect x="14" y="14" width="6" height="6" rx="1" /><line x1="14" y1="7" x2="20" y2="7" /><line x1="17" y1="4" x2="17" y2="10" /></svg>
</span>
Plugins
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-plugins">
<li class="nav-item">
<a href="../docs/autosize.html" class="nav-link">
Autosize
</a>
</li>
<li class="nav-item">
<a href="../docs/input-mask.html" class="nav-link">
Form input mask
</a>
</li>
<li class="nav-item">
<a href="../docs/flags.html" class="nav-link">
Flags
</a>
</li>
<li class="nav-item">
<a href="../docs/charts.html" class="nav-link">
Charts
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="../changelog.html" class="nav-link">
<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>
</a>
</li>
</ul>
</div>
<div class="col-lg-9">
<div class="card card-lg">
<div class="card-body">
<div class="markdown">
<div class="d-flex">
<h1 class="h2 mt-0 mb-3">Alerts</h1>
<p class="ml-auto">
<a href="https://getbootstrap.com/docs/4.4/components/alerts/" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" class="icon pr-1 text-blue" 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="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" /><line x1="10" y1="14" x2="20" y2="4" /><polyline points="15 4 20 4 20 9" /></svg>
Bootstrap documentation
</a>
</p>
<div class="mb-5">
<div class="d-flex mb-3">
<h1 class="mt-0">Alerts</h1>
<p class="ml-auto">
<a href="https://getbootstrap.com/docs/4.4/components/alerts/" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" class="icon pr-1 text-blue" 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="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" /><line x1="10" y1="14" x2="20" y2="4" /><polyline points="15 4 20 4 20 9" /></svg>
Bootstrap documentation
</a>
</p>
</div>
<p>Alert messages are used to inform users of the status of their action and help them solve any problems that might have occurred. Good design of alert modals is very important for the overall user experience of a website or app.</p>
</div>
<p>Alert messages are used to inform users of the status of their action and help them solve any problems that might have occurred. Good design of alert modals is very important for the overall user experience of a website or app.</p>
<h2 id="default-markup">Default markup</h2>
<p>Depending on the information you need to convey, you can use one of the following types of alert messages - <strong>success</strong>, <strong>info</strong>, <strong>warning</strong> or <strong>danger</strong>. Using the right type of alert modal will help draw users attention to the message and prompt them to take action.</p>
<div class="example no_toc_section">
@@ -636,16 +681,16 @@
<div class="example no_toc_section">
<div class="example-content">
<div class="alert alert-success" role="alert">
This is a success alert — <a href="#" class="alert-link">check it out</a>!
This is a success alert — <a href="javascript:void()" class="alert-link">check it out</a>!
</div>
<div class="alert alert-info" role="alert">
This is a info alert — <a href="#" class="alert-link">check it out</a>!
This is a info alert — <a href="javascript:void()" class="alert-link">check it out</a>!
</div>
<div class="alert alert-warning" role="alert">
This is a warning alert — <a href="#" class="alert-link">check it out</a>!
This is a warning alert — <a href="javascript:void()" class="alert-link">check it out</a>!
</div>
<div class="alert alert-danger" role="alert">
This is a danger alert — <a href="#" class="alert-link">check it out</a>!
This is a danger alert — <a href="javascript:void()" class="alert-link">check it out</a>!
</div>
</div>
</div>
@@ -671,19 +716,19 @@
<div class="example-content">
<div class="alert alert-success alert-dismissible" role="alert">
This is a success alert — check it out!
<a href="#" class="btn-close" data-dismiss="alert" aria-label="close">&times;</a>
<a href="javascript:void()" class="btn-close" data-dismiss="alert" aria-label="close"></a>
</div>
<div class="alert alert-info alert-dismissible" role="alert">
This is a info alert — check it out!
<a href="#" class="btn-close" data-dismiss="alert" aria-label="close">&times;</a>
<a href="javascript:void()" class="btn-close" data-dismiss="alert" aria-label="close"></a>
</div>
<div class="alert alert-warning alert-dismissible" role="alert">
This is a warning alert — check it out!
<a href="#" class="btn-close" data-dismiss="alert" aria-label="close">&times;</a>
<a href="javascript:void()" class="btn-close" data-dismiss="alert" aria-label="close"></a>
</div>
<div class="alert alert-danger alert-dismissible" role="alert">
This is a danger alert — check it out!
<a href="#" class="btn-close" data-dismiss="alert" aria-label="close">&times;</a>
<a href="javascript:void()" class="btn-close" data-dismiss="alert" aria-label="close"></a>
</div>
</div>
</div>
@@ -691,19 +736,19 @@
<figure class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"alert alert-success alert-dismissible"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">&gt;</span>
This is a success alert — check it out!
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn-close"</span> <span class="na">data-dismiss=</span><span class="s">"alert"</span> <span class="na">aria-label=</span><span class="s">"close"</span><span class="nt">&gt;</span><span class="ni">&amp;times;</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">"btn-close"</span> <span class="na">data-dismiss=</span><span class="s">"alert"</span> <span class="na">aria-label=</span><span class="s">"close"</span><span class="nt">&gt;&lt;/a&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"alert alert-info alert-dismissible"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">&gt;</span>
This is a info alert — check it out!
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn-close"</span> <span class="na">data-dismiss=</span><span class="s">"alert"</span> <span class="na">aria-label=</span><span class="s">"close"</span><span class="nt">&gt;</span><span class="ni">&amp;times;</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">"btn-close"</span> <span class="na">data-dismiss=</span><span class="s">"alert"</span> <span class="na">aria-label=</span><span class="s">"close"</span><span class="nt">&gt;&lt;/a&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"alert alert-warning alert-dismissible"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">&gt;</span>
This is a warning alert — check it out!
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn-close"</span> <span class="na">data-dismiss=</span><span class="s">"alert"</span> <span class="na">aria-label=</span><span class="s">"close"</span><span class="nt">&gt;</span><span class="ni">&amp;times;</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">"btn-close"</span> <span class="na">data-dismiss=</span><span class="s">"alert"</span> <span class="na">aria-label=</span><span class="s">"close"</span><span class="nt">&gt;&lt;/a&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"alert alert-danger alert-dismissible"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">&gt;</span>
This is a danger alert — check it out!
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn-close"</span> <span class="na">data-dismiss=</span><span class="s">"alert"</span> <span class="na">aria-label=</span><span class="s">"close"</span><span class="nt">&gt;</span><span class="ni">&amp;times;</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">"btn-close"</span> <span class="na">data-dismiss=</span><span class="s">"alert"</span> <span class="na">aria-label=</span><span class="s">"close"</span><span class="nt">&gt;&lt;/a&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
</figure>
</div>
@@ -732,19 +777,19 @@
<div class="example-code">
<figure class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"alert alert-success"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">&gt;</span>
<span class="c">&lt;!-- SVG icon code --&gt;</span>
<span class="c">&lt;!-- SVG icon code with class="mr-1" --&gt;</span>
This is a success alert — check it out!
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"alert alert-info"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">&gt;</span>
<span class="c">&lt;!-- SVG icon code --&gt;</span>
<span class="c">&lt;!-- SVG icon code with class="mr-1" --&gt;</span>
This is a info alert — check it out!
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"alert alert-warning"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">&gt;</span>
<span class="c">&lt;!-- SVG icon code --&gt;</span>
<span class="c">&lt;!-- SVG icon code with class="mr-1" --&gt;</span>
This is a warning alert — check it out!
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"alert alert-danger"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">&gt;</span>
<span class="c">&lt;!-- SVG icon code --&gt;</span>
<span class="c">&lt;!-- SVG icon code with class="mr-1" --&gt;</span>
This is a danger alert — check it out!
<span class="nt">&lt;/div&gt;</span></code></pre>
</figure>
@@ -799,10 +844,10 @@
<h3>Some Title</h3>
<p>Lorem ipsum Minim ad pariatur eiusmod ea ut nulla aliqua est quis id dolore minim voluptate.</p>
<div class="btn-list">
<a href="#" class="btn btn-success">Save changes</a>
<a href="#" class="btn">Cancel</a>
<a href="javascript:void()" class="btn btn-success">Save changes</a>
<a href="javascript:void()" class="btn">Cancel</a>
</div>
<a href="#" class="btn-close" data-dismiss="alert" aria-label="close">&times;</a>
<a href="javascript:void()" class="btn-close" data-dismiss="alert" aria-label="close"></a>
</div>
</div>
</div>
@@ -815,7 +860,7 @@
<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-success"</span><span class="nt">&gt;</span>Save changes<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"</span><span class="nt">&gt;</span>Cancel<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/div&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-close"</span> <span class="na">data-dismiss=</span><span class="s">"alert"</span> <span class="na">aria-label=</span><span class="s">"close"</span><span class="nt">&gt;</span><span class="ni">&amp;times;</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">"btn-close"</span> <span class="na">data-dismiss=</span><span class="s">"alert"</span> <span class="na">aria-label=</span><span class="s">"close"</span><span class="nt">&gt;&lt;/a&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
</figure>
</div>
@@ -843,7 +888,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="https://github.com/tabler/tabler/releases" target="_blank" class="link-secondary">v1.0.0-alpha.10</a>
<a href="../changelog.html" class="link-secondary">v1.0.0-alpha.11</a>
</li>
</ul>
</div>

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.10
* @version 1.0.0-alpha.11
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -362,181 +362,14 @@
</li>
</ul>
</li>
<li class="nav-item active dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
<li class="nav-item active">
<a class="nav-link" href="../docs/index.html" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><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="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
</span>
<span class="nav-link-title">
Docs
Documentation
</span>
</a>
<ul class="dropdown-menu dropdown-menu-columns dropdown-menu-columns-3">
<li >
<a class="dropdown-item" href="../docs/index.html" >
Introduction
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/alerts.html" >
Alerts
</a>
</li>
<li >
<a class="dropdown-item active" href="../docs/autosize.html" >
Autosize
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/avatars.html" >
Avatars
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/badges.html" >
Badges
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/breadcrumb.html" >
Breadcrumb
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/buttons.html" >
Buttons
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/cards.html" >
Cards
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/carousel.html" >
Carousel
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/colors.html" >
Colors
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/cursors.html" >
Cursors
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/charts.html" >
Charts
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/dropdowns.html" >
Dropdowns
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/divider.html" >
Divider
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/empty.html" >
Empty states
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/flags.html" >
Flags
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/form-elements.html" >
Form elements
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/form-helpers.html" >
Form helpers
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/input-mask.html" >
Form input mask
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/modals.html" >
Modals
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/progress.html" >
Progress
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/payments.html" >
Payments
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/range-slider.html" >
Range slider
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/ribbons.html" >
Ribbons
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/skeleton.html" >
Skeleton
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/spinners.html" >
Spinners
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/steps.html" >
Steps
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/tables.html" >
Tables
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/tabs.html" >
Tabs
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/timelines.html" >
Timelines
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/toasts.html" >
Toasts
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/tooltips.html" >
Tooltips
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/typography.html" >
Typography
</a>
</li>
</ul>
</li>
</ul>
<div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
@@ -565,27 +398,244 @@
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="d-none d-lg-block col-lg-3 order-lg-1 mb-4">
<div class="sticky-top lh-lg py-4">
<a href="https://github.com/tabler/tabler" class="btn btn-white mb-6 btn-block" target="_blank" rel="noreferrer">
<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>
Browse source code
</a>
<h5 class="subheader">On this page</h5>
<ul class="list-unstyled">
<li class="toc-entry toc-h2"><a href="#default-markup">Default markup</a></li>
</ul>
</div>
<div class="row g-5">
<div class="d-none d-lg-block col-lg-3">
<ul class="nav nav-pills nav-vertical">
<li class="nav-item">
<a href="#menu-base" class="nav-link" data-toggle="collapse" aria-expanded="false">
<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"/><path d="M8 9l3 3l-3 3" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
</span>
Getting started
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-base">
<li class="nav-item">
<a href="../docs/index.html" class="nav-link">
Introduction
</a>
</li>
<li class="nav-item">
<a href="../docs/colors.html" class="nav-link">
Colors
</a>
</li>
<li class="nav-item">
<a href="../docs/typography.html" class="nav-link">
Typography
</a>
</li>
<li class="nav-item">
<a href="../docs/icons.html" class="nav-link">
Icons
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#menu-components" class="nav-link" data-toggle="collapse" aria-expanded="false">
<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"/><path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>
</span>
Components
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-components">
<li class="nav-item">
<a href="../docs/alerts.html" class="nav-link">
Alerts
</a>
</li>
<li class="nav-item">
<a href="../docs/avatars.html" class="nav-link">
Avatars
</a>
</li>
<li class="nav-item">
<a href="../docs/badges.html" class="nav-link">
Badges
</a>
</li>
<li class="nav-item">
<a href="../docs/breadcrumb.html" class="nav-link">
Breadcrumb
</a>
</li>
<li class="nav-item">
<a href="../docs/buttons.html" class="nav-link">
Buttons
</a>
</li>
<li class="nav-item">
<a href="../docs/cards.html" class="nav-link">
Cards
</a>
</li>
<li class="nav-item">
<a href="../docs/carousel.html" class="nav-link">
Carousel
</a>
</li>
<li class="nav-item">
<a href="../docs/dropdowns.html" class="nav-link">
Dropdowns
</a>
</li>
<li class="nav-item">
<a href="../docs/divider.html" class="nav-link">
Divider
</a>
</li>
<li class="nav-item">
<a href="../docs/empty.html" class="nav-link">
Empty states
</a>
</li>
<li class="nav-item">
<a href="../docs/form-elements.html" class="nav-link">
Form elements
</a>
</li>
<li class="nav-item">
<a href="../docs/form-helpers.html" class="nav-link">
Form helpers
</a>
</li>
<li class="nav-item">
<a href="../docs/modals.html" class="nav-link">
Modals
</a>
</li>
<li class="nav-item">
<a href="../docs/progress.html" class="nav-link">
Progress
</a>
</li>
<li class="nav-item">
<a href="../docs/payments.html" class="nav-link">
Payments
</a>
</li>
<li class="nav-item">
<a href="../docs/range-slider.html" class="nav-link">
Range slider
</a>
</li>
<li class="nav-item">
<a href="../docs/ribbons.html" class="nav-link">
Ribbons
</a>
</li>
<li class="nav-item">
<a href="../docs/skeleton.html" class="nav-link">
Skeleton
</a>
</li>
<li class="nav-item">
<a href="../docs/spinners.html" class="nav-link">
Spinners
</a>
</li>
<li class="nav-item">
<a href="../docs/steps.html" class="nav-link">
Steps
</a>
</li>
<li class="nav-item">
<a href="../docs/switch-icon.html" class="nav-link">
Switch icon
</a>
</li>
<li class="nav-item">
<a href="../docs/tables.html" class="nav-link">
Tables
</a>
</li>
<li class="nav-item">
<a href="../docs/tabs.html" class="nav-link">
Tabs
</a>
</li>
<li class="nav-item">
<a href="../docs/timelines.html" class="nav-link">
Timelines
</a>
</li>
<li class="nav-item">
<a href="../docs/toasts.html" class="nav-link">
Toasts
</a>
</li>
<li class="nav-item">
<a href="../docs/tooltips.html" class="nav-link">
Tooltips
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#menu-utils" class="nav-link" data-toggle="collapse" aria-expanded="false">
<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"/><path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z" /></svg>
</span>
Utilities
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-utils">
<li class="nav-item">
<a href="../docs/cursors.html" class="nav-link">
Cursors
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#menu-plugins" class="nav-link" data-toggle="collapse" aria-expanded="true">
<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"/><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><rect x="14" y="14" width="6" height="6" rx="1" /><line x1="14" y1="7" x2="20" y2="7" /><line x1="17" y1="4" x2="17" y2="10" /></svg>
</span>
Plugins
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse show" id="menu-plugins">
<li class="nav-item">
<a href="../docs/autosize.html" class="nav-link active">
Autosize
</a>
</li>
<li class="nav-item">
<a href="../docs/input-mask.html" class="nav-link">
Form input mask
</a>
</li>
<li class="nav-item">
<a href="../docs/flags.html" class="nav-link">
Flags
</a>
</li>
<li class="nav-item">
<a href="../docs/charts.html" class="nav-link">
Charts
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="../changelog.html" class="nav-link">
<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>
</a>
</li>
</ul>
</div>
<div class="col-lg-9">
<div class="card card-lg">
<div class="card-body">
<div class="markdown">
<div class="d-flex">
<h1 class="h2 mt-0 mb-3">Autosize</h1>
<div class="mb-5">
<div class="d-flex mb-3">
<h1 class="mt-0">Autosize</h1>
</div>
<p>The autosize element will automatically adjust the textarea height and make it easier for users to follow as they type.</p>
</div>
<p>The autosize element will automatically adjust the textarea height and make it easier for users to follow as they type.</p>
<h2 id="default-markup">Default markup</h2>
<p>Add the autosize element to your input to make it automatically adjust to the length of a text as a user types it.</p>
<div class="example no_toc_section">
@@ -624,7 +674,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="https://github.com/tabler/tabler/releases" target="_blank" class="link-secondary">v1.0.0-alpha.10</a>
<a href="../changelog.html" class="link-secondary">v1.0.0-alpha.11</a>
</li>
</ul>
</div>

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.10
* @version 1.0.0-alpha.11
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -362,181 +362,14 @@
</li>
</ul>
</li>
<li class="nav-item active dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
<li class="nav-item active">
<a class="nav-link" href="../docs/index.html" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><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="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
</span>
<span class="nav-link-title">
Docs
Documentation
</span>
</a>
<ul class="dropdown-menu dropdown-menu-columns dropdown-menu-columns-3">
<li >
<a class="dropdown-item" href="../docs/index.html" >
Introduction
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/alerts.html" >
Alerts
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/autosize.html" >
Autosize
</a>
</li>
<li >
<a class="dropdown-item active" href="../docs/avatars.html" >
Avatars
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/badges.html" >
Badges
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/breadcrumb.html" >
Breadcrumb
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/buttons.html" >
Buttons
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/cards.html" >
Cards
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/carousel.html" >
Carousel
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/colors.html" >
Colors
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/cursors.html" >
Cursors
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/charts.html" >
Charts
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/dropdowns.html" >
Dropdowns
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/divider.html" >
Divider
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/empty.html" >
Empty states
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/flags.html" >
Flags
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/form-elements.html" >
Form elements
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/form-helpers.html" >
Form helpers
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/input-mask.html" >
Form input mask
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/modals.html" >
Modals
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/progress.html" >
Progress
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/payments.html" >
Payments
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/range-slider.html" >
Range slider
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/ribbons.html" >
Ribbons
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/skeleton.html" >
Skeleton
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/spinners.html" >
Spinners
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/steps.html" >
Steps
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/tables.html" >
Tables
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/tabs.html" >
Tabs
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/timelines.html" >
Timelines
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/toasts.html" >
Toasts
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/tooltips.html" >
Tooltips
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/typography.html" >
Typography
</a>
</li>
</ul>
</li>
</ul>
<div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
@@ -565,36 +398,244 @@
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="d-none d-lg-block col-lg-3 order-lg-1 mb-4">
<div class="sticky-top lh-lg py-4">
<a href="https://github.com/tabler/tabler" class="btn btn-white mb-6 btn-block" target="_blank" rel="noreferrer">
<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>
Browse source code
</a>
<h5 class="subheader">On this page</h5>
<ul class="list-unstyled">
<li class="toc-entry toc-h2"><a href="#default-markup">Default markup</a></li>
<li class="toc-entry toc-h2"><a href="#avatar-image">Avatar image</a></li>
<li class="toc-entry toc-h2"><a href="#initials">Initials</a></li>
<li class="toc-entry toc-h2"><a href="#avatar-icons">Avatar icons</a></li>
<li class="toc-entry toc-h2"><a href="#avatar-initials-color">Avatar initials color</a></li>
<li class="toc-entry toc-h2"><a href="#avatar-size">Avatar size</a></li>
<li class="toc-entry toc-h2"><a href="#avatar-status">Avatar status</a></li>
<li class="toc-entry toc-h2"><a href="#avatar-shape">Avatar shape</a></li>
<li class="toc-entry toc-h2"><a href="#avatars-list">Avatars list</a></li>
<li class="toc-entry toc-h2"><a href="#stacked-list">Stacked list</a></li>
</ul>
</div>
<div class="row g-5">
<div class="d-none d-lg-block col-lg-3">
<ul class="nav nav-pills nav-vertical">
<li class="nav-item">
<a href="#menu-base" class="nav-link" data-toggle="collapse" aria-expanded="false">
<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"/><path d="M8 9l3 3l-3 3" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
</span>
Getting started
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-base">
<li class="nav-item">
<a href="../docs/index.html" class="nav-link">
Introduction
</a>
</li>
<li class="nav-item">
<a href="../docs/colors.html" class="nav-link">
Colors
</a>
</li>
<li class="nav-item">
<a href="../docs/typography.html" class="nav-link">
Typography
</a>
</li>
<li class="nav-item">
<a href="../docs/icons.html" class="nav-link">
Icons
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#menu-components" class="nav-link" data-toggle="collapse" aria-expanded="true">
<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"/><path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>
</span>
Components
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse show" id="menu-components">
<li class="nav-item">
<a href="../docs/alerts.html" class="nav-link">
Alerts
</a>
</li>
<li class="nav-item">
<a href="../docs/avatars.html" class="nav-link active">
Avatars
</a>
</li>
<li class="nav-item">
<a href="../docs/badges.html" class="nav-link">
Badges
</a>
</li>
<li class="nav-item">
<a href="../docs/breadcrumb.html" class="nav-link">
Breadcrumb
</a>
</li>
<li class="nav-item">
<a href="../docs/buttons.html" class="nav-link">
Buttons
</a>
</li>
<li class="nav-item">
<a href="../docs/cards.html" class="nav-link">
Cards
</a>
</li>
<li class="nav-item">
<a href="../docs/carousel.html" class="nav-link">
Carousel
</a>
</li>
<li class="nav-item">
<a href="../docs/dropdowns.html" class="nav-link">
Dropdowns
</a>
</li>
<li class="nav-item">
<a href="../docs/divider.html" class="nav-link">
Divider
</a>
</li>
<li class="nav-item">
<a href="../docs/empty.html" class="nav-link">
Empty states
</a>
</li>
<li class="nav-item">
<a href="../docs/form-elements.html" class="nav-link">
Form elements
</a>
</li>
<li class="nav-item">
<a href="../docs/form-helpers.html" class="nav-link">
Form helpers
</a>
</li>
<li class="nav-item">
<a href="../docs/modals.html" class="nav-link">
Modals
</a>
</li>
<li class="nav-item">
<a href="../docs/progress.html" class="nav-link">
Progress
</a>
</li>
<li class="nav-item">
<a href="../docs/payments.html" class="nav-link">
Payments
</a>
</li>
<li class="nav-item">
<a href="../docs/range-slider.html" class="nav-link">
Range slider
</a>
</li>
<li class="nav-item">
<a href="../docs/ribbons.html" class="nav-link">
Ribbons
</a>
</li>
<li class="nav-item">
<a href="../docs/skeleton.html" class="nav-link">
Skeleton
</a>
</li>
<li class="nav-item">
<a href="../docs/spinners.html" class="nav-link">
Spinners
</a>
</li>
<li class="nav-item">
<a href="../docs/steps.html" class="nav-link">
Steps
</a>
</li>
<li class="nav-item">
<a href="../docs/switch-icon.html" class="nav-link">
Switch icon
</a>
</li>
<li class="nav-item">
<a href="../docs/tables.html" class="nav-link">
Tables
</a>
</li>
<li class="nav-item">
<a href="../docs/tabs.html" class="nav-link">
Tabs
</a>
</li>
<li class="nav-item">
<a href="../docs/timelines.html" class="nav-link">
Timelines
</a>
</li>
<li class="nav-item">
<a href="../docs/toasts.html" class="nav-link">
Toasts
</a>
</li>
<li class="nav-item">
<a href="../docs/tooltips.html" class="nav-link">
Tooltips
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#menu-utils" class="nav-link" data-toggle="collapse" aria-expanded="false">
<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"/><path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z" /></svg>
</span>
Utilities
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-utils">
<li class="nav-item">
<a href="../docs/cursors.html" class="nav-link">
Cursors
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#menu-plugins" class="nav-link" data-toggle="collapse" aria-expanded="false">
<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"/><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><rect x="14" y="14" width="6" height="6" rx="1" /><line x1="14" y1="7" x2="20" y2="7" /><line x1="17" y1="4" x2="17" y2="10" /></svg>
</span>
Plugins
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-plugins">
<li class="nav-item">
<a href="../docs/autosize.html" class="nav-link">
Autosize
</a>
</li>
<li class="nav-item">
<a href="../docs/input-mask.html" class="nav-link">
Form input mask
</a>
</li>
<li class="nav-item">
<a href="../docs/flags.html" class="nav-link">
Flags
</a>
</li>
<li class="nav-item">
<a href="../docs/charts.html" class="nav-link">
Charts
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="../changelog.html" class="nav-link">
<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>
</a>
</li>
</ul>
</div>
<div class="col-lg-9">
<div class="card card-lg">
<div class="card-body">
<div class="markdown">
<div class="d-flex">
<h1 class="h2 mt-0 mb-3">Avatars</h1>
<div class="mb-5">
<div class="d-flex mb-3">
<h1 class="mt-0">Avatars</h1>
</div>
<p>Avatars help customise various elements of a user interface and make the product experience more personalised. They are often used in communication apps, collaboration tools and social media.</p>
</div>
<p>Avatars help customise various elements of a user interface and make the product experience more personalised. They are often used in communication apps, collaboration tools and social media.</p>
<h2 id="default-markup">Default markup</h2>
<p>Use the <code class="language-plaintext highlighter-rouge">avatar</code> class to add an avatar to your interface design for greater customisation.</p>
<div class="example no_toc_section example-centered">
@@ -661,11 +702,11 @@
</div>
<div class="example-code">
<figure class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span><span class="nt">&gt;</span><span class="c">&lt;!-- SVG icon code --&gt;</span>
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span><span class="nt">&gt;</span><span class="c">&lt;!-- SVG icon code with class="avatar-icon" --&gt;</span>
<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span><span class="nt">&gt;</span><span class="c">&lt;!-- SVG icon code --&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span><span class="nt">&gt;</span><span class="c">&lt;!-- SVG icon code with class="avatar-icon" --&gt;</span>
<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span><span class="nt">&gt;</span><span class="c">&lt;!-- SVG icon code --&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span><span class="nt">&gt;</span><span class="c">&lt;!-- SVG icon code with class="avatar-icon" --&gt;</span>
<span class="nt">&lt;/span&gt;</span></code></pre>
</figure>
</div>
@@ -837,7 +878,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="https://github.com/tabler/tabler/releases" target="_blank" class="link-secondary">v1.0.0-alpha.10</a>
<a href="../changelog.html" class="link-secondary">v1.0.0-alpha.11</a>
</li>
</ul>
</div>

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.10
* @version 1.0.0-alpha.11
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -362,181 +362,14 @@
</li>
</ul>
</li>
<li class="nav-item active dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
<li class="nav-item active">
<a class="nav-link" href="../docs/index.html" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><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="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
</span>
<span class="nav-link-title">
Docs
Documentation
</span>
</a>
<ul class="dropdown-menu dropdown-menu-columns dropdown-menu-columns-3">
<li >
<a class="dropdown-item" href="../docs/index.html" >
Introduction
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/alerts.html" >
Alerts
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/autosize.html" >
Autosize
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/avatars.html" >
Avatars
</a>
</li>
<li >
<a class="dropdown-item active" href="../docs/badges.html" >
Badges
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/breadcrumb.html" >
Breadcrumb
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/buttons.html" >
Buttons
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/cards.html" >
Cards
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/carousel.html" >
Carousel
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/colors.html" >
Colors
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/cursors.html" >
Cursors
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/charts.html" >
Charts
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/dropdowns.html" >
Dropdowns
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/divider.html" >
Divider
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/empty.html" >
Empty states
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/flags.html" >
Flags
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/form-elements.html" >
Form elements
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/form-helpers.html" >
Form helpers
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/input-mask.html" >
Form input mask
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/modals.html" >
Modals
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/progress.html" >
Progress
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/payments.html" >
Payments
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/range-slider.html" >
Range slider
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/ribbons.html" >
Ribbons
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/skeleton.html" >
Skeleton
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/spinners.html" >
Spinners
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/steps.html" >
Steps
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/tables.html" >
Tables
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/tabs.html" >
Tabs
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/timelines.html" >
Timelines
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/toasts.html" >
Toasts
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/tooltips.html" >
Tooltips
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/typography.html" >
Typography
</a>
</li>
</ul>
</li>
</ul>
<div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
@@ -565,39 +398,250 @@
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="d-none d-lg-block col-lg-3 order-lg-1 mb-4">
<div class="sticky-top lh-lg py-4">
<a href="https://github.com/tabler/tabler" class="btn btn-white mb-6 btn-block" target="_blank" rel="noreferrer">
<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>
Browse source code
</a>
<h5 class="subheader">On this page</h5>
<ul class="list-unstyled">
<li class="toc-entry toc-h2"><a href="#default-markup">Default markup</a></li>
<li class="toc-entry toc-h2"><a href="#pill-badges">Pill badges</a></li>
<li class="toc-entry toc-h2"><a href="#soft-color-badges">Soft color badges</a></li>
<li class="toc-entry toc-h2"><a href="#links">Links</a></li>
<li class="toc-entry toc-h2"><a href="#empty-badges">Empty badges</a></li>
<li class="toc-entry toc-h2"><a href="#badge-avatars">Badge avatars</a></li>
<li class="toc-entry toc-h2"><a href="#button-with-badge">Button with badge</a></li>
</ul>
</div>
<div class="row g-5">
<div class="d-none d-lg-block col-lg-3">
<ul class="nav nav-pills nav-vertical">
<li class="nav-item">
<a href="#menu-base" class="nav-link" data-toggle="collapse" aria-expanded="false">
<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"/><path d="M8 9l3 3l-3 3" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
</span>
Getting started
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-base">
<li class="nav-item">
<a href="../docs/index.html" class="nav-link">
Introduction
</a>
</li>
<li class="nav-item">
<a href="../docs/colors.html" class="nav-link">
Colors
</a>
</li>
<li class="nav-item">
<a href="../docs/typography.html" class="nav-link">
Typography
</a>
</li>
<li class="nav-item">
<a href="../docs/icons.html" class="nav-link">
Icons
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#menu-components" class="nav-link" data-toggle="collapse" aria-expanded="true">
<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"/><path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>
</span>
Components
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse show" id="menu-components">
<li class="nav-item">
<a href="../docs/alerts.html" class="nav-link">
Alerts
</a>
</li>
<li class="nav-item">
<a href="../docs/avatars.html" class="nav-link">
Avatars
</a>
</li>
<li class="nav-item">
<a href="../docs/badges.html" class="nav-link active">
Badges
</a>
</li>
<li class="nav-item">
<a href="../docs/breadcrumb.html" class="nav-link">
Breadcrumb
</a>
</li>
<li class="nav-item">
<a href="../docs/buttons.html" class="nav-link">
Buttons
</a>
</li>
<li class="nav-item">
<a href="../docs/cards.html" class="nav-link">
Cards
</a>
</li>
<li class="nav-item">
<a href="../docs/carousel.html" class="nav-link">
Carousel
</a>
</li>
<li class="nav-item">
<a href="../docs/dropdowns.html" class="nav-link">
Dropdowns
</a>
</li>
<li class="nav-item">
<a href="../docs/divider.html" class="nav-link">
Divider
</a>
</li>
<li class="nav-item">
<a href="../docs/empty.html" class="nav-link">
Empty states
</a>
</li>
<li class="nav-item">
<a href="../docs/form-elements.html" class="nav-link">
Form elements
</a>
</li>
<li class="nav-item">
<a href="../docs/form-helpers.html" class="nav-link">
Form helpers
</a>
</li>
<li class="nav-item">
<a href="../docs/modals.html" class="nav-link">
Modals
</a>
</li>
<li class="nav-item">
<a href="../docs/progress.html" class="nav-link">
Progress
</a>
</li>
<li class="nav-item">
<a href="../docs/payments.html" class="nav-link">
Payments
</a>
</li>
<li class="nav-item">
<a href="../docs/range-slider.html" class="nav-link">
Range slider
</a>
</li>
<li class="nav-item">
<a href="../docs/ribbons.html" class="nav-link">
Ribbons
</a>
</li>
<li class="nav-item">
<a href="../docs/skeleton.html" class="nav-link">
Skeleton
</a>
</li>
<li class="nav-item">
<a href="../docs/spinners.html" class="nav-link">
Spinners
</a>
</li>
<li class="nav-item">
<a href="../docs/steps.html" class="nav-link">
Steps
</a>
</li>
<li class="nav-item">
<a href="../docs/switch-icon.html" class="nav-link">
Switch icon
</a>
</li>
<li class="nav-item">
<a href="../docs/tables.html" class="nav-link">
Tables
</a>
</li>
<li class="nav-item">
<a href="../docs/tabs.html" class="nav-link">
Tabs
</a>
</li>
<li class="nav-item">
<a href="../docs/timelines.html" class="nav-link">
Timelines
</a>
</li>
<li class="nav-item">
<a href="../docs/toasts.html" class="nav-link">
Toasts
</a>
</li>
<li class="nav-item">
<a href="../docs/tooltips.html" class="nav-link">
Tooltips
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#menu-utils" class="nav-link" data-toggle="collapse" aria-expanded="false">
<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"/><path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z" /></svg>
</span>
Utilities
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-utils">
<li class="nav-item">
<a href="../docs/cursors.html" class="nav-link">
Cursors
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#menu-plugins" class="nav-link" data-toggle="collapse" aria-expanded="false">
<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"/><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><rect x="14" y="14" width="6" height="6" rx="1" /><line x1="14" y1="7" x2="20" y2="7" /><line x1="17" y1="4" x2="17" y2="10" /></svg>
</span>
Plugins
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-plugins">
<li class="nav-item">
<a href="../docs/autosize.html" class="nav-link">
Autosize
</a>
</li>
<li class="nav-item">
<a href="../docs/input-mask.html" class="nav-link">
Form input mask
</a>
</li>
<li class="nav-item">
<a href="../docs/flags.html" class="nav-link">
Flags
</a>
</li>
<li class="nav-item">
<a href="../docs/charts.html" class="nav-link">
Charts
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="../changelog.html" class="nav-link">
<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>
</a>
</li>
</ul>
</div>
<div class="col-lg-9">
<div class="card card-lg">
<div class="card-body">
<div class="markdown">
<div class="d-flex">
<h1 class="h2 mt-0 mb-3">Badges</h1>
<p class="ml-auto">
<a href="https://getbootstrap.com/docs/4.4/components/badge/" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" class="icon pr-1 text-blue" 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="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" /><line x1="10" y1="14" x2="20" y2="4" /><polyline points="15 4 20 4 20 9" /></svg>
Bootstrap documentation
</a>
</p>
<div class="mb-5">
<div class="d-flex mb-3">
<h1 class="mt-0">Badges</h1>
<p class="ml-auto">
<a href="https://getbootstrap.com/docs/4.4/components/badge/" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" class="icon pr-1 text-blue" 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="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" /><line x1="10" y1="14" x2="20" y2="4" /><polyline points="15 4 20 4 20 9" /></svg>
Bootstrap documentation
</a>
</p>
</div>
<p>Badges are small count and labeling components, which are used to add extra information to an interface element. You can use them to draw users' attention to a new element, notify about unread messages or provide any kind of additional info.</p>
</div>
<p>Badges are small count and labeling components, which are used to add extra information to an interface element. You can use them to draw users' attention to a new element, notify about unread messages or provide any kind of additional info.</p>
<h2 id="default-markup">Default markup</h2>
<p>The default badges are square and come in the basic set of colors.</p>
<div class="example no_toc_section example-centered">
@@ -704,18 +748,18 @@
<p>Place the badge within an <code class="language-plaintext highlighter-rouge">&lt;a&gt;</code> element if you want it to perform the function of a link and make it clickable.</p>
<div class="example no_toc_section example-centered">
<div class="example-content">
<a href="#" class="badge bg-blue">blue</a>
<a href="#" class="badge bg-azure">azure</a>
<a href="#" class="badge bg-indigo">indigo</a>
<a href="#" class="badge bg-purple">purple</a>
<a href="#" class="badge bg-pink">pink</a>
<a href="#" class="badge bg-red">red</a>
<a href="#" class="badge bg-orange">orange</a>
<a href="#" class="badge bg-yellow">yellow</a>
<a href="#" class="badge bg-lime">lime</a>
<a href="#" class="badge bg-green">green</a>
<a href="#" class="badge bg-teal">teal</a>
<a href="#" class="badge bg-cyan">cyan</a>
<a href="javascript:void()" class="badge bg-blue">blue</a>
<a href="javascript:void()" class="badge bg-azure">azure</a>
<a href="javascript:void()" class="badge bg-indigo">indigo</a>
<a href="javascript:void()" class="badge bg-purple">purple</a>
<a href="javascript:void()" class="badge bg-pink">pink</a>
<a href="javascript:void()" class="badge bg-red">red</a>
<a href="javascript:void()" class="badge bg-orange">orange</a>
<a href="javascript:void()" class="badge bg-yellow">yellow</a>
<a href="javascript:void()" class="badge bg-lime">lime</a>
<a href="javascript:void()" class="badge bg-green">green</a>
<a href="javascript:void()" class="badge bg-teal">teal</a>
<a href="javascript:void()" class="badge bg-cyan">cyan</a>
</div>
</div>
<div class="example-code">
@@ -738,18 +782,18 @@
<p>Leave the HTML element empty if you want to create badges without any text. Empty badges are particularly useful if you want to make an interface element more noticeable regardless of limited space.</p>
<div class="example no_toc_section example-centered">
<div class="example-content">
<a href="#" class="badge bg-blue"></a>
<a href="#" class="badge bg-azure"></a>
<a href="#" class="badge bg-indigo"></a>
<a href="#" class="badge bg-purple"></a>
<a href="#" class="badge bg-pink"></a>
<a href="#" class="badge bg-red"></a>
<a href="#" class="badge bg-orange"></a>
<a href="#" class="badge bg-yellow"></a>
<a href="#" class="badge bg-lime"></a>
<a href="#" class="badge bg-green"></a>
<a href="#" class="badge bg-teal"></a>
<a href="#" class="badge bg-cyan"></a>
<a href="javascript:void()" class="badge bg-blue"></a>
<a href="javascript:void()" class="badge bg-azure"></a>
<a href="javascript:void()" class="badge bg-indigo"></a>
<a href="javascript:void()" class="badge bg-purple"></a>
<a href="javascript:void()" class="badge bg-pink"></a>
<a href="javascript:void()" class="badge bg-red"></a>
<a href="javascript:void()" class="badge bg-orange"></a>
<a href="javascript:void()" class="badge bg-yellow"></a>
<a href="javascript:void()" class="badge bg-lime"></a>
<a href="javascript:void()" class="badge bg-green"></a>
<a href="javascript:void()" class="badge bg-teal"></a>
<a href="javascript:void()" class="badge bg-cyan"></a>
</div>
</div>
<div class="example-code">
@@ -866,7 +910,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="https://github.com/tabler/tabler/releases" target="_blank" class="link-secondary">v1.0.0-alpha.10</a>
<a href="../changelog.html" class="link-secondary">v1.0.0-alpha.11</a>
</li>
</ul>
</div>

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.10
* @version 1.0.0-alpha.11
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -362,181 +362,14 @@
</li>
</ul>
</li>
<li class="nav-item active dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
<li class="nav-item active">
<a class="nav-link" href="../docs/index.html" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><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="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
</span>
<span class="nav-link-title">
Docs
Documentation
</span>
</a>
<ul class="dropdown-menu dropdown-menu-columns dropdown-menu-columns-3">
<li >
<a class="dropdown-item" href="../docs/index.html" >
Introduction
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/alerts.html" >
Alerts
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/autosize.html" >
Autosize
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/avatars.html" >
Avatars
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/badges.html" >
Badges
</a>
</li>
<li >
<a class="dropdown-item active" href="../docs/breadcrumb.html" >
Breadcrumb
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/buttons.html" >
Buttons
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/cards.html" >
Cards
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/carousel.html" >
Carousel
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/colors.html" >
Colors
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/cursors.html" >
Cursors
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/charts.html" >
Charts
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/dropdowns.html" >
Dropdowns
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/divider.html" >
Divider
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/empty.html" >
Empty states
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/flags.html" >
Flags
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/form-elements.html" >
Form elements
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/form-helpers.html" >
Form helpers
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/input-mask.html" >
Form input mask
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/modals.html" >
Modals
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/progress.html" >
Progress
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/payments.html" >
Payments
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/range-slider.html" >
Range slider
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/ribbons.html" >
Ribbons
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/skeleton.html" >
Skeleton
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/spinners.html" >
Spinners
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/steps.html" >
Steps
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/tables.html" >
Tables
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/tabs.html" >
Tabs
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/timelines.html" >
Timelines
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/toasts.html" >
Toasts
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/tooltips.html" >
Tooltips
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/typography.html" >
Typography
</a>
</li>
</ul>
</li>
</ul>
<div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
@@ -565,43 +398,258 @@
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="d-none d-lg-block col-lg-3 order-lg-1 mb-4">
<div class="sticky-top lh-lg py-4">
<a href="https://github.com/tabler/tabler" class="btn btn-white mb-6 btn-block" target="_blank" rel="noreferrer">
<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>
Browse source code
</a>
<h5 class="subheader">On this page</h5>
<ul class="list-unstyled">
<li class="toc-entry toc-h2"><a href="#default-markup">Default markup</a></li>
<li class="toc-entry toc-h2"><a href="#breadcrumb-variations">Breadcrumb variations</a></li>
<li class="toc-entry toc-h2"><a href="#alternate-version">Alternate version</a></li>
</ul>
</div>
<div class="row g-5">
<div class="d-none d-lg-block col-lg-3">
<ul class="nav nav-pills nav-vertical">
<li class="nav-item">
<a href="#menu-base" class="nav-link" data-toggle="collapse" aria-expanded="false">
<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"/><path d="M8 9l3 3l-3 3" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
</span>
Getting started
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-base">
<li class="nav-item">
<a href="../docs/index.html" class="nav-link">
Introduction
</a>
</li>
<li class="nav-item">
<a href="../docs/colors.html" class="nav-link">
Colors
</a>
</li>
<li class="nav-item">
<a href="../docs/typography.html" class="nav-link">
Typography
</a>
</li>
<li class="nav-item">
<a href="../docs/icons.html" class="nav-link">
Icons
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#menu-components" class="nav-link" data-toggle="collapse" aria-expanded="true">
<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"/><path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>
</span>
Components
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse show" id="menu-components">
<li class="nav-item">
<a href="../docs/alerts.html" class="nav-link">
Alerts
</a>
</li>
<li class="nav-item">
<a href="../docs/avatars.html" class="nav-link">
Avatars
</a>
</li>
<li class="nav-item">
<a href="../docs/badges.html" class="nav-link">
Badges
</a>
</li>
<li class="nav-item">
<a href="../docs/breadcrumb.html" class="nav-link active">
Breadcrumb
</a>
</li>
<li class="nav-item">
<a href="../docs/buttons.html" class="nav-link">
Buttons
</a>
</li>
<li class="nav-item">
<a href="../docs/cards.html" class="nav-link">
Cards
</a>
</li>
<li class="nav-item">
<a href="../docs/carousel.html" class="nav-link">
Carousel
</a>
</li>
<li class="nav-item">
<a href="../docs/dropdowns.html" class="nav-link">
Dropdowns
</a>
</li>
<li class="nav-item">
<a href="../docs/divider.html" class="nav-link">
Divider
</a>
</li>
<li class="nav-item">
<a href="../docs/empty.html" class="nav-link">
Empty states
</a>
</li>
<li class="nav-item">
<a href="../docs/form-elements.html" class="nav-link">
Form elements
</a>
</li>
<li class="nav-item">
<a href="../docs/form-helpers.html" class="nav-link">
Form helpers
</a>
</li>
<li class="nav-item">
<a href="../docs/modals.html" class="nav-link">
Modals
</a>
</li>
<li class="nav-item">
<a href="../docs/progress.html" class="nav-link">
Progress
</a>
</li>
<li class="nav-item">
<a href="../docs/payments.html" class="nav-link">
Payments
</a>
</li>
<li class="nav-item">
<a href="../docs/range-slider.html" class="nav-link">
Range slider
</a>
</li>
<li class="nav-item">
<a href="../docs/ribbons.html" class="nav-link">
Ribbons
</a>
</li>
<li class="nav-item">
<a href="../docs/skeleton.html" class="nav-link">
Skeleton
</a>
</li>
<li class="nav-item">
<a href="../docs/spinners.html" class="nav-link">
Spinners
</a>
</li>
<li class="nav-item">
<a href="../docs/steps.html" class="nav-link">
Steps
</a>
</li>
<li class="nav-item">
<a href="../docs/switch-icon.html" class="nav-link">
Switch icon
</a>
</li>
<li class="nav-item">
<a href="../docs/tables.html" class="nav-link">
Tables
</a>
</li>
<li class="nav-item">
<a href="../docs/tabs.html" class="nav-link">
Tabs
</a>
</li>
<li class="nav-item">
<a href="../docs/timelines.html" class="nav-link">
Timelines
</a>
</li>
<li class="nav-item">
<a href="../docs/toasts.html" class="nav-link">
Toasts
</a>
</li>
<li class="nav-item">
<a href="../docs/tooltips.html" class="nav-link">
Tooltips
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#menu-utils" class="nav-link" data-toggle="collapse" aria-expanded="false">
<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"/><path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z" /></svg>
</span>
Utilities
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-utils">
<li class="nav-item">
<a href="../docs/cursors.html" class="nav-link">
Cursors
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#menu-plugins" class="nav-link" data-toggle="collapse" aria-expanded="false">
<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"/><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><rect x="14" y="14" width="6" height="6" rx="1" /><line x1="14" y1="7" x2="20" y2="7" /><line x1="17" y1="4" x2="17" y2="10" /></svg>
</span>
Plugins
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-plugins">
<li class="nav-item">
<a href="../docs/autosize.html" class="nav-link">
Autosize
</a>
</li>
<li class="nav-item">
<a href="../docs/input-mask.html" class="nav-link">
Form input mask
</a>
</li>
<li class="nav-item">
<a href="../docs/flags.html" class="nav-link">
Flags
</a>
</li>
<li class="nav-item">
<a href="../docs/charts.html" class="nav-link">
Charts
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="../changelog.html" class="nav-link">
<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>
</a>
</li>
</ul>
</div>
<div class="col-lg-9">
<div class="card card-lg">
<div class="card-body">
<div class="markdown">
<div class="d-flex">
<h1 class="h2 mt-0 mb-3">Breadcrumb</h1>
<p class="ml-auto">
<a href="https://getbootstrap.com/docs/4.4/components/breadcrumb/" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" class="icon pr-1 text-blue" 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="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" /><line x1="10" y1="14" x2="20" y2="4" /><polyline points="15 4 20 4 20 9" /></svg>
Bootstrap documentation
</a>
</p>
<div class="mb-5">
<div class="d-flex mb-3">
<h1 class="mt-0">Breadcrumb</h1>
<p class="ml-auto">
<a href="https://getbootstrap.com/docs/4.4/components/breadcrumb/" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" class="icon pr-1 text-blue" 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="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" /><line x1="10" y1="14" x2="20" y2="4" /><polyline points="15 4 20 4 20 9" /></svg>
Bootstrap documentation
</a>
</p>
</div>
<p>Breadcrumbs are used to show the current website or app location and reduce the number of actions users have to take. Thanks to breadcrumbs, they can easily navigate within the website hierarchy and better understand its structure.</p>
</div>
<p>Breadcrumbs are used to show the current website or app location and reduce the number of actions users have to take. Thanks to breadcrumbs, they can easily navigate within the website hierarchy and better understand its structure.</p>
<h2 id="default-markup">Default markup</h2>
<p>Add the <code class="language-plaintext highlighter-rouge">:before</code> pseudo-element in <code class="language-plaintext highlighter-rouge">li</code> tags to use the default separators. The <code class="language-plaintext highlighter-rouge">active</code> modifier in a <code class="language-plaintext highlighter-rouge">li</code> tag will help you indicate the current page location and facilitate navigation within your website or app.</p>
<div class="example no_toc_section example-centered">
<div class="example-content">
<ol class="breadcrumb" aria-label="breadcrumbs">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Library</a></li>
<li class="breadcrumb-item active" aria-current="page"><a href="#">Data</a></li>
<li class="breadcrumb-item"><a href="javascript:void()">Home</a></li>
<li class="breadcrumb-item"><a href="javascript:void()">Library</a></li>
<li class="breadcrumb-item active" aria-current="page"><a href="javascript:void()">Data</a></li>
</ol>
</div>
</div>
@@ -619,9 +667,9 @@
<div class="example no_toc_section example-centered">
<div class="example-content">
<ol class="breadcrumb breadcrumb-dots" aria-label="breadcrumbs">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Library</a></li>
<li class="breadcrumb-item active" aria-current="page"><a href="#">Data</a></li>
<li class="breadcrumb-item"><a href="javascript:void()">Home</a></li>
<li class="breadcrumb-item"><a href="javascript:void()">Library</a></li>
<li class="breadcrumb-item active" aria-current="page"><a href="javascript:void()">Data</a></li>
</ol>
</div>
</div>
@@ -637,9 +685,9 @@
<div class="example no_toc_section example-centered">
<div class="example-content">
<ol class="breadcrumb breadcrumb-arrows" aria-label="breadcrumbs">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Library</a></li>
<li class="breadcrumb-item active" aria-current="page"><a href="#">Data</a></li>
<li class="breadcrumb-item"><a href="javascript:void()">Home</a></li>
<li class="breadcrumb-item"><a href="javascript:void()">Library</a></li>
<li class="breadcrumb-item active" aria-current="page"><a href="javascript:void()">Data</a></li>
</ol>
</div>
</div>
@@ -655,9 +703,9 @@
<div class="example no_toc_section example-centered">
<div class="example-content">
<ol class="breadcrumb breadcrumb-bullets" aria-label="breadcrumbs">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Library</a></li>
<li class="breadcrumb-item active" aria-current="page"><a href="#">Data</a></li>
<li class="breadcrumb-item"><a href="javascript:void()">Home</a></li>
<li class="breadcrumb-item"><a href="javascript:void()">Library</a></li>
<li class="breadcrumb-item active" aria-current="page"><a href="javascript:void()">Data</a></li>
</ol>
</div>
</div>
@@ -675,9 +723,9 @@
<div class="example no_toc_section example-centered">
<div class="example-content">
<ol class="breadcrumb breadcrumb-alternate" aria-label="breadcrumbs">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Library</a></li>
<li class="breadcrumb-item active" aria-current="page"><a href="#">Data</a></li>
<li class="breadcrumb-item"><a href="javascript:void()">Home</a></li>
<li class="breadcrumb-item"><a href="javascript:void()">Library</a></li>
<li class="breadcrumb-item active" aria-current="page"><a href="javascript:void()">Data</a></li>
</ol>
</div>
</div>
@@ -714,7 +762,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="https://github.com/tabler/tabler/releases" target="_blank" class="link-secondary">v1.0.0-alpha.10</a>
<a href="../changelog.html" class="link-secondary">v1.0.0-alpha.11</a>
</li>
</ul>
</div>

File diff suppressed because it is too large Load Diff

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.10
* @version 1.0.0-alpha.11
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -362,181 +362,14 @@
</li>
</ul>
</li>
<li class="nav-item active dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
<li class="nav-item active">
<a class="nav-link" href="../docs/index.html" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><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="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
</span>
<span class="nav-link-title">
Docs
Documentation
</span>
</a>
<ul class="dropdown-menu dropdown-menu-columns dropdown-menu-columns-3">
<li >
<a class="dropdown-item" href="../docs/index.html" >
Introduction
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/alerts.html" >
Alerts
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/autosize.html" >
Autosize
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/avatars.html" >
Avatars
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/badges.html" >
Badges
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/breadcrumb.html" >
Breadcrumb
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/buttons.html" >
Buttons
</a>
</li>
<li >
<a class="dropdown-item active" href="../docs/cards.html" >
Cards
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/carousel.html" >
Carousel
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/colors.html" >
Colors
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/cursors.html" >
Cursors
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/charts.html" >
Charts
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/dropdowns.html" >
Dropdowns
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/divider.html" >
Divider
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/empty.html" >
Empty states
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/flags.html" >
Flags
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/form-elements.html" >
Form elements
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/form-helpers.html" >
Form helpers
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/input-mask.html" >
Form input mask
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/modals.html" >
Modals
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/progress.html" >
Progress
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/payments.html" >
Payments
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/range-slider.html" >
Range slider
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/ribbons.html" >
Ribbons
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/skeleton.html" >
Skeleton
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/spinners.html" >
Spinners
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/steps.html" >
Steps
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/tables.html" >
Tables
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/tabs.html" >
Tabs
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/timelines.html" >
Timelines
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/toasts.html" >
Toasts
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/tooltips.html" >
Tooltips
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/typography.html" >
Typography
</a>
</li>
</ul>
</li>
</ul>
<div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
@@ -565,42 +398,250 @@
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="d-none d-lg-block col-lg-3 order-lg-1 mb-4">
<div class="sticky-top lh-lg py-4">
<a href="https://github.com/tabler/tabler" class="btn btn-white mb-6 btn-block" target="_blank" rel="noreferrer">
<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>
Browse source code
</a>
<h5 class="subheader">On this page</h5>
<ul class="list-unstyled">
<li class="toc-entry toc-h2"><a href="#default-card">Default card</a></li>
<li class="toc-entry toc-h2"><a href="#card-padding">Card padding</a></li>
<li class="toc-entry toc-h2"><a href="#card-with-title">Card with title</a></li>
<li class="toc-entry toc-h2"><a href="#card-with-title-and-image">Card with title and image</a></li>
<li class="toc-entry toc-h2"><a href="#blog-post-card">Blog post card</a></li>
<li class="toc-entry toc-h2"><a href="#row-deck">Row deck</a></li>
<li class="toc-entry toc-h2"><a href="#post-card-with-aside-image">Post card with aside image</a></li>
<li class="toc-entry toc-h2"><a href="#color-variations">Color variations</a></li>
<li class="toc-entry toc-h2"><a href="#stacked-card">Stacked card</a></li>
<li class="toc-entry toc-h2"><a href="#tabbed-card">Tabbed card</a></li>
</ul>
</div>
<div class="row g-5">
<div class="d-none d-lg-block col-lg-3">
<ul class="nav nav-pills nav-vertical">
<li class="nav-item">
<a href="#menu-base" class="nav-link" data-toggle="collapse" aria-expanded="false">
<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"/><path d="M8 9l3 3l-3 3" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
</span>
Getting started
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-base">
<li class="nav-item">
<a href="../docs/index.html" class="nav-link">
Introduction
</a>
</li>
<li class="nav-item">
<a href="../docs/colors.html" class="nav-link">
Colors
</a>
</li>
<li class="nav-item">
<a href="../docs/typography.html" class="nav-link">
Typography
</a>
</li>
<li class="nav-item">
<a href="../docs/icons.html" class="nav-link">
Icons
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#menu-components" class="nav-link" data-toggle="collapse" aria-expanded="true">
<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"/><path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>
</span>
Components
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse show" id="menu-components">
<li class="nav-item">
<a href="../docs/alerts.html" class="nav-link">
Alerts
</a>
</li>
<li class="nav-item">
<a href="../docs/avatars.html" class="nav-link">
Avatars
</a>
</li>
<li class="nav-item">
<a href="../docs/badges.html" class="nav-link">
Badges
</a>
</li>
<li class="nav-item">
<a href="../docs/breadcrumb.html" class="nav-link">
Breadcrumb
</a>
</li>
<li class="nav-item">
<a href="../docs/buttons.html" class="nav-link">
Buttons
</a>
</li>
<li class="nav-item">
<a href="../docs/cards.html" class="nav-link active">
Cards
</a>
</li>
<li class="nav-item">
<a href="../docs/carousel.html" class="nav-link">
Carousel
</a>
</li>
<li class="nav-item">
<a href="../docs/dropdowns.html" class="nav-link">
Dropdowns
</a>
</li>
<li class="nav-item">
<a href="../docs/divider.html" class="nav-link">
Divider
</a>
</li>
<li class="nav-item">
<a href="../docs/empty.html" class="nav-link">
Empty states
</a>
</li>
<li class="nav-item">
<a href="../docs/form-elements.html" class="nav-link">
Form elements
</a>
</li>
<li class="nav-item">
<a href="../docs/form-helpers.html" class="nav-link">
Form helpers
</a>
</li>
<li class="nav-item">
<a href="../docs/modals.html" class="nav-link">
Modals
</a>
</li>
<li class="nav-item">
<a href="../docs/progress.html" class="nav-link">
Progress
</a>
</li>
<li class="nav-item">
<a href="../docs/payments.html" class="nav-link">
Payments
</a>
</li>
<li class="nav-item">
<a href="../docs/range-slider.html" class="nav-link">
Range slider
</a>
</li>
<li class="nav-item">
<a href="../docs/ribbons.html" class="nav-link">
Ribbons
</a>
</li>
<li class="nav-item">
<a href="../docs/skeleton.html" class="nav-link">
Skeleton
</a>
</li>
<li class="nav-item">
<a href="../docs/spinners.html" class="nav-link">
Spinners
</a>
</li>
<li class="nav-item">
<a href="../docs/steps.html" class="nav-link">
Steps
</a>
</li>
<li class="nav-item">
<a href="../docs/switch-icon.html" class="nav-link">
Switch icon
</a>
</li>
<li class="nav-item">
<a href="../docs/tables.html" class="nav-link">
Tables
</a>
</li>
<li class="nav-item">
<a href="../docs/tabs.html" class="nav-link">
Tabs
</a>
</li>
<li class="nav-item">
<a href="../docs/timelines.html" class="nav-link">
Timelines
</a>
</li>
<li class="nav-item">
<a href="../docs/toasts.html" class="nav-link">
Toasts
</a>
</li>
<li class="nav-item">
<a href="../docs/tooltips.html" class="nav-link">
Tooltips
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#menu-utils" class="nav-link" data-toggle="collapse" aria-expanded="false">
<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"/><path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z" /></svg>
</span>
Utilities
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-utils">
<li class="nav-item">
<a href="../docs/cursors.html" class="nav-link">
Cursors
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#menu-plugins" class="nav-link" data-toggle="collapse" aria-expanded="false">
<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"/><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><rect x="14" y="14" width="6" height="6" rx="1" /><line x1="14" y1="7" x2="20" y2="7" /><line x1="17" y1="4" x2="17" y2="10" /></svg>
</span>
Plugins
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-plugins">
<li class="nav-item">
<a href="../docs/autosize.html" class="nav-link">
Autosize
</a>
</li>
<li class="nav-item">
<a href="../docs/input-mask.html" class="nav-link">
Form input mask
</a>
</li>
<li class="nav-item">
<a href="../docs/flags.html" class="nav-link">
Flags
</a>
</li>
<li class="nav-item">
<a href="../docs/charts.html" class="nav-link">
Charts
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="../changelog.html" class="nav-link">
<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>
</a>
</li>
</ul>
</div>
<div class="col-lg-9">
<div class="card card-lg">
<div class="card-body">
<div class="markdown">
<div class="d-flex">
<h1 class="h2 mt-0 mb-3">Cards</h1>
<p class="ml-auto">
<a href="https://getbootstrap.com/docs/4.4/components/card/" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" class="icon pr-1 text-blue" 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="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" /><line x1="10" y1="14" x2="20" y2="4" /><polyline points="15 4 20 4 20 9" /></svg>
Bootstrap documentation
</a>
</p>
<div class="mb-5">
<div class="d-flex mb-3">
<h1 class="mt-0">Cards</h1>
<p class="ml-auto">
<a href="https://getbootstrap.com/docs/4.4/components/card/" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" class="icon pr-1 text-blue" 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="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" /><line x1="10" y1="14" x2="20" y2="4" /><polyline points="15 4 20 4 20 9" /></svg>
Bootstrap documentation
</a>
</p>
</div>
<p>Cards are flexible user interface elements, which help organize content into meaningful sections and make it easier to display on different screen sizes. Cards contain various smaller components, such as images, text, links and buttons and may act as an entry to more detailed information, helping users scan the page quickly and find the most relevant content.</p>
</div>
<p>Cards are flexible user interface elements, which help organize content into meaningful sections and make it easier to display on different screen sizes. Cards contain various smaller components, such as images, text, links and buttons and may act as an entry to more detailed information, helping users scan the page quickly and find the most relevant content.</p>
<h2 id="default-card">Default card</h2>
<p>Use the <code class="language-plaintext highlighter-rouge">.card</code> and <code class="language-plaintext highlighter-rouge">.card-body</code> classes to create a card and use it as the basis for a more advanced card design. A card is a perfect way to organize content and make it look neat and tidy.</p>
<div class="example no_toc_section example-bg">
@@ -629,24 +670,26 @@
<div class="example no_toc_section example-bg">
<div class="example-content">
<div class="example-column example-column-2">
<div class="card card-sm">
<div class="card-body">
<p>This is some text within a card body.</p>
<div class="space-y">
<div class="card card-sm">
<div class="card-body">
<p>This is some text within a card body.</p>
</div>
</div>
</div>
<div class="card">
<div class="card-body">
<p>This is some text within a card body.</p>
<div class="card">
<div class="card-body">
<p>This is some text within a card body.</p>
</div>
</div>
</div>
<div class="card card-md">
<div class="card-body">
<p>This is some text within a card body.</p>
<div class="card card-md">
<div class="card-body">
<p>This is some text within a card body.</p>
</div>
</div>
</div>
<div class="card card-lg">
<div class="card-body">
<p>This is some text within a card body.</p>
<div class="card card-lg">
<div class="card-body">
<p>This is some text within a card body.</p>
</div>
</div>
</div>
</div>
@@ -681,18 +724,20 @@
<div class="example no_toc_section example-bg">
<div class="example-content">
<div class="example-column example-column-1">
<div class="card">
<div class="card-body">
<h3 class="card-title">Card title</h3>
<p>This is some text within a card body.</p>
<div class="space-y">
<div class="card">
<div class="card-body">
<h3 class="card-title">Card title</h3>
<p>This is some text within a card body.</p>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h3 class="card-title">Card title</h3>
</div>
<div class="card-body">
<p>This is some text within a card body.</p>
<div class="card">
<div class="card-header">
<h3 class="card-title">Card title</h3>
</div>
<div class="card-body">
<p>This is some text within a card body.</p>
</div>
</div>
</div>
</div>
@@ -750,20 +795,20 @@
<div class="example-content">
<div class="example-column example-column-1">
<div class="card d-flex flex-column">
<a href="#">
<a href="javascript:void()">
<img class="card-img-top" src="../static/photos//36e273986ed577b8.jpg" alt="How do you know she is a witch?" />
</a>
<div class="card-body d-flex flex-column">
<h3 class="card-title"><a href="#">How do you know she is a witch?</a></h3>
<h3 class="card-title"><a href="javascript:void()">How do you know she is a witch?</a></h3>
<div class="text-muted">Are you suggesting that coconuts migrate? No, no, no! Yes, yes. A bit. But she's got a wart. You ...</div>
<div class="d-flex align-items-center pt-5 mt-auto">
<span class="avatar avatar-md" style="background-image: url(../static/avatars/000f.jpg)"></span>
<div class="d-flex align-items-center pt-4 mt-auto">
<span class="avatar" style="background-image: url(../static/avatars/000f.jpg)"></span>
<div class="ml-3">
<a href="../profile.html" class="text-body">Maryjo Lebarree</a>
<small class="d-block text-muted">3 days ago</small>
<div class="text-muted">3 days ago</div>
</div>
<div class="ml-auto">
<a href="#" class="icon d-none d-md-inline-block ml-3 text-muted">
<a href="javascript:void()" class="icon d-none d-md-inline-block ml-3 text-muted">
<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>
</a>
</div>
@@ -782,11 +827,11 @@
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body d-flex flex-column"</span><span class="nt">&gt;</span>
<span class="nt">&lt;h3</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>How do you know she is a witch?<span class="nt">&lt;/a&gt;&lt;/h3&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">&gt;</span>Are you suggesting that coconuts migrate? No, no, no! Yes, yes. A bit. But she's got a wart. You ...<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex align-items-center pt-5 mt-auto"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar avatar-md"</span> <span class="na">style=</span><span class="s">"background-image: url(...)"</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex align-items-center pt-4 mt-auto"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span> <span class="na">style=</span><span class="s">"background-image: url(...)"</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"ml-3"</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">"text-body"</span><span class="nt">&gt;</span>Maryjo Lebarree<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;small</span> <span class="na">class=</span><span class="s">"d-block text-muted"</span><span class="nt">&gt;</span>3 days ago<span class="nt">&lt;/small&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">&gt;</span>3 days ago<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"ml-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">"icon d-none d-md-inline-block ml-3 text-muted"</span><span class="nt">&gt;</span>
@@ -852,22 +897,22 @@
<div class="card d-flex flex-column">
<div class="row row-0 flex-fill">
<div class="col-md-3">
<a href="#">
<a href="javascript:void()">
<img src="../static/photos//75b555b99d5b38c4.jpg" class="w-100 h-100 object-cover" alt="Card side image" />
</a>
</div>
<div class="col">
<div class="card-body">
<h3 class="card-title"><a href="#">Shut up!</a></h3>
<h3 class="card-title"><a href="javascript:void()">Shut up!</a></h3>
<div class="text-muted">Burn her! How do you know she is a witch? You don't frighten us, English pig-dogs! Go and boil yo...</div>
<div class="d-flex align-items-center pt-5 mt-auto">
<span class="avatar avatar-md" style="background-image: url(../static/avatars/001f.jpg)"></span>
<div class="d-flex align-items-center pt-4 mt-auto">
<span class="avatar" style="background-image: url(../static/avatars/001f.jpg)"></span>
<div class="ml-3">
<a href="../profile.html" class="text-body">Egan Poetz</a>
<small class="d-block text-muted">3 days ago</small>
<div class="text-muted">3 days ago</div>
</div>
<div class="ml-auto">
<a href="#" class="icon d-none d-md-inline-block ml-3 text-red">
<a href="javascript:void()" class="icon d-none d-md-inline-block ml-3 text-red">
<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>
</a>
</div>
@@ -892,11 +937,11 @@
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
<span class="nt">&lt;h3</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Shut up!<span class="nt">&lt;/a&gt;&lt;/h3&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">&gt;</span>Burn her! How do you know she is a witch? You don't frighten us, English pig-dogs! Go and boil yo...<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex align-items-center pt-5 mt-auto"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar avatar-md"</span> <span class="na">style=</span><span class="s">"background-image: url(...)"</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex align-items-center pt-4 mt-auto"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span> <span class="na">style=</span><span class="s">"background-image: url(...)"</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"ml-3"</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">"text-body"</span><span class="nt">&gt;</span>Egan Poetz<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;small</span> <span class="na">class=</span><span class="s">"d-block text-muted"</span><span class="nt">&gt;</span>3 days ago<span class="nt">&lt;/small&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">&gt;</span>3 days ago<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"ml-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">"icon d-none d-md-inline-block ml-3 text-red"</span><span class="nt">&gt;</span>
@@ -1124,7 +1169,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="https://github.com/tabler/tabler/releases" target="_blank" class="link-secondary">v1.0.0-alpha.10</a>
<a href="../changelog.html" class="link-secondary">v1.0.0-alpha.11</a>
</li>
</ul>
</div>

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.10
* @version 1.0.0-alpha.11
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -362,181 +362,14 @@
</li>
</ul>
</li>
<li class="nav-item active dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
<li class="nav-item active">
<a class="nav-link" href="../docs/index.html" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><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="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
</span>
<span class="nav-link-title">
Docs
Documentation
</span>
</a>
<ul class="dropdown-menu dropdown-menu-columns dropdown-menu-columns-3">
<li >
<a class="dropdown-item" href="../docs/index.html" >
Introduction
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/alerts.html" >
Alerts
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/autosize.html" >
Autosize
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/avatars.html" >
Avatars
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/badges.html" >
Badges
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/breadcrumb.html" >
Breadcrumb
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/buttons.html" >
Buttons
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/cards.html" >
Cards
</a>
</li>
<li >
<a class="dropdown-item active" href="../docs/carousel.html" >
Carousel
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/colors.html" >
Colors
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/cursors.html" >
Cursors
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/charts.html" >
Charts
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/dropdowns.html" >
Dropdowns
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/divider.html" >
Divider
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/empty.html" >
Empty states
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/flags.html" >
Flags
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/form-elements.html" >
Form elements
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/form-helpers.html" >
Form helpers
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/input-mask.html" >
Form input mask
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/modals.html" >
Modals
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/progress.html" >
Progress
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/payments.html" >
Payments
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/range-slider.html" >
Range slider
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/ribbons.html" >
Ribbons
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/skeleton.html" >
Skeleton
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/spinners.html" >
Spinners
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/steps.html" >
Steps
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/tables.html" >
Tables
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/tabs.html" >
Tabs
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/timelines.html" >
Timelines
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/toasts.html" >
Toasts
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/tooltips.html" >
Tooltips
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/typography.html" >
Typography
</a>
</li>
</ul>
</li>
</ul>
<div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
@@ -565,33 +398,250 @@
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="d-none d-lg-block col-lg-3 order-lg-1 mb-4">
<div class="sticky-top lh-lg py-4">
<a href="https://github.com/tabler/tabler" class="btn btn-white mb-6 btn-block" target="_blank" rel="noreferrer">
<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>
Browse source code
</a>
<h5 class="subheader">On this page</h5>
<ul class="list-unstyled">
<li class="toc-entry toc-h2"><a href="#default-markup">Default markup</a></li>
</ul>
</div>
<div class="row g-5">
<div class="d-none d-lg-block col-lg-3">
<ul class="nav nav-pills nav-vertical">
<li class="nav-item">
<a href="#menu-base" class="nav-link" data-toggle="collapse" aria-expanded="false">
<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"/><path d="M8 9l3 3l-3 3" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
</span>
Getting started
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-base">
<li class="nav-item">
<a href="../docs/index.html" class="nav-link">
Introduction
</a>
</li>
<li class="nav-item">
<a href="../docs/colors.html" class="nav-link">
Colors
</a>
</li>
<li class="nav-item">
<a href="../docs/typography.html" class="nav-link">
Typography
</a>
</li>
<li class="nav-item">
<a href="../docs/icons.html" class="nav-link">
Icons
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#menu-components" class="nav-link" data-toggle="collapse" aria-expanded="true">
<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"/><path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>
</span>
Components
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse show" id="menu-components">
<li class="nav-item">
<a href="../docs/alerts.html" class="nav-link">
Alerts
</a>
</li>
<li class="nav-item">
<a href="../docs/avatars.html" class="nav-link">
Avatars
</a>
</li>
<li class="nav-item">
<a href="../docs/badges.html" class="nav-link">
Badges
</a>
</li>
<li class="nav-item">
<a href="../docs/breadcrumb.html" class="nav-link">
Breadcrumb
</a>
</li>
<li class="nav-item">
<a href="../docs/buttons.html" class="nav-link">
Buttons
</a>
</li>
<li class="nav-item">
<a href="../docs/cards.html" class="nav-link">
Cards
</a>
</li>
<li class="nav-item">
<a href="../docs/carousel.html" class="nav-link active">
Carousel
</a>
</li>
<li class="nav-item">
<a href="../docs/dropdowns.html" class="nav-link">
Dropdowns
</a>
</li>
<li class="nav-item">
<a href="../docs/divider.html" class="nav-link">
Divider
</a>
</li>
<li class="nav-item">
<a href="../docs/empty.html" class="nav-link">
Empty states
</a>
</li>
<li class="nav-item">
<a href="../docs/form-elements.html" class="nav-link">
Form elements
</a>
</li>
<li class="nav-item">
<a href="../docs/form-helpers.html" class="nav-link">
Form helpers
</a>
</li>
<li class="nav-item">
<a href="../docs/modals.html" class="nav-link">
Modals
</a>
</li>
<li class="nav-item">
<a href="../docs/progress.html" class="nav-link">
Progress
</a>
</li>
<li class="nav-item">
<a href="../docs/payments.html" class="nav-link">
Payments
</a>
</li>
<li class="nav-item">
<a href="../docs/range-slider.html" class="nav-link">
Range slider
</a>
</li>
<li class="nav-item">
<a href="../docs/ribbons.html" class="nav-link">
Ribbons
</a>
</li>
<li class="nav-item">
<a href="../docs/skeleton.html" class="nav-link">
Skeleton
</a>
</li>
<li class="nav-item">
<a href="../docs/spinners.html" class="nav-link">
Spinners
</a>
</li>
<li class="nav-item">
<a href="../docs/steps.html" class="nav-link">
Steps
</a>
</li>
<li class="nav-item">
<a href="../docs/switch-icon.html" class="nav-link">
Switch icon
</a>
</li>
<li class="nav-item">
<a href="../docs/tables.html" class="nav-link">
Tables
</a>
</li>
<li class="nav-item">
<a href="../docs/tabs.html" class="nav-link">
Tabs
</a>
</li>
<li class="nav-item">
<a href="../docs/timelines.html" class="nav-link">
Timelines
</a>
</li>
<li class="nav-item">
<a href="../docs/toasts.html" class="nav-link">
Toasts
</a>
</li>
<li class="nav-item">
<a href="../docs/tooltips.html" class="nav-link">
Tooltips
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#menu-utils" class="nav-link" data-toggle="collapse" aria-expanded="false">
<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"/><path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z" /></svg>
</span>
Utilities
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-utils">
<li class="nav-item">
<a href="../docs/cursors.html" class="nav-link">
Cursors
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#menu-plugins" class="nav-link" data-toggle="collapse" aria-expanded="false">
<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"/><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><rect x="14" y="14" width="6" height="6" rx="1" /><line x1="14" y1="7" x2="20" y2="7" /><line x1="17" y1="4" x2="17" y2="10" /></svg>
</span>
Plugins
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-plugins">
<li class="nav-item">
<a href="../docs/autosize.html" class="nav-link">
Autosize
</a>
</li>
<li class="nav-item">
<a href="../docs/input-mask.html" class="nav-link">
Form input mask
</a>
</li>
<li class="nav-item">
<a href="../docs/flags.html" class="nav-link">
Flags
</a>
</li>
<li class="nav-item">
<a href="../docs/charts.html" class="nav-link">
Charts
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="../changelog.html" class="nav-link">
<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>
</a>
</li>
</ul>
</div>
<div class="col-lg-9">
<div class="card card-lg">
<div class="card-body">
<div class="markdown">
<div class="d-flex">
<h1 class="h2 mt-0 mb-3">Carousel</h1>
<p class="ml-auto">
<a href="https://getbootstrap.com/docs/4.4/components/carousel/" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" class="icon pr-1 text-blue" 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="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" /><line x1="10" y1="14" x2="20" y2="4" /><polyline points="15 4 20 4 20 9" /></svg>
Bootstrap documentation
</a>
</p>
<div class="mb-5">
<div class="d-flex mb-3">
<h1 class="mt-0">Carousel</h1>
<p class="ml-auto">
<a href="https://getbootstrap.com/docs/4.4/components/carousel/" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" class="icon pr-1 text-blue" 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="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" /><line x1="10" y1="14" x2="20" y2="4" /><polyline points="15 4 20 4 20 9" /></svg>
Bootstrap documentation
</a>
</p>
</div>
<p>A carousel is used to display multiple pieces of visual content without taking up too much space. Carousels eliminate the need to scroll down the page to see all content and are a popular method of displaying marketing information.</p>
</div>
<p>A carousel is used to display multiple pieces of visual content without taking up too much space. Carousels eliminate the need to scroll down the page to see all content and are a popular method of displaying marketing information.</p>
<h2 id="default-markup">Default markup</h2>
<p>Use a carousel to make your website design more visually appealing for users. In the default carousel design, respective elements slide automatically and users can go to the next slide by clicking an arrow.</p>
<div class="example no_toc_section example-centered">
@@ -696,7 +746,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="https://github.com/tabler/tabler/releases" target="_blank" class="link-secondary">v1.0.0-alpha.10</a>
<a href="../changelog.html" class="link-secondary">v1.0.0-alpha.11</a>
</li>
</ul>
</div>

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.10
* @version 1.0.0-alpha.11
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -361,181 +361,14 @@
</li>
</ul>
</li>
<li class="nav-item active dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
<li class="nav-item active">
<a class="nav-link" href="../docs/index.html" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><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="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
</span>
<span class="nav-link-title">
Docs
Documentation
</span>
</a>
<ul class="dropdown-menu dropdown-menu-columns dropdown-menu-columns-3">
<li >
<a class="dropdown-item" href="../docs/index.html" >
Introduction
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/alerts.html" >
Alerts
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/autosize.html" >
Autosize
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/avatars.html" >
Avatars
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/badges.html" >
Badges
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/breadcrumb.html" >
Breadcrumb
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/buttons.html" >
Buttons
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/cards.html" >
Cards
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/carousel.html" >
Carousel
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/colors.html" >
Colors
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/cursors.html" >
Cursors
</a>
</li>
<li >
<a class="dropdown-item active" href="../docs/charts.html" >
Charts
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/dropdowns.html" >
Dropdowns
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/divider.html" >
Divider
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/empty.html" >
Empty states
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/flags.html" >
Flags
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/form-elements.html" >
Form elements
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/form-helpers.html" >
Form helpers
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/input-mask.html" >
Form input mask
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/modals.html" >
Modals
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/progress.html" >
Progress
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/payments.html" >
Payments
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/range-slider.html" >
Range slider
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/ribbons.html" >
Ribbons
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/skeleton.html" >
Skeleton
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/spinners.html" >
Spinners
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/steps.html" >
Steps
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/tables.html" >
Tables
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/tabs.html" >
Tabs
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/timelines.html" >
Timelines
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/toasts.html" >
Toasts
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/tooltips.html" >
Tooltips
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/typography.html" >
Typography
</a>
</li>
</ul>
</li>
</ul>
<div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
@@ -564,25 +397,242 @@
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="d-none d-lg-block col-lg-3 order-lg-1 mb-4">
<div class="sticky-top lh-lg py-4">
<a href="https://github.com/tabler/tabler" class="btn btn-white mb-6 btn-block" target="_blank" rel="noreferrer">
<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>
Browse source code
</a>
<h5 class="subheader">On this page</h5>
<ul class="list-unstyled">
<li class="toc-entry toc-h2"><a href="#default-markup">Default markup</a></li>
</ul>
</div>
<div class="row g-5">
<div class="d-none d-lg-block col-lg-3">
<ul class="nav nav-pills nav-vertical">
<li class="nav-item">
<a href="#menu-base" class="nav-link" data-toggle="collapse" aria-expanded="false">
<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"/><path d="M8 9l3 3l-3 3" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
</span>
Getting started
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-base">
<li class="nav-item">
<a href="../docs/index.html" class="nav-link">
Introduction
</a>
</li>
<li class="nav-item">
<a href="../docs/colors.html" class="nav-link">
Colors
</a>
</li>
<li class="nav-item">
<a href="../docs/typography.html" class="nav-link">
Typography
</a>
</li>
<li class="nav-item">
<a href="../docs/icons.html" class="nav-link">
Icons
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#menu-components" class="nav-link" data-toggle="collapse" aria-expanded="true">
<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"/><path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>
</span>
Components
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse show" id="menu-components">
<li class="nav-item">
<a href="../docs/alerts.html" class="nav-link">
Alerts
</a>
</li>
<li class="nav-item">
<a href="../docs/avatars.html" class="nav-link">
Avatars
</a>
</li>
<li class="nav-item">
<a href="../docs/badges.html" class="nav-link">
Badges
</a>
</li>
<li class="nav-item">
<a href="../docs/breadcrumb.html" class="nav-link">
Breadcrumb
</a>
</li>
<li class="nav-item">
<a href="../docs/buttons.html" class="nav-link">
Buttons
</a>
</li>
<li class="nav-item">
<a href="../docs/cards.html" class="nav-link">
Cards
</a>
</li>
<li class="nav-item">
<a href="../docs/carousel.html" class="nav-link">
Carousel
</a>
</li>
<li class="nav-item">
<a href="../docs/dropdowns.html" class="nav-link">
Dropdowns
</a>
</li>
<li class="nav-item">
<a href="../docs/divider.html" class="nav-link">
Divider
</a>
</li>
<li class="nav-item">
<a href="../docs/empty.html" class="nav-link">
Empty states
</a>
</li>
<li class="nav-item">
<a href="../docs/form-elements.html" class="nav-link">
Form elements
</a>
</li>
<li class="nav-item">
<a href="../docs/form-helpers.html" class="nav-link">
Form helpers
</a>
</li>
<li class="nav-item">
<a href="../docs/modals.html" class="nav-link">
Modals
</a>
</li>
<li class="nav-item">
<a href="../docs/progress.html" class="nav-link">
Progress
</a>
</li>
<li class="nav-item">
<a href="../docs/payments.html" class="nav-link">
Payments
</a>
</li>
<li class="nav-item">
<a href="../docs/range-slider.html" class="nav-link">
Range slider
</a>
</li>
<li class="nav-item">
<a href="../docs/ribbons.html" class="nav-link">
Ribbons
</a>
</li>
<li class="nav-item">
<a href="../docs/skeleton.html" class="nav-link">
Skeleton
</a>
</li>
<li class="nav-item">
<a href="../docs/spinners.html" class="nav-link">
Spinners
</a>
</li>
<li class="nav-item">
<a href="../docs/steps.html" class="nav-link">
Steps
</a>
</li>
<li class="nav-item">
<a href="../docs/switch-icon.html" class="nav-link">
Switch icon
</a>
</li>
<li class="nav-item">
<a href="../docs/tables.html" class="nav-link">
Tables
</a>
</li>
<li class="nav-item">
<a href="../docs/tabs.html" class="nav-link">
Tabs
</a>
</li>
<li class="nav-item">
<a href="../docs/timelines.html" class="nav-link">
Timelines
</a>
</li>
<li class="nav-item">
<a href="../docs/toasts.html" class="nav-link">
Toasts
</a>
</li>
<li class="nav-item">
<a href="../docs/tooltips.html" class="nav-link">
Tooltips
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#menu-utils" class="nav-link" data-toggle="collapse" aria-expanded="false">
<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"/><path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z" /></svg>
</span>
Utilities
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-utils">
<li class="nav-item">
<a href="../docs/cursors.html" class="nav-link">
Cursors
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#menu-plugins" class="nav-link" data-toggle="collapse" aria-expanded="false">
<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"/><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><rect x="14" y="14" width="6" height="6" rx="1" /><line x1="14" y1="7" x2="20" y2="7" /><line x1="17" y1="4" x2="17" y2="10" /></svg>
</span>
Plugins
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-plugins">
<li class="nav-item">
<a href="../docs/autosize.html" class="nav-link">
Autosize
</a>
</li>
<li class="nav-item">
<a href="../docs/input-mask.html" class="nav-link">
Form input mask
</a>
</li>
<li class="nav-item">
<a href="../docs/flags.html" class="nav-link">
Flags
</a>
</li>
<li class="nav-item">
<a href="../docs/charts.html" class="nav-link active">
Charts
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="../changelog.html" class="nav-link">
<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>
</a>
</li>
</ul>
</div>
<div class="col-lg-9">
<div class="card card-lg">
<div class="card-body">
<div class="markdown">
<div class="d-flex">
<h1 class="h2 mt-0 mb-3">Charts</h1>
<div class="mb-5">
<div class="d-flex mb-3">
<h1 class="mt-0">Charts</h1>
</div>
</div>
<h2 id="default-markup">Default markup</h2>
</div>
@@ -609,7 +659,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="https://github.com/tabler/tabler/releases" target="_blank" class="link-secondary">v1.0.0-alpha.10</a>
<a href="../changelog.html" class="link-secondary">v1.0.0-alpha.11</a>
</li>
</ul>
</div>

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.10
* @version 1.0.0-alpha.11
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -362,181 +362,14 @@
</li>
</ul>
</li>
<li class="nav-item active dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
<li class="nav-item active">
<a class="nav-link" href="../docs/index.html" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><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="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
</span>
<span class="nav-link-title">
Docs
Documentation
</span>
</a>
<ul class="dropdown-menu dropdown-menu-columns dropdown-menu-columns-3">
<li >
<a class="dropdown-item" href="../docs/index.html" >
Introduction
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/alerts.html" >
Alerts
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/autosize.html" >
Autosize
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/avatars.html" >
Avatars
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/badges.html" >
Badges
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/breadcrumb.html" >
Breadcrumb
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/buttons.html" >
Buttons
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/cards.html" >
Cards
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/carousel.html" >
Carousel
</a>
</li>
<li >
<a class="dropdown-item active" href="../docs/colors.html" >
Colors
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/cursors.html" >
Cursors
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/charts.html" >
Charts
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/dropdowns.html" >
Dropdowns
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/divider.html" >
Divider
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/empty.html" >
Empty states
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/flags.html" >
Flags
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/form-elements.html" >
Form elements
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/form-helpers.html" >
Form helpers
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/input-mask.html" >
Form input mask
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/modals.html" >
Modals
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/progress.html" >
Progress
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/payments.html" >
Payments
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/range-slider.html" >
Range slider
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/ribbons.html" >
Ribbons
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/skeleton.html" >
Skeleton
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/spinners.html" >
Spinners
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/steps.html" >
Steps
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/tables.html" >
Tables
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/tabs.html" >
Tabs
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/timelines.html" >
Timelines
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/toasts.html" >
Toasts
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/tooltips.html" >
Tooltips
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/typography.html" >
Typography
</a>
</li>
</ul>
</li>
</ul>
<div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
@@ -565,34 +398,250 @@
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="d-none d-lg-block col-lg-3 order-lg-1 mb-4">
<div class="sticky-top lh-lg py-4">
<a href="https://github.com/tabler/tabler" class="btn btn-white mb-6 btn-block" target="_blank" rel="noreferrer">
<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>
Browse source code
</a>
<h5 class="subheader">On this page</h5>
<ul class="list-unstyled">
<li class="toc-entry toc-h2"><a href="#base-colors">Base colors</a></li>
<li class="toc-entry toc-h2"><a href="#light-colors">Light colors</a></li>
</ul>
</div>
<div class="row g-5">
<div class="d-none d-lg-block col-lg-3">
<ul class="nav nav-pills nav-vertical">
<li class="nav-item">
<a href="#menu-base" class="nav-link" data-toggle="collapse" aria-expanded="true">
<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"/><path d="M8 9l3 3l-3 3" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
</span>
Getting started
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse show" id="menu-base">
<li class="nav-item">
<a href="../docs/index.html" class="nav-link">
Introduction
</a>
</li>
<li class="nav-item">
<a href="../docs/colors.html" class="nav-link active">
Colors
</a>
</li>
<li class="nav-item">
<a href="../docs/typography.html" class="nav-link">
Typography
</a>
</li>
<li class="nav-item">
<a href="../docs/icons.html" class="nav-link">
Icons
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#menu-components" class="nav-link" data-toggle="collapse" aria-expanded="false">
<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"/><path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>
</span>
Components
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-components">
<li class="nav-item">
<a href="../docs/alerts.html" class="nav-link">
Alerts
</a>
</li>
<li class="nav-item">
<a href="../docs/avatars.html" class="nav-link">
Avatars
</a>
</li>
<li class="nav-item">
<a href="../docs/badges.html" class="nav-link">
Badges
</a>
</li>
<li class="nav-item">
<a href="../docs/breadcrumb.html" class="nav-link">
Breadcrumb
</a>
</li>
<li class="nav-item">
<a href="../docs/buttons.html" class="nav-link">
Buttons
</a>
</li>
<li class="nav-item">
<a href="../docs/cards.html" class="nav-link">
Cards
</a>
</li>
<li class="nav-item">
<a href="../docs/carousel.html" class="nav-link">
Carousel
</a>
</li>
<li class="nav-item">
<a href="../docs/dropdowns.html" class="nav-link">
Dropdowns
</a>
</li>
<li class="nav-item">
<a href="../docs/divider.html" class="nav-link">
Divider
</a>
</li>
<li class="nav-item">
<a href="../docs/empty.html" class="nav-link">
Empty states
</a>
</li>
<li class="nav-item">
<a href="../docs/form-elements.html" class="nav-link">
Form elements
</a>
</li>
<li class="nav-item">
<a href="../docs/form-helpers.html" class="nav-link">
Form helpers
</a>
</li>
<li class="nav-item">
<a href="../docs/modals.html" class="nav-link">
Modals
</a>
</li>
<li class="nav-item">
<a href="../docs/progress.html" class="nav-link">
Progress
</a>
</li>
<li class="nav-item">
<a href="../docs/payments.html" class="nav-link">
Payments
</a>
</li>
<li class="nav-item">
<a href="../docs/range-slider.html" class="nav-link">
Range slider
</a>
</li>
<li class="nav-item">
<a href="../docs/ribbons.html" class="nav-link">
Ribbons
</a>
</li>
<li class="nav-item">
<a href="../docs/skeleton.html" class="nav-link">
Skeleton
</a>
</li>
<li class="nav-item">
<a href="../docs/spinners.html" class="nav-link">
Spinners
</a>
</li>
<li class="nav-item">
<a href="../docs/steps.html" class="nav-link">
Steps
</a>
</li>
<li class="nav-item">
<a href="../docs/switch-icon.html" class="nav-link">
Switch icon
</a>
</li>
<li class="nav-item">
<a href="../docs/tables.html" class="nav-link">
Tables
</a>
</li>
<li class="nav-item">
<a href="../docs/tabs.html" class="nav-link">
Tabs
</a>
</li>
<li class="nav-item">
<a href="../docs/timelines.html" class="nav-link">
Timelines
</a>
</li>
<li class="nav-item">
<a href="../docs/toasts.html" class="nav-link">
Toasts
</a>
</li>
<li class="nav-item">
<a href="../docs/tooltips.html" class="nav-link">
Tooltips
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#menu-utils" class="nav-link" data-toggle="collapse" aria-expanded="false">
<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"/><path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z" /></svg>
</span>
Utilities
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-utils">
<li class="nav-item">
<a href="../docs/cursors.html" class="nav-link">
Cursors
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#menu-plugins" class="nav-link" data-toggle="collapse" aria-expanded="false">
<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"/><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><rect x="14" y="14" width="6" height="6" rx="1" /><line x1="14" y1="7" x2="20" y2="7" /><line x1="17" y1="4" x2="17" y2="10" /></svg>
</span>
Plugins
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-plugins">
<li class="nav-item">
<a href="../docs/autosize.html" class="nav-link">
Autosize
</a>
</li>
<li class="nav-item">
<a href="../docs/input-mask.html" class="nav-link">
Form input mask
</a>
</li>
<li class="nav-item">
<a href="../docs/flags.html" class="nav-link">
Flags
</a>
</li>
<li class="nav-item">
<a href="../docs/charts.html" class="nav-link">
Charts
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="../changelog.html" class="nav-link">
<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>
</a>
</li>
</ul>
</div>
<div class="col-lg-9">
<div class="card card-lg">
<div class="card-body">
<div class="markdown">
<div class="d-flex">
<h1 class="h2 mt-0 mb-3">Colors</h1>
<p class="ml-auto">
<a href="https://getbootstrap.com/docs/4.4/utilities/colors/" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" class="icon pr-1 text-blue" 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="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" /><line x1="10" y1="14" x2="20" y2="4" /><polyline points="15 4 20 4 20 9" /></svg>
Bootstrap documentation
</a>
</p>
<div class="mb-5">
<div class="d-flex mb-3">
<h1 class="mt-0">Colors</h1>
<p class="ml-auto">
<a href="https://getbootstrap.com/docs/4.4/utilities/colors/" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" class="icon pr-1 text-blue" 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="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" /><line x1="10" y1="14" x2="20" y2="4" /><polyline points="15 4 20 4 20 9" /></svg>
Bootstrap documentation
</a>
</p>
</div>
<p>The choice of colors for a website or app interface has an big influence on how users interact with the product and what decisions they make. Harmonic colors can contribute to a nice first impression and encourage users to engage with your product, so it's a very important aspect of a successful design, which needs to be well thought out.</p>
</div>
<p>The choice of colors for a website or app interface has an big influence on how users interact with the product and what decisions they make. Harmonic colors can contribute to a nice first impression and encourage users to engage with your product, so it's a very important aspect of a successful design, which needs to be well thought out.</p>
<h2 id="base-colors">Base colors</h2>
<p>Choose one of the available colors from the basic color palette and make your design attractive for users. You can use the colors to customize the design of components, indicate different states or suggest actions you want users to take.</p>
<div class="example">
@@ -845,7 +894,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="https://github.com/tabler/tabler/releases" target="_blank" class="link-secondary">v1.0.0-alpha.10</a>
<a href="../changelog.html" class="link-secondary">v1.0.0-alpha.11</a>
</li>
</ul>
</div>

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.10
* @version 1.0.0-alpha.11
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -362,181 +362,14 @@
</li>
</ul>
</li>
<li class="nav-item active dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
<li class="nav-item active">
<a class="nav-link" href="../docs/index.html" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><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="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
</span>
<span class="nav-link-title">
Docs
Documentation
</span>
</a>
<ul class="dropdown-menu dropdown-menu-columns dropdown-menu-columns-3">
<li >
<a class="dropdown-item" href="../docs/index.html" >
Introduction
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/alerts.html" >
Alerts
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/autosize.html" >
Autosize
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/avatars.html" >
Avatars
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/badges.html" >
Badges
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/breadcrumb.html" >
Breadcrumb
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/buttons.html" >
Buttons
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/cards.html" >
Cards
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/carousel.html" >
Carousel
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/colors.html" >
Colors
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/cursors.html" >
Cursors
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/charts.html" >
Charts
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/dropdowns.html" >
Dropdowns
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/divider.html" >
Divider
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/empty.html" >
Empty states
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/flags.html" >
Flags
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/form-elements.html" >
Form elements
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/form-helpers.html" >
Form helpers
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/input-mask.html" >
Form input mask
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/modals.html" >
Modals
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/progress.html" >
Progress
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/payments.html" >
Payments
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/range-slider.html" >
Range slider
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/ribbons.html" >
Ribbons
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/skeleton.html" >
Skeleton
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/spinners.html" >
Spinners
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/steps.html" >
Steps
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/tables.html" >
Tables
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/tabs.html" >
Tabs
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/timelines.html" >
Timelines
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/toasts.html" >
Toasts
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/tooltips.html" >
Tooltips
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/typography.html" >
Typography
</a>
</li>
</ul>
</li>
</ul>
<div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
@@ -565,36 +398,244 @@
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="d-none d-lg-block col-lg-3 order-lg-1 mb-4">
<div class="sticky-top lh-lg py-4">
<a href="https://github.com/tabler/tabler" class="btn btn-white mb-6 btn-block" target="_blank" rel="noreferrer">
<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>
Browse source code
</a>
<h5 class="subheader">On this page</h5>
<ul class="list-unstyled">
<li class="toc-entry toc-h2"><a href="#default-countup">Default countup</a></li>
<li class="toc-entry toc-h2"><a href="#duration">Duration</a></li>
<li class="toc-entry toc-h2"><a href="#starting-value">Starting value</a></li>
<li class="toc-entry toc-h2"><a href="#decimal-places">Decimal places</a></li>
<li class="toc-entry toc-h2"><a href="#easing">Easing</a></li>
<li class="toc-entry toc-h2"><a href="#use-grouping">Use grouping</a></li>
<li class="toc-entry toc-h2"><a href="#separator">Separator</a></li>
<li class="toc-entry toc-h2"><a href="#decimal-separator">Decimal separator</a></li>
<li class="toc-entry toc-h2"><a href="#prefix">Prefix</a></li>
<li class="toc-entry toc-h2"><a href="#suffix">Suffix</a></li>
</ul>
</div>
<div class="row g-5">
<div class="d-none d-lg-block col-lg-3">
<ul class="nav nav-pills nav-vertical">
<li class="nav-item">
<a href="#menu-base" class="nav-link" data-toggle="collapse" aria-expanded="false">
<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"/><path d="M8 9l3 3l-3 3" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
</span>
Getting started
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-base">
<li class="nav-item">
<a href="../docs/index.html" class="nav-link">
Introduction
</a>
</li>
<li class="nav-item">
<a href="../docs/colors.html" class="nav-link">
Colors
</a>
</li>
<li class="nav-item">
<a href="../docs/typography.html" class="nav-link">
Typography
</a>
</li>
<li class="nav-item">
<a href="../docs/icons.html" class="nav-link">
Icons
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#menu-components" class="nav-link" data-toggle="collapse" aria-expanded="true">
<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"/><path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>
</span>
Components
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse show" id="menu-components">
<li class="nav-item">
<a href="../docs/alerts.html" class="nav-link">
Alerts
</a>
</li>
<li class="nav-item">
<a href="../docs/avatars.html" class="nav-link">
Avatars
</a>
</li>
<li class="nav-item">
<a href="../docs/badges.html" class="nav-link">
Badges
</a>
</li>
<li class="nav-item">
<a href="../docs/breadcrumb.html" class="nav-link">
Breadcrumb
</a>
</li>
<li class="nav-item">
<a href="../docs/buttons.html" class="nav-link">
Buttons
</a>
</li>
<li class="nav-item">
<a href="../docs/cards.html" class="nav-link">
Cards
</a>
</li>
<li class="nav-item">
<a href="../docs/carousel.html" class="nav-link">
Carousel
</a>
</li>
<li class="nav-item">
<a href="../docs/dropdowns.html" class="nav-link">
Dropdowns
</a>
</li>
<li class="nav-item">
<a href="../docs/divider.html" class="nav-link">
Divider
</a>
</li>
<li class="nav-item">
<a href="../docs/empty.html" class="nav-link">
Empty states
</a>
</li>
<li class="nav-item">
<a href="../docs/form-elements.html" class="nav-link">
Form elements
</a>
</li>
<li class="nav-item">
<a href="../docs/form-helpers.html" class="nav-link">
Form helpers
</a>
</li>
<li class="nav-item">
<a href="../docs/modals.html" class="nav-link">
Modals
</a>
</li>
<li class="nav-item">
<a href="../docs/progress.html" class="nav-link">
Progress
</a>
</li>
<li class="nav-item">
<a href="../docs/payments.html" class="nav-link">
Payments
</a>
</li>
<li class="nav-item">
<a href="../docs/range-slider.html" class="nav-link">
Range slider
</a>
</li>
<li class="nav-item">
<a href="../docs/ribbons.html" class="nav-link">
Ribbons
</a>
</li>
<li class="nav-item">
<a href="../docs/skeleton.html" class="nav-link">
Skeleton
</a>
</li>
<li class="nav-item">
<a href="../docs/spinners.html" class="nav-link">
Spinners
</a>
</li>
<li class="nav-item">
<a href="../docs/steps.html" class="nav-link">
Steps
</a>
</li>
<li class="nav-item">
<a href="../docs/switch-icon.html" class="nav-link">
Switch icon
</a>
</li>
<li class="nav-item">
<a href="../docs/tables.html" class="nav-link">
Tables
</a>
</li>
<li class="nav-item">
<a href="../docs/tabs.html" class="nav-link">
Tabs
</a>
</li>
<li class="nav-item">
<a href="../docs/timelines.html" class="nav-link">
Timelines
</a>
</li>
<li class="nav-item">
<a href="../docs/toasts.html" class="nav-link">
Toasts
</a>
</li>
<li class="nav-item">
<a href="../docs/tooltips.html" class="nav-link">
Tooltips
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#menu-utils" class="nav-link" data-toggle="collapse" aria-expanded="false">
<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"/><path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z" /></svg>
</span>
Utilities
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-utils">
<li class="nav-item">
<a href="../docs/cursors.html" class="nav-link">
Cursors
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#menu-plugins" class="nav-link" data-toggle="collapse" aria-expanded="false">
<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"/><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><rect x="14" y="14" width="6" height="6" rx="1" /><line x1="14" y1="7" x2="20" y2="7" /><line x1="17" y1="4" x2="17" y2="10" /></svg>
</span>
Plugins
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-plugins">
<li class="nav-item">
<a href="../docs/autosize.html" class="nav-link">
Autosize
</a>
</li>
<li class="nav-item">
<a href="../docs/input-mask.html" class="nav-link">
Form input mask
</a>
</li>
<li class="nav-item">
<a href="../docs/flags.html" class="nav-link">
Flags
</a>
</li>
<li class="nav-item">
<a href="../docs/charts.html" class="nav-link">
Charts
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="../changelog.html" class="nav-link">
<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>
</a>
</li>
</ul>
</div>
<div class="col-lg-9">
<div class="card card-lg">
<div class="card-body">
<div class="markdown">
<div class="d-flex">
<h1 class="h2 mt-0 mb-3">Countup</h1>
<div class="mb-5">
<div class="d-flex mb-3">
<h1 class="mt-0">Countup</h1>
</div>
<p>A countup element is used to display numerical data in an interesting way and make the interface more interactive. All the available options can be found [here](https://inorganik.github.io/countUp.js/)</p>
</div>
<p>A countup element is used to display numerical data in an interesting way and make the interface more interactive. All the available options can be found [here](https://inorganik.github.io/countUp.js/)</p>
<h2 id="default-countup">Default countup</h2>
<p>To create a countup, add <code class="language-plaintext highlighter-rouge">data-countup</code> to any HTML text tag and specify the number which is to be reached. The animation will be triggered as soon as the number enters the viewport.</p>
<div class="example no_toc_section">
@@ -788,7 +829,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="https://github.com/tabler/tabler/releases" target="_blank" class="link-secondary">v1.0.0-alpha.10</a>
<a href="../changelog.html" class="link-secondary">v1.0.0-alpha.11</a>
</li>
</ul>
</div>

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.10
* @version 1.0.0-alpha.11
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -362,181 +362,14 @@
</li>
</ul>
</li>
<li class="nav-item active dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
<li class="nav-item active">
<a class="nav-link" href="../docs/index.html" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><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="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
</span>
<span class="nav-link-title">
Docs
Documentation
</span>
</a>
<ul class="dropdown-menu dropdown-menu-columns dropdown-menu-columns-3">
<li >
<a class="dropdown-item" href="../docs/index.html" >
Introduction
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/alerts.html" >
Alerts
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/autosize.html" >
Autosize
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/avatars.html" >
Avatars
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/badges.html" >
Badges
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/breadcrumb.html" >
Breadcrumb
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/buttons.html" >
Buttons
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/cards.html" >
Cards
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/carousel.html" >
Carousel
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/colors.html" >
Colors
</a>
</li>
<li >
<a class="dropdown-item active" href="../docs/cursors.html" >
Cursors
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/charts.html" >
Charts
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/dropdowns.html" >
Dropdowns
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/divider.html" >
Divider
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/empty.html" >
Empty states
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/flags.html" >
Flags
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/form-elements.html" >
Form elements
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/form-helpers.html" >
Form helpers
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/input-mask.html" >
Form input mask
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/modals.html" >
Modals
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/progress.html" >
Progress
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/payments.html" >
Payments
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/range-slider.html" >
Range slider
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/ribbons.html" >
Ribbons
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/skeleton.html" >
Skeleton
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/spinners.html" >
Spinners
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/steps.html" >
Steps
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/tables.html" >
Tables
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/tabs.html" >
Tabs
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/timelines.html" >
Timelines
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/toasts.html" >
Toasts
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/tooltips.html" >
Tooltips
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/typography.html" >
Typography
</a>
</li>
</ul>
</li>
</ul>
<div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
@@ -565,27 +398,244 @@
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="d-none d-lg-block col-lg-3 order-lg-1 mb-4">
<div class="sticky-top lh-lg py-4">
<a href="https://github.com/tabler/tabler" class="btn btn-white mb-6 btn-block" target="_blank" rel="noreferrer">
<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>
Browse source code
</a>
<h5 class="subheader">On this page</h5>
<ul class="list-unstyled">
<li class="toc-entry toc-h2"><a href="#cursor-utilities">Cursor utilities</a></li>
</ul>
</div>
<div class="row g-5">
<div class="d-none d-lg-block col-lg-3">
<ul class="nav nav-pills nav-vertical">
<li class="nav-item">
<a href="#menu-base" class="nav-link" data-toggle="collapse" aria-expanded="false">
<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"/><path d="M8 9l3 3l-3 3" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
</span>
Getting started
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-base">
<li class="nav-item">
<a href="../docs/index.html" class="nav-link">
Introduction
</a>
</li>
<li class="nav-item">
<a href="../docs/colors.html" class="nav-link">
Colors
</a>
</li>
<li class="nav-item">
<a href="../docs/typography.html" class="nav-link">
Typography
</a>
</li>
<li class="nav-item">
<a href="../docs/icons.html" class="nav-link">
Icons
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#menu-components" class="nav-link" data-toggle="collapse" aria-expanded="false">
<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"/><path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>
</span>
Components
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-components">
<li class="nav-item">
<a href="../docs/alerts.html" class="nav-link">
Alerts
</a>
</li>
<li class="nav-item">
<a href="../docs/avatars.html" class="nav-link">
Avatars
</a>
</li>
<li class="nav-item">
<a href="../docs/badges.html" class="nav-link">
Badges
</a>
</li>
<li class="nav-item">
<a href="../docs/breadcrumb.html" class="nav-link">
Breadcrumb
</a>
</li>
<li class="nav-item">
<a href="../docs/buttons.html" class="nav-link">
Buttons
</a>
</li>
<li class="nav-item">
<a href="../docs/cards.html" class="nav-link">
Cards
</a>
</li>
<li class="nav-item">
<a href="../docs/carousel.html" class="nav-link">
Carousel
</a>
</li>
<li class="nav-item">
<a href="../docs/dropdowns.html" class="nav-link">
Dropdowns
</a>
</li>
<li class="nav-item">
<a href="../docs/divider.html" class="nav-link">
Divider
</a>
</li>
<li class="nav-item">
<a href="../docs/empty.html" class="nav-link">
Empty states
</a>
</li>
<li class="nav-item">
<a href="../docs/form-elements.html" class="nav-link">
Form elements
</a>
</li>
<li class="nav-item">
<a href="../docs/form-helpers.html" class="nav-link">
Form helpers
</a>
</li>
<li class="nav-item">
<a href="../docs/modals.html" class="nav-link">
Modals
</a>
</li>
<li class="nav-item">
<a href="../docs/progress.html" class="nav-link">
Progress
</a>
</li>
<li class="nav-item">
<a href="../docs/payments.html" class="nav-link">
Payments
</a>
</li>
<li class="nav-item">
<a href="../docs/range-slider.html" class="nav-link">
Range slider
</a>
</li>
<li class="nav-item">
<a href="../docs/ribbons.html" class="nav-link">
Ribbons
</a>
</li>
<li class="nav-item">
<a href="../docs/skeleton.html" class="nav-link">
Skeleton
</a>
</li>
<li class="nav-item">
<a href="../docs/spinners.html" class="nav-link">
Spinners
</a>
</li>
<li class="nav-item">
<a href="../docs/steps.html" class="nav-link">
Steps
</a>
</li>
<li class="nav-item">
<a href="../docs/switch-icon.html" class="nav-link">
Switch icon
</a>
</li>
<li class="nav-item">
<a href="../docs/tables.html" class="nav-link">
Tables
</a>
</li>
<li class="nav-item">
<a href="../docs/tabs.html" class="nav-link">
Tabs
</a>
</li>
<li class="nav-item">
<a href="../docs/timelines.html" class="nav-link">
Timelines
</a>
</li>
<li class="nav-item">
<a href="../docs/toasts.html" class="nav-link">
Toasts
</a>
</li>
<li class="nav-item">
<a href="../docs/tooltips.html" class="nav-link">
Tooltips
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#menu-utils" class="nav-link" data-toggle="collapse" aria-expanded="true">
<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"/><path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z" /></svg>
</span>
Utilities
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse show" id="menu-utils">
<li class="nav-item">
<a href="../docs/cursors.html" class="nav-link active">
Cursors
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#menu-plugins" class="nav-link" data-toggle="collapse" aria-expanded="false">
<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"/><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><rect x="14" y="14" width="6" height="6" rx="1" /><line x1="14" y1="7" x2="20" y2="7" /><line x1="17" y1="4" x2="17" y2="10" /></svg>
</span>
Plugins
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-plugins">
<li class="nav-item">
<a href="../docs/autosize.html" class="nav-link">
Autosize
</a>
</li>
<li class="nav-item">
<a href="../docs/input-mask.html" class="nav-link">
Form input mask
</a>
</li>
<li class="nav-item">
<a href="../docs/flags.html" class="nav-link">
Flags
</a>
</li>
<li class="nav-item">
<a href="../docs/charts.html" class="nav-link">
Charts
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="../changelog.html" class="nav-link">
<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>
</a>
</li>
</ul>
</div>
<div class="col-lg-9">
<div class="card card-lg">
<div class="card-body">
<div class="markdown">
<div class="d-flex">
<h1 class="h2 mt-0 mb-3">Cursors</h1>
<div class="mb-5">
<div class="d-flex mb-3">
<h1 class="mt-0">Cursors</h1>
</div>
<p>You can use different cursors to reflect the intended user interaction with particular elements of an interface. The cursor will change when a user hovers over a given element to indicate the action which can be performed.</p>
</div>
<p>You can use different cursors to reflect the intended user interaction with particular elements of an interface. The cursor will change when a user hovers over a given element to indicate the action which can be performed.</p>
<h2 id="cursor-utilities">Cursor utilities</h2>
<p>Use one of the available cursor utilities depending on the action you want to indicate.</p>
<ul>
@@ -668,7 +718,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="https://github.com/tabler/tabler/releases" target="_blank" class="link-secondary">v1.0.0-alpha.10</a>
<a href="../changelog.html" class="link-secondary">v1.0.0-alpha.11</a>
</li>
</ul>
</div>

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.10
* @version 1.0.0-alpha.11
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -362,181 +362,14 @@
</li>
</ul>
</li>
<li class="nav-item active dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
<li class="nav-item active">
<a class="nav-link" href="../docs/index.html" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><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="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
</span>
<span class="nav-link-title">
Docs
Documentation
</span>
</a>
<ul class="dropdown-menu dropdown-menu-columns dropdown-menu-columns-3">
<li >
<a class="dropdown-item" href="../docs/index.html" >
Introduction
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/alerts.html" >
Alerts
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/autosize.html" >
Autosize
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/avatars.html" >
Avatars
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/badges.html" >
Badges
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/breadcrumb.html" >
Breadcrumb
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/buttons.html" >
Buttons
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/cards.html" >
Cards
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/carousel.html" >
Carousel
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/colors.html" >
Colors
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/cursors.html" >
Cursors
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/charts.html" >
Charts
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/dropdowns.html" >
Dropdowns
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/divider.html" >
Divider
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/empty.html" >
Empty states
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/flags.html" >
Flags
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/form-elements.html" >
Form elements
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/form-helpers.html" >
Form helpers
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/input-mask.html" >
Form input mask
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/modals.html" >
Modals
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/progress.html" >
Progress
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/payments.html" >
Payments
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/range-slider.html" >
Range slider
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/ribbons.html" >
Ribbons
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/skeleton.html" >
Skeleton
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/spinners.html" >
Spinners
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/steps.html" >
Steps
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/tables.html" >
Tables
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/tabs.html" >
Tabs
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/timelines.html" >
Timelines
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/toasts.html" >
Toasts
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/tooltips.html" >
Tooltips
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/typography.html" >
Typography
</a>
</li>
</ul>
</li>
</ul>
<div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
@@ -565,52 +398,269 @@
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="d-none d-lg-block col-lg-3 order-lg-1 mb-4">
<div class="sticky-top lh-lg py-4">
<a href="https://github.com/tabler/tabler" class="btn btn-white mb-6 btn-block" target="_blank" rel="noreferrer">
<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>
Browse source code
</a>
<h5 class="subheader">On this page</h5>
<ul class="list-unstyled">
<li class="toc-entry toc-h2"><a href="#default-markup">Default markup</a></li>
<li class="toc-entry toc-h2"><a href="#text-position">Text position</a></li>
<li class="toc-entry toc-h2"><a href="#divider-color">Divider color</a></li>
</ul>
</div>
<div class="row g-5">
<div class="d-none d-lg-block col-lg-3">
<ul class="nav nav-pills nav-vertical">
<li class="nav-item">
<a href="#menu-base" class="nav-link" data-toggle="collapse" aria-expanded="false">
<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"/><path d="M8 9l3 3l-3 3" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
</span>
Getting started
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-base">
<li class="nav-item">
<a href="../docs/index.html" class="nav-link">
Introduction
</a>
</li>
<li class="nav-item">
<a href="../docs/colors.html" class="nav-link">
Colors
</a>
</li>
<li class="nav-item">
<a href="../docs/typography.html" class="nav-link">
Typography
</a>
</li>
<li class="nav-item">
<a href="../docs/icons.html" class="nav-link">
Icons
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#menu-components" class="nav-link" data-toggle="collapse" aria-expanded="true">
<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"/><path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>
</span>
Components
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse show" id="menu-components">
<li class="nav-item">
<a href="../docs/alerts.html" class="nav-link">
Alerts
</a>
</li>
<li class="nav-item">
<a href="../docs/avatars.html" class="nav-link">
Avatars
</a>
</li>
<li class="nav-item">
<a href="../docs/badges.html" class="nav-link">
Badges
</a>
</li>
<li class="nav-item">
<a href="../docs/breadcrumb.html" class="nav-link">
Breadcrumb
</a>
</li>
<li class="nav-item">
<a href="../docs/buttons.html" class="nav-link">
Buttons
</a>
</li>
<li class="nav-item">
<a href="../docs/cards.html" class="nav-link">
Cards
</a>
</li>
<li class="nav-item">
<a href="../docs/carousel.html" class="nav-link">
Carousel
</a>
</li>
<li class="nav-item">
<a href="../docs/dropdowns.html" class="nav-link">
Dropdowns
</a>
</li>
<li class="nav-item">
<a href="../docs/divider.html" class="nav-link active">
Divider
</a>
</li>
<li class="nav-item">
<a href="../docs/empty.html" class="nav-link">
Empty states
</a>
</li>
<li class="nav-item">
<a href="../docs/form-elements.html" class="nav-link">
Form elements
</a>
</li>
<li class="nav-item">
<a href="../docs/form-helpers.html" class="nav-link">
Form helpers
</a>
</li>
<li class="nav-item">
<a href="../docs/modals.html" class="nav-link">
Modals
</a>
</li>
<li class="nav-item">
<a href="../docs/progress.html" class="nav-link">
Progress
</a>
</li>
<li class="nav-item">
<a href="../docs/payments.html" class="nav-link">
Payments
</a>
</li>
<li class="nav-item">
<a href="../docs/range-slider.html" class="nav-link">
Range slider
</a>
</li>
<li class="nav-item">
<a href="../docs/ribbons.html" class="nav-link">
Ribbons
</a>
</li>
<li class="nav-item">
<a href="../docs/skeleton.html" class="nav-link">
Skeleton
</a>
</li>
<li class="nav-item">
<a href="../docs/spinners.html" class="nav-link">
Spinners
</a>
</li>
<li class="nav-item">
<a href="../docs/steps.html" class="nav-link">
Steps
</a>
</li>
<li class="nav-item">
<a href="../docs/switch-icon.html" class="nav-link">
Switch icon
</a>
</li>
<li class="nav-item">
<a href="../docs/tables.html" class="nav-link">
Tables
</a>
</li>
<li class="nav-item">
<a href="../docs/tabs.html" class="nav-link">
Tabs
</a>
</li>
<li class="nav-item">
<a href="../docs/timelines.html" class="nav-link">
Timelines
</a>
</li>
<li class="nav-item">
<a href="../docs/toasts.html" class="nav-link">
Toasts
</a>
</li>
<li class="nav-item">
<a href="../docs/tooltips.html" class="nav-link">
Tooltips
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#menu-utils" class="nav-link" data-toggle="collapse" aria-expanded="false">
<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"/><path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z" /></svg>
</span>
Utilities
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-utils">
<li class="nav-item">
<a href="../docs/cursors.html" class="nav-link">
Cursors
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#menu-plugins" class="nav-link" data-toggle="collapse" aria-expanded="false">
<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"/><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><rect x="14" y="14" width="6" height="6" rx="1" /><line x1="14" y1="7" x2="20" y2="7" /><line x1="17" y1="4" x2="17" y2="10" /></svg>
</span>
Plugins
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-plugins">
<li class="nav-item">
<a href="../docs/autosize.html" class="nav-link">
Autosize
</a>
</li>
<li class="nav-item">
<a href="../docs/input-mask.html" class="nav-link">
Form input mask
</a>
</li>
<li class="nav-item">
<a href="../docs/flags.html" class="nav-link">
Flags
</a>
</li>
<li class="nav-item">
<a href="../docs/charts.html" class="nav-link">
Charts
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="../changelog.html" class="nav-link">
<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>
</a>
</li>
</ul>
</div>
<div class="col-lg-9">
<div class="card card-lg">
<div class="card-body">
<div class="markdown">
<div class="d-flex">
<h1 class="h2 mt-0 mb-3">Divider</h1>
<p class="ml-auto">
<a href="https://getbootstrap.com/docs/4.4/components/dropdowns/#dividers" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" class="icon pr-1 text-blue" 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="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" /><line x1="10" y1="14" x2="20" y2="4" /><polyline points="15 4 20 4 20 9" /></svg>
Bootstrap documentation
</a>
</p>
<div class="mb-5">
<div class="d-flex mb-3">
<h1 class="mt-0">Divider</h1>
<p class="ml-auto">
<a href="https://getbootstrap.com/docs/4.4/components/dropdowns/#dividers" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" class="icon pr-1 text-blue" 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="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" /><line x1="10" y1="14" x2="20" y2="4" /><polyline points="15 4 20 4 20 9" /></svg>
Bootstrap documentation
</a>
</p>
</div>
<p>Dividers help organize content and make the interface layout clear and uncluttered. Greater clarity adds up to better user experience and enhanced interaction with a website or app.</p>
</div>
<p>Dividers help organize content and make the interface layout clear and uncluttered. Greater clarity adds up to better user experience and enhanced interaction with a website or app.</p>
<h2 id="default-markup">Default markup</h2>
<p>Use dividers to visually separate content into parts. You can use a line only or add text that will be centered by default.</p>
<div class="example no_toc_section">
<div class="example-content">
<p>
Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
</p>
<div class="hr-text">See also</div>
<p>
Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
</p>
<div class="demo-dividers">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dolore dolores doloribus est ex.
</p>
<div class="hr-text">See also</div>
<p>
Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
</p>
</div>
</div>
</div>
<div class="example-code">
<figure class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;p&gt;</span>
Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dolore dolores doloribus est ex.
<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"hr-text"</span><span class="nt">&gt;</span>See also<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;p&gt;</span>
@@ -622,27 +672,29 @@
<p>You can modify the position of the text which is to be included in a separator and make it left- or right-aligned. Otherwise, the text will remain centered.</p>
<div class="example no_toc_section">
<div class="example-content">
<p>
Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
</p>
<div class="hr-text hr-text-left">Left divider</div>
<p>
Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
</p>
<div class="hr-text">Centered divider</div>
<p>
Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
</p>
<div class="hr-text hr-text-right">Right divider</div>
<p>
Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
</p>
<div class="demo-dividers">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dolore dolores doloribus est ex.
</p>
<div class="hr-text hr-text-left">Left divider</div>
<p>
Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
</p>
<div class="hr-text">Centered divider</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dolore dolores doloribus est ex.
</p>
<div class="hr-text hr-text-right">Right divider</div>
<p>
Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
</p>
</div>
</div>
</div>
<div class="example-code">
<figure class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;p&gt;</span>
Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dolore dolores doloribus est ex.
<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"hr-text hr-text-left"</span><span class="nt">&gt;</span>Left divider<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;p&gt;</span>
@@ -650,7 +702,7 @@
<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"hr-text"</span><span class="nt">&gt;</span>Centered divider<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;p&gt;</span>
Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dolore dolores doloribus est ex.
<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"hr-text hr-text-right"</span><span class="nt">&gt;</span>Right divider<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;p&gt;</span>
@@ -662,17 +714,23 @@
<p>Customize the color of dividers to make them go well with your design. Click <a href="./colors.html">here</a> to see the list of available colors.</p>
<div class="example no_toc_section">
<div class="example-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dolore dolores doloribus est ex.
</p>
<div class="hr-text text-green">Green divider</div>
<p>
Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
</p>
<div class="hr-text text-red">Red divider</div>
<p>
Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
</p>
<div class="demo-dividers">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dolore dolores doloribus est ex.
</p>
<div class="hr-text text-green">Green divider</div>
<p>
Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
</p>
<div class="hr-text text-red">Red divider</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dolore dolores doloribus est ex.
</p>
<div class="hr-text text-primary">Primary divider</div>
<p>
Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
</p>
</div>
</div>
</div>
<div class="example-code">
@@ -685,6 +743,10 @@
Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"hr-text text-red"</span><span class="nt">&gt;</span>Red divider<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;p&gt;</span>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dolore dolores doloribus est ex.
<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"hr-text text-primary"</span><span class="nt">&gt;</span>Primary divider<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;p&gt;</span>
Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
<span class="nt">&lt;/p&gt;</span></code></pre>
@@ -714,7 +776,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="https://github.com/tabler/tabler/releases" target="_blank" class="link-secondary">v1.0.0-alpha.10</a>
<a href="../changelog.html" class="link-secondary">v1.0.0-alpha.11</a>
</li>
</ul>
</div>

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.10
* @version 1.0.0-alpha.11
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -362,181 +362,14 @@
</li>
</ul>
</li>
<li class="nav-item active dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
<li class="nav-item active">
<a class="nav-link" href="../docs/index.html" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><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="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
</span>
<span class="nav-link-title">
Docs
Documentation
</span>
</a>
<ul class="dropdown-menu dropdown-menu-columns dropdown-menu-columns-3">
<li >
<a class="dropdown-item" href="../docs/index.html" >
Introduction
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/alerts.html" >
Alerts
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/autosize.html" >
Autosize
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/avatars.html" >
Avatars
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/badges.html" >
Badges
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/breadcrumb.html" >
Breadcrumb
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/buttons.html" >
Buttons
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/cards.html" >
Cards
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/carousel.html" >
Carousel
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/colors.html" >
Colors
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/cursors.html" >
Cursors
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/charts.html" >
Charts
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/dropdowns.html" >
Dropdowns
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/divider.html" >
Divider
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/empty.html" >
Empty states
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/flags.html" >
Flags
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/form-elements.html" >
Form elements
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/form-helpers.html" >
Form helpers
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/input-mask.html" >
Form input mask
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/modals.html" >
Modals
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/progress.html" >
Progress
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/payments.html" >
Payments
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/range-slider.html" >
Range slider
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/ribbons.html" >
Ribbons
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/skeleton.html" >
Skeleton
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/spinners.html" >
Spinners
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/steps.html" >
Steps
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/tables.html" >
Tables
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/tabs.html" >
Tabs
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/timelines.html" >
Timelines
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/toasts.html" >
Toasts
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/tooltips.html" >
Tooltips
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/typography.html" >
Typography
</a>
</li>
</ul>
</li>
</ul>
<div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
@@ -565,52 +398,259 @@
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="d-none d-lg-block col-lg-3 order-lg-1 mb-4">
<div class="sticky-top lh-lg py-4">
<a href="https://github.com/tabler/tabler" class="btn btn-white mb-6 btn-block" target="_blank" rel="noreferrer">
<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>
Browse source code
</a>
<h5 class="subheader">On this page</h5>
<ul class="list-unstyled">
<li class="toc-entry toc-h2"><a href="#default-dropdown">Default dropdown</a></li>
<li class="toc-entry toc-h2"><a href="#dropdown-divider">Dropdown divider</a></li>
<li class="toc-entry toc-h2"><a href="#active-state">Active state</a></li>
<li class="toc-entry toc-h2"><a href="#disabled-state">Disabled state</a></li>
<li class="toc-entry toc-h2"><a href="#dropdown-header">Dropdown header</a></li>
<li class="toc-entry toc-h2"><a href="#dropdown-with-icons">Dropdown with icons</a></li>
<li class="toc-entry toc-h2"><a href="#dropdown-with-arrow">Dropdown with arrow</a></li>
<li class="toc-entry toc-h2"><a href="#dropdown-with-badge">Dropdown with badge</a></li>
<li class="toc-entry toc-h2"><a href="#dropdown-with-checkboxes">Dropdown with checkboxes</a></li>
<li class="toc-entry toc-h2"><a href="#dark-dropdown">Dark dropdown</a></li>
<li class="toc-entry toc-h2"><a href="#dropdown-with-card-content">Dropdown with card content</a></li>
</ul>
</div>
<div class="row g-5">
<div class="d-none d-lg-block col-lg-3">
<ul class="nav nav-pills nav-vertical">
<li class="nav-item">
<a href="#menu-base" class="nav-link" data-toggle="collapse" aria-expanded="false">
<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"/><path d="M8 9l3 3l-3 3" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
</span>
Getting started
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-base">
<li class="nav-item">
<a href="../docs/index.html" class="nav-link">
Introduction
</a>
</li>
<li class="nav-item">
<a href="../docs/colors.html" class="nav-link">
Colors
</a>
</li>
<li class="nav-item">
<a href="../docs/typography.html" class="nav-link">
Typography
</a>
</li>
<li class="nav-item">
<a href="../docs/icons.html" class="nav-link">
Icons
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#menu-components" class="nav-link" data-toggle="collapse" aria-expanded="true">
<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"/><path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>
</span>
Components
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse show" id="menu-components">
<li class="nav-item">
<a href="../docs/alerts.html" class="nav-link">
Alerts
</a>
</li>
<li class="nav-item">
<a href="../docs/avatars.html" class="nav-link">
Avatars
</a>
</li>
<li class="nav-item">
<a href="../docs/badges.html" class="nav-link">
Badges
</a>
</li>
<li class="nav-item">
<a href="../docs/breadcrumb.html" class="nav-link">
Breadcrumb
</a>
</li>
<li class="nav-item">
<a href="../docs/buttons.html" class="nav-link">
Buttons
</a>
</li>
<li class="nav-item">
<a href="../docs/cards.html" class="nav-link">
Cards
</a>
</li>
<li class="nav-item">
<a href="../docs/carousel.html" class="nav-link">
Carousel
</a>
</li>
<li class="nav-item">
<a href="../docs/dropdowns.html" class="nav-link active">
Dropdowns
</a>
</li>
<li class="nav-item">
<a href="../docs/divider.html" class="nav-link">
Divider
</a>
</li>
<li class="nav-item">
<a href="../docs/empty.html" class="nav-link">
Empty states
</a>
</li>
<li class="nav-item">
<a href="../docs/form-elements.html" class="nav-link">
Form elements
</a>
</li>
<li class="nav-item">
<a href="../docs/form-helpers.html" class="nav-link">
Form helpers
</a>
</li>
<li class="nav-item">
<a href="../docs/modals.html" class="nav-link">
Modals
</a>
</li>
<li class="nav-item">
<a href="../docs/progress.html" class="nav-link">
Progress
</a>
</li>
<li class="nav-item">
<a href="../docs/payments.html" class="nav-link">
Payments
</a>
</li>
<li class="nav-item">
<a href="../docs/range-slider.html" class="nav-link">
Range slider
</a>
</li>
<li class="nav-item">
<a href="../docs/ribbons.html" class="nav-link">
Ribbons
</a>
</li>
<li class="nav-item">
<a href="../docs/skeleton.html" class="nav-link">
Skeleton
</a>
</li>
<li class="nav-item">
<a href="../docs/spinners.html" class="nav-link">
Spinners
</a>
</li>
<li class="nav-item">
<a href="../docs/steps.html" class="nav-link">
Steps
</a>
</li>
<li class="nav-item">
<a href="../docs/switch-icon.html" class="nav-link">
Switch icon
</a>
</li>
<li class="nav-item">
<a href="../docs/tables.html" class="nav-link">
Tables
</a>
</li>
<li class="nav-item">
<a href="../docs/tabs.html" class="nav-link">
Tabs
</a>
</li>
<li class="nav-item">
<a href="../docs/timelines.html" class="nav-link">
Timelines
</a>
</li>
<li class="nav-item">
<a href="../docs/toasts.html" class="nav-link">
Toasts
</a>
</li>
<li class="nav-item">
<a href="../docs/tooltips.html" class="nav-link">
Tooltips
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#menu-utils" class="nav-link" data-toggle="collapse" aria-expanded="false">
<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"/><path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z" /></svg>
</span>
Utilities
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-utils">
<li class="nav-item">
<a href="../docs/cursors.html" class="nav-link">
Cursors
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#menu-plugins" class="nav-link" data-toggle="collapse" aria-expanded="false">
<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"/><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><rect x="14" y="14" width="6" height="6" rx="1" /><line x1="14" y1="7" x2="20" y2="7" /><line x1="17" y1="4" x2="17" y2="10" /></svg>
</span>
Plugins
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-plugins">
<li class="nav-item">
<a href="../docs/autosize.html" class="nav-link">
Autosize
</a>
</li>
<li class="nav-item">
<a href="../docs/input-mask.html" class="nav-link">
Form input mask
</a>
</li>
<li class="nav-item">
<a href="../docs/flags.html" class="nav-link">
Flags
</a>
</li>
<li class="nav-item">
<a href="../docs/charts.html" class="nav-link">
Charts
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="../changelog.html" class="nav-link">
<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>
</a>
</li>
</ul>
</div>
<div class="col-lg-9">
<div class="card card-lg">
<div class="card-body">
<div class="markdown">
<div class="d-flex">
<h1 class="h2 mt-0 mb-3">Dropdowns</h1>
<p class="ml-auto">
<a href="https://getbootstrap.com/docs/4.4/components/dropdowns" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" class="icon pr-1 text-blue" 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="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" /><line x1="10" y1="14" x2="20" y2="4" /><polyline points="15 4 20 4 20 9" /></svg>
Bootstrap documentation
</a>
</p>
<div class="mb-5">
<div class="d-flex mb-3">
<h1 class="mt-0">Dropdowns</h1>
<p class="ml-auto">
<a href="https://getbootstrap.com/docs/4.4/components/dropdowns" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" class="icon pr-1 text-blue" 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="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" /><line x1="10" y1="14" x2="20" y2="4" /><polyline points="15 4 20 4 20 9" /></svg>
Bootstrap documentation
</a>
</p>
</div>
<p>Use dropdowns to display lists of options or include more positions in a menu without overwhelming users with too many buttons and long lists. Dropdowns facilitate users' interaction with your website or software and make your design look clear.</p>
</div>
<p>Use dropdowns to display lists of options or include more positions in a menu without overwhelming users with too many buttons and long lists. Dropdowns facilitate users' interaction with your website or software and make your design look clear.</p>
<h2 id="default-dropdown">Default dropdown</h2>
<p>With small markup changes, you can turn any <code class="language-plaintext highlighter-rouge">.btn</code> into a dropdown toggle and use it to display more options for users to choose from. Start with the default dropdown and then use additional classes to make your dropdown more user-friendly.</p>
<div class="example no_toc_section example-centered">
<div class="example-content">
<div class="dropdown-menu dropdown-menu-demo">
<a class="dropdown-item" href="#">
<a class="dropdown-item" href="javascript:void()">
Action
</a>
<a class="dropdown-item" href="#">
<a class="dropdown-item" href="javascript:void()">
Another action
</a>
</div>
@@ -633,14 +673,14 @@
<div class="example no_toc_section example-centered">
<div class="example-content">
<div class="dropdown-menu dropdown-menu-demo">
<a class="dropdown-item" href="#">
<a class="dropdown-item" href="javascript:void()">
Action
</a>
<a class="dropdown-item" href="#">
<a class="dropdown-item" href="javascript:void()">
Another action
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
<a class="dropdown-item" href="javascript:void()">Separated link</a>
</div>
</div>
</div>
@@ -663,13 +703,13 @@
<div class="example no_toc_section example-centered">
<div class="example-content">
<div class="dropdown-menu dropdown-menu-demo">
<a class="dropdown-item" href="#">
<a class="dropdown-item" href="javascript:void()">
Action
</a>
<a class="dropdown-item" href="#">
<a class="dropdown-item" href="javascript:void()">
Another action
</a>
<a class="dropdown-item active" href="#">Active action</a>
<a class="dropdown-item active" href="javascript:void()">Active action</a>
</div>
</div>
</div>
@@ -691,13 +731,13 @@
<div class="example no_toc_section example-centered">
<div class="example-content">
<div class="dropdown-menu dropdown-menu-demo">
<a class="dropdown-item" href="#">
<a class="dropdown-item" href="javascript:void()">
Action
</a>
<a class="dropdown-item" href="#">
<a class="dropdown-item" href="javascript:void()">
Another action
</a>
<a class="dropdown-item disabled" href="#">Disabled action</a>
<a class="dropdown-item disabled" href="javascript:void()">Disabled action</a>
</div>
</div>
</div>
@@ -720,10 +760,10 @@
<div class="example-content">
<div class="dropdown-menu dropdown-menu-demo">
<span class="dropdown-header">Dropdown header</span>
<a class="dropdown-item" href="#">
<a class="dropdown-item" href="javascript:void()">
Action
</a>
<a class="dropdown-item" href="#">
<a class="dropdown-item" href="javascript:void()">
Another action
</a>
</div>
@@ -748,11 +788,11 @@
<div class="example-content">
<div class="dropdown-menu dropdown-menu-demo">
<span class="dropdown-header">Dropdown header</span>
<a class="dropdown-item" href="#">
<a class="dropdown-item" href="javascript:void()">
<svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-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.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z" /><circle cx="12" cy="12" r="3" /></svg>
Action
</a>
<a class="dropdown-item" href="#">
<a class="dropdown-item" href="javascript:void()">
<svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-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 7h-3a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-3" /><path d="M9 15h3l8.5 -8.5a1.5 1.5 0 0 0 -3 -3l-8.5 8.5v3" /><line x1="16" y1="5" x2="19" y2="8" /></svg>
Another action
</a>
@@ -764,11 +804,11 @@
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"dropdown-menu dropdown-menu-demo"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"dropdown-header"</span><span class="nt">&gt;</span>Dropdown header<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>
<span class="c">&lt;!-- SVG icon code --&gt;</span>
<span class="c">&lt;!-- SVG icon code with class="dropdown-item-icon" --&gt;</span>
Action
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>
<span class="c">&lt;!-- SVG icon code --&gt;</span>
<span class="c">&lt;!-- SVG icon code with class="dropdown-item-icon" --&gt;</span>
Another action
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
@@ -779,10 +819,10 @@
<div class="example no_toc_section example-centered">
<div class="example-content">
<div class="dropdown-menu dropdown-menu-demo dropdown-menu-arrow">
<a class="dropdown-item" href="#">
<a class="dropdown-item" href="javascript:void()">
Action
</a>
<a class="dropdown-item" href="#">
<a class="dropdown-item" href="javascript:void()">
Another action
</a>
</div>
@@ -805,11 +845,11 @@
<div class="example no_toc_section example-centered">
<div class="example-content">
<div class="dropdown-menu dropdown-menu-demo">
<a class="dropdown-item" href="#">
<a class="dropdown-item" href="javascript:void()">
Action
<span class="badge bg-primary ml-auto">12</span>
</a>
<a class="dropdown-item" href="#">
<a class="dropdown-item" href="javascript:void()">
Another action
<span class="badge bg-green ml-auto"></span>
</a>
@@ -874,11 +914,11 @@
<div class="example-content">
<div class="dropdown-menu dropdown-menu-demo dropdown-menu-arrow bg-dark text-white">
<span class="dropdown-header">Dropdown header</span>
<a class="dropdown-item" href="#">
<a class="dropdown-item" href="javascript:void()">
<svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-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.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z" /><circle cx="12" cy="12" r="3" /></svg>
Action
</a>
<a class="dropdown-item" href="#">
<a class="dropdown-item" href="javascript:void()">
<svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-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 7h-3a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-3" /><path d="M9 15h3l8.5 -8.5a1.5 1.5 0 0 0 -3 -3l-8.5 8.5v3" /><line x1="16" y1="5" x2="19" y2="8" /></svg>
Another action
</a>
@@ -890,11 +930,11 @@
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"dropdown-menu dropdown-menu-demo dropdown-menu-arrow bg-dark text-white"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"dropdown-header"</span><span class="nt">&gt;</span>Dropdown header<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>
<span class="c">&lt;!-- SVG icon code --&gt;</span>
<span class="c">&lt;!-- SVG icon code with class="dropdown-item-icon" --&gt;</span>
Action
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>
<span class="c">&lt;!-- SVG icon code --&gt;</span>
<span class="c">&lt;!-- SVG icon code with class="dropdown-item-icon" --&gt;</span>
Another action
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
@@ -905,27 +945,27 @@
<div class="example no_toc_section example-centered">
<div class="example-content">
<div class="btn-list align-items-start">
<a href="#" class="btn btn-white">
<a href="javascript:void()" class="btn btn-white">
Button
</a>
<div class="dropdown show">
<a href="#" class="btn btn-primary dropdown-toggle">Dropdown</a>
<a href="javascript:void()" class="btn btn-primary dropdown-toggle">Dropdown</a>
<div class="dropdown-menu dropdown-menu-card show position-static" style="max-width: 20rem;">
<div class="card d-flex flex-column">
<a href="#">
<a href="javascript:void()">
<img class="card-img-top" src="../static/photos//36e273986ed577b8.jpg" alt="How do you know she is a witch?" />
</a>
<div class="card-body d-flex flex-column">
<h3 class="card-title"><a href="#">How do you know she is a witch?</a></h3>
<h3 class="card-title"><a href="javascript:void()">How do you know she is a witch?</a></h3>
<div class="text-muted">Are you suggesting that coconuts migrate? No, no, no! Yes, yes. A bit. But she's got a wart. You ...</div>
<div class="d-flex align-items-center pt-5 mt-auto">
<span class="avatar avatar-md" style="background-image: url(../static/avatars/000f.jpg)"></span>
<div class="d-flex align-items-center pt-4 mt-auto">
<span class="avatar" style="background-image: url(../static/avatars/000f.jpg)"></span>
<div class="ml-3">
<a href="../profile.html" class="text-body">Maryjo Lebarree</a>
<small class="d-block text-muted">3 days ago</small>
<div class="text-muted">3 days ago</div>
</div>
<div class="ml-auto">
<a href="#" class="icon d-none d-md-inline-block ml-3 text-muted">
<a href="javascript:void()" class="icon d-none d-md-inline-block ml-3 text-muted">
<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>
</a>
</div>
@@ -952,11 +992,11 @@
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body d-flex flex-column"</span><span class="nt">&gt;</span>
<span class="nt">&lt;h3</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>How do you know she is a witch?<span class="nt">&lt;/a&gt;&lt;/h3&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">&gt;</span>Are you suggesting that coconuts migrate? No, no, no! Yes, yes. A bit. But she's got a wart. You ...<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex align-items-center pt-5 mt-auto"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar avatar-md"</span> <span class="na">style=</span><span class="s">"background-image: url(...)"</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex align-items-center pt-4 mt-auto"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span> <span class="na">style=</span><span class="s">"background-image: url(...)"</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"ml-3"</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">"text-body"</span><span class="nt">&gt;</span>Maryjo Lebarree<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;small</span> <span class="na">class=</span><span class="s">"d-block text-muted"</span><span class="nt">&gt;</span>3 days ago<span class="nt">&lt;/small&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">&gt;</span>3 days ago<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"ml-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">"icon d-none d-md-inline-block ml-3 text-muted"</span><span class="nt">&gt;</span>
@@ -994,7 +1034,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="https://github.com/tabler/tabler/releases" target="_blank" class="link-secondary">v1.0.0-alpha.10</a>
<a href="../changelog.html" class="link-secondary">v1.0.0-alpha.11</a>
</li>
</ul>
</div>

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.10
* @version 1.0.0-alpha.11
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -362,181 +362,14 @@
</li>
</ul>
</li>
<li class="nav-item active dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
<li class="nav-item active">
<a class="nav-link" href="../docs/index.html" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><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="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
</span>
<span class="nav-link-title">
Docs
Documentation
</span>
</a>
<ul class="dropdown-menu dropdown-menu-columns dropdown-menu-columns-3">
<li >
<a class="dropdown-item" href="../docs/index.html" >
Introduction
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/alerts.html" >
Alerts
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/autosize.html" >
Autosize
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/avatars.html" >
Avatars
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/badges.html" >
Badges
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/breadcrumb.html" >
Breadcrumb
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/buttons.html" >
Buttons
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/cards.html" >
Cards
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/carousel.html" >
Carousel
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/colors.html" >
Colors
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/cursors.html" >
Cursors
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/charts.html" >
Charts
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/dropdowns.html" >
Dropdowns
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/divider.html" >
Divider
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/empty.html" >
Empty states
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/flags.html" >
Flags
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/form-elements.html" >
Form elements
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/form-helpers.html" >
Form helpers
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/input-mask.html" >
Form input mask
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/modals.html" >
Modals
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/progress.html" >
Progress
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/payments.html" >
Payments
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/range-slider.html" >
Range slider
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/ribbons.html" >
Ribbons
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/skeleton.html" >
Skeleton
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/spinners.html" >
Spinners
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/steps.html" >
Steps
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/tables.html" >
Tables
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/tabs.html" >
Tabs
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/timelines.html" >
Timelines
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/toasts.html" >
Toasts
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/tooltips.html" >
Tooltips
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/typography.html" >
Typography
</a>
</li>
</ul>
</li>
</ul>
<div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
@@ -565,35 +398,250 @@
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="d-none d-lg-block col-lg-3 order-lg-1 mb-4">
<div class="sticky-top lh-lg py-4">
<a href="https://github.com/tabler/tabler" class="btn btn-white mb-6 btn-block" target="_blank" rel="noreferrer">
<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>
Browse source code
</a>
<h5 class="subheader">On this page</h5>
<ul class="list-unstyled">
<li class="toc-entry toc-h2"><a href="#default-markup">Default markup</a></li>
<li class="toc-entry toc-h2"><a href="#empty-state-with-illustration">Empty state with illustration</a></li>
</ul>
</div>
<div class="row g-5">
<div class="d-none d-lg-block col-lg-3">
<ul class="nav nav-pills nav-vertical">
<li class="nav-item">
<a href="#menu-base" class="nav-link" data-toggle="collapse" aria-expanded="false">
<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"/><path d="M8 9l3 3l-3 3" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
</span>
Getting started
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-base">
<li class="nav-item">
<a href="../docs/index.html" class="nav-link">
Introduction
</a>
</li>
<li class="nav-item">
<a href="../docs/colors.html" class="nav-link">
Colors
</a>
</li>
<li class="nav-item">
<a href="../docs/typography.html" class="nav-link">
Typography
</a>
</li>
<li class="nav-item">
<a href="../docs/icons.html" class="nav-link">
Icons
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#menu-components" class="nav-link" data-toggle="collapse" aria-expanded="true">
<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"/><path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>
</span>
Components
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse show" id="menu-components">
<li class="nav-item">
<a href="../docs/alerts.html" class="nav-link">
Alerts
</a>
</li>
<li class="nav-item">
<a href="../docs/avatars.html" class="nav-link">
Avatars
</a>
</li>
<li class="nav-item">
<a href="../docs/badges.html" class="nav-link">
Badges
</a>
</li>
<li class="nav-item">
<a href="../docs/breadcrumb.html" class="nav-link">
Breadcrumb
</a>
</li>
<li class="nav-item">
<a href="../docs/buttons.html" class="nav-link">
Buttons
</a>
</li>
<li class="nav-item">
<a href="../docs/cards.html" class="nav-link">
Cards
</a>
</li>
<li class="nav-item">
<a href="../docs/carousel.html" class="nav-link">
Carousel
</a>
</li>
<li class="nav-item">
<a href="../docs/dropdowns.html" class="nav-link">
Dropdowns
</a>
</li>
<li class="nav-item">
<a href="../docs/divider.html" class="nav-link">
Divider
</a>
</li>
<li class="nav-item">
<a href="../docs/empty.html" class="nav-link active">
Empty states
</a>
</li>
<li class="nav-item">
<a href="../docs/form-elements.html" class="nav-link">
Form elements
</a>
</li>
<li class="nav-item">
<a href="../docs/form-helpers.html" class="nav-link">
Form helpers
</a>
</li>
<li class="nav-item">
<a href="../docs/modals.html" class="nav-link">
Modals
</a>
</li>
<li class="nav-item">
<a href="../docs/progress.html" class="nav-link">
Progress
</a>
</li>
<li class="nav-item">
<a href="../docs/payments.html" class="nav-link">
Payments
</a>
</li>
<li class="nav-item">
<a href="../docs/range-slider.html" class="nav-link">
Range slider
</a>
</li>
<li class="nav-item">
<a href="../docs/ribbons.html" class="nav-link">
Ribbons
</a>
</li>
<li class="nav-item">
<a href="../docs/skeleton.html" class="nav-link">
Skeleton
</a>
</li>
<li class="nav-item">
<a href="../docs/spinners.html" class="nav-link">
Spinners
</a>
</li>
<li class="nav-item">
<a href="../docs/steps.html" class="nav-link">
Steps
</a>
</li>
<li class="nav-item">
<a href="../docs/switch-icon.html" class="nav-link">
Switch icon
</a>
</li>
<li class="nav-item">
<a href="../docs/tables.html" class="nav-link">
Tables
</a>
</li>
<li class="nav-item">
<a href="../docs/tabs.html" class="nav-link">
Tabs
</a>
</li>
<li class="nav-item">
<a href="../docs/timelines.html" class="nav-link">
Timelines
</a>
</li>
<li class="nav-item">
<a href="../docs/toasts.html" class="nav-link">
Toasts
</a>
</li>
<li class="nav-item">
<a href="../docs/tooltips.html" class="nav-link">
Tooltips
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#menu-utils" class="nav-link" data-toggle="collapse" aria-expanded="false">
<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"/><path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z" /></svg>
</span>
Utilities
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-utils">
<li class="nav-item">
<a href="../docs/cursors.html" class="nav-link">
Cursors
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#menu-plugins" class="nav-link" data-toggle="collapse" aria-expanded="false">
<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"/><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><rect x="14" y="14" width="6" height="6" rx="1" /><line x1="14" y1="7" x2="20" y2="7" /><line x1="17" y1="4" x2="17" y2="10" /></svg>
</span>
Plugins
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-plugins">
<li class="nav-item">
<a href="../docs/autosize.html" class="nav-link">
Autosize
</a>
</li>
<li class="nav-item">
<a href="../docs/input-mask.html" class="nav-link">
Form input mask
</a>
</li>
<li class="nav-item">
<a href="../docs/flags.html" class="nav-link">
Flags
</a>
</li>
<li class="nav-item">
<a href="../docs/charts.html" class="nav-link">
Charts
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="../changelog.html" class="nav-link">
<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>
</a>
</li>
</ul>
</div>
<div class="col-lg-9">
<div class="card card-lg">
<div class="card-body">
<div class="markdown">
<div class="d-flex">
<h1 class="h2 mt-0 mb-3">Empty states</h1>
<div class="mb-5">
<div class="d-flex mb-3">
<h1 class="mt-0">Empty states</h1>
</div>
<p>Empty states or blank pages are commonly used as placeholders for first-use, empty data or error screens. Their aim is to engage users when there is no content to display and that is why their design is extremely important from the point of view of the user experience of your website or app.</p>
</div>
<p>Empty states or blank pages are commonly used as placeholders for first-use, empty data or error screens. Their aim is to engage users when there is no content to display and that is why their design is extremely important from the point of view of the user experience of your website or app.</p>
<h2 id="default-markup">Default markup</h2>
<p>Use the default empty state to engage users in the critical moments of their experience with your website or app. A good empty state screen should let users know what is happening and what they should do next as well as encourage them to take action.</p>
<div class="example no_toc_section">
<div class="example-content">
<div class="empty">
<div class="empty-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="10" cy="10" r="7" /><line x1="21" y1="21" x2="15" y2="15" /></svg>
<div class="empty-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="12" cy="12" r="9" /><line x1="9" y1="10" x2="9.01" y2="10" /><line x1="15" y1="10" x2="15.01" y2="10" /><path d="M9.5 15.25a3.5 3.5 0 0 1 5 0" /></svg>
</div>
<p class="empty-title">No results found</p>
<p class="empty-subtitle text-muted">
@@ -611,8 +659,7 @@
<div class="example-code">
<figure class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"empty"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"empty-icon"</span><span class="nt">&gt;</span>
<span class="c">&lt;!-- SVG icon code --&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"empty-icon"</span><span class="nt">&gt;</span><span class="c">&lt;!-- SVG icon code --&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"empty-title"</span><span class="nt">&gt;</span>No results found<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"empty-subtitle text-muted"</span><span class="nt">&gt;</span>
@@ -632,17 +679,16 @@
<div class="example no_toc_section">
<div class="example-content">
<div class="empty">
<div class="empty-icon">
<img src="../static/illustrations/undraw_quitting_time_dm8t.svg" height="128" class="mb-4" alt="" />
<div class="empty-img"><img src="../static/illustrations/undraw_quitting_time_dm8t.svg" height="128" alt="" />
</div>
<p class="empty-title">No results found</p>
<p class="empty-title">Invoices are managed from here</p>
<p class="empty-subtitle text-muted">
Try adjusting your search or filter to find what you're looking for.
</p>
<div class="empty-action">
<a href="../." class="btn btn-primary">
<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>
Search again
<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" /><line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" /></svg>
New invoice
</a>
</div>
</div>
@@ -651,17 +697,52 @@
<div class="example-code">
<figure class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"empty"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"empty-icon"</span><span class="nt">&gt;</span>
<span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">height=</span><span class="s">"128"</span> <span class="na">class=</span><span class="s">"mb-4"</span> <span class="na">alt=</span><span class="s">""</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"empty-img"</span><span class="nt">&gt;&lt;img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">height=</span><span class="s">"128"</span> <span class="na">alt=</span><span class="s">""</span><span class="nt">&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"empty-title"</span><span class="nt">&gt;</span>No results found<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"empty-title"</span><span class="nt">&gt;</span>Invoices are managed from here<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"empty-subtitle text-muted"</span><span class="nt">&gt;</span>
Try adjusting your search or filter to find what you're looking for.
<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"empty-action"</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-primary"</span><span class="nt">&gt;</span>
<span class="c">&lt;!-- SVG icon code --&gt;</span>
Search again
New invoice
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
</figure>
</div>
<h2 id="empty-state-with-header">Empty state with header</h2>
<p>Instead of adding an icon or illustration you can simply give the text:</p>
<div class="example no_toc_section">
<div class="example-content">
<div class="empty">
<div class="empty-header">404</div>
<p class="empty-title">Oops… You just found an error page</p>
<p class="empty-subtitle text-muted">
Try adjusting your search or filter to find what you're looking for.
</p>
<div class="empty-action">
<a href="../." class="btn btn-primary">
<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" /><line x1="5" y1="12" x2="19" y2="12" /><line x1="5" y1="12" x2="11" y2="18" /><line x1="5" y1="12" x2="11" y2="6" /></svg>
Take me home
</a>
</div>
</div>
</div>
</div>
<div class="example-code">
<figure class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"empty"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"empty-header"</span><span class="nt">&gt;</span>404<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"empty-title"</span><span class="nt">&gt;</span>Oops… You just found an error page<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"empty-subtitle text-muted"</span><span class="nt">&gt;</span>
Try adjusting your search or filter to find what you're looking for.
<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"empty-action"</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-primary"</span><span class="nt">&gt;</span>
<span class="c">&lt;!-- SVG icon code --&gt;</span>
Take me home
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
@@ -691,7 +772,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="https://github.com/tabler/tabler/releases" target="_blank" class="link-secondary">v1.0.0-alpha.10</a>
<a href="../changelog.html" class="link-secondary">v1.0.0-alpha.11</a>
</li>
</ul>
</div>

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.10
* @version 1.0.0-alpha.11
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -362,181 +362,14 @@
</li>
</ul>
</li>
<li class="nav-item active dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
<li class="nav-item active">
<a class="nav-link" href="../docs/index.html" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><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="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
</span>
<span class="nav-link-title">
Docs
Documentation
</span>
</a>
<ul class="dropdown-menu dropdown-menu-columns dropdown-menu-columns-3">
<li >
<a class="dropdown-item" href="../docs/index.html" >
Introduction
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/alerts.html" >
Alerts
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/autosize.html" >
Autosize
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/avatars.html" >
Avatars
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/badges.html" >
Badges
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/breadcrumb.html" >
Breadcrumb
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/buttons.html" >
Buttons
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/cards.html" >
Cards
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/carousel.html" >
Carousel
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/colors.html" >
Colors
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/cursors.html" >
Cursors
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/charts.html" >
Charts
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/dropdowns.html" >
Dropdowns
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/divider.html" >
Divider
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/empty.html" >
Empty states
</a>
</li>
<li >
<a class="dropdown-item active" href="../docs/flags.html" >
Flags
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/form-elements.html" >
Form elements
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/form-helpers.html" >
Form helpers
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/input-mask.html" >
Form input mask
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/modals.html" >
Modals
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/progress.html" >
Progress
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/payments.html" >
Payments
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/range-slider.html" >
Range slider
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/ribbons.html" >
Ribbons
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/skeleton.html" >
Skeleton
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/spinners.html" >
Spinners
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/steps.html" >
Steps
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/tables.html" >
Tables
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/tabs.html" >
Tabs
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/timelines.html" >
Timelines
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/toasts.html" >
Toasts
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/tooltips.html" >
Tooltips
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/typography.html" >
Typography
</a>
</li>
</ul>
</li>
</ul>
<div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
@@ -565,32 +398,247 @@
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="d-none d-lg-block col-lg-3 order-lg-1 mb-4">
<div class="sticky-top lh-lg py-4">
<a href="https://github.com/tabler/tabler" class="btn btn-white mb-6 btn-block" target="_blank" rel="noreferrer">
<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>
Browse source code
</a>
<h5 class="subheader">On this page</h5>
<ul class="list-unstyled">
<li class="toc-entry toc-h2"><a href="#flag">Flag</a></li>
<li class="toc-entry toc-h2"><a href="#flag-sizes">Flag sizes</a></li>
<li class="toc-entry toc-h2"><a href="#types">Types</a></li>
</ul>
</div>
<div class="row g-5">
<div class="d-none d-lg-block col-lg-3">
<ul class="nav nav-pills nav-vertical">
<li class="nav-item">
<a href="#menu-base" class="nav-link" data-toggle="collapse" aria-expanded="false">
<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"/><path d="M8 9l3 3l-3 3" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
</span>
Getting started
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-base">
<li class="nav-item">
<a href="../docs/index.html" class="nav-link">
Introduction
</a>
</li>
<li class="nav-item">
<a href="../docs/colors.html" class="nav-link">
Colors
</a>
</li>
<li class="nav-item">
<a href="../docs/typography.html" class="nav-link">
Typography
</a>
</li>
<li class="nav-item">
<a href="../docs/icons.html" class="nav-link">
Icons
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#menu-components" class="nav-link" data-toggle="collapse" aria-expanded="true">
<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"/><path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>
</span>
Components
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse show" id="menu-components">
<li class="nav-item">
<a href="../docs/alerts.html" class="nav-link">
Alerts
</a>
</li>
<li class="nav-item">
<a href="../docs/avatars.html" class="nav-link">
Avatars
</a>
</li>
<li class="nav-item">
<a href="../docs/badges.html" class="nav-link">
Badges
</a>
</li>
<li class="nav-item">
<a href="../docs/breadcrumb.html" class="nav-link">
Breadcrumb
</a>
</li>
<li class="nav-item">
<a href="../docs/buttons.html" class="nav-link">
Buttons
</a>
</li>
<li class="nav-item">
<a href="../docs/cards.html" class="nav-link">
Cards
</a>
</li>
<li class="nav-item">
<a href="../docs/carousel.html" class="nav-link">
Carousel
</a>
</li>
<li class="nav-item">
<a href="../docs/dropdowns.html" class="nav-link">
Dropdowns
</a>
</li>
<li class="nav-item">
<a href="../docs/divider.html" class="nav-link">
Divider
</a>
</li>
<li class="nav-item">
<a href="../docs/empty.html" class="nav-link">
Empty states
</a>
</li>
<li class="nav-item">
<a href="../docs/form-elements.html" class="nav-link">
Form elements
</a>
</li>
<li class="nav-item">
<a href="../docs/form-helpers.html" class="nav-link">
Form helpers
</a>
</li>
<li class="nav-item">
<a href="../docs/modals.html" class="nav-link">
Modals
</a>
</li>
<li class="nav-item">
<a href="../docs/progress.html" class="nav-link">
Progress
</a>
</li>
<li class="nav-item">
<a href="../docs/payments.html" class="nav-link">
Payments
</a>
</li>
<li class="nav-item">
<a href="../docs/range-slider.html" class="nav-link">
Range slider
</a>
</li>
<li class="nav-item">
<a href="../docs/ribbons.html" class="nav-link">
Ribbons
</a>
</li>
<li class="nav-item">
<a href="../docs/skeleton.html" class="nav-link">
Skeleton
</a>
</li>
<li class="nav-item">
<a href="../docs/spinners.html" class="nav-link">
Spinners
</a>
</li>
<li class="nav-item">
<a href="../docs/steps.html" class="nav-link">
Steps
</a>
</li>
<li class="nav-item">
<a href="../docs/switch-icon.html" class="nav-link">
Switch icon
</a>
</li>
<li class="nav-item">
<a href="../docs/tables.html" class="nav-link">
Tables
</a>
</li>
<li class="nav-item">
<a href="../docs/tabs.html" class="nav-link">
Tabs
</a>
</li>
<li class="nav-item">
<a href="../docs/timelines.html" class="nav-link">
Timelines
</a>
</li>
<li class="nav-item">
<a href="../docs/toasts.html" class="nav-link">
Toasts
</a>
</li>
<li class="nav-item">
<a href="../docs/tooltips.html" class="nav-link">
Tooltips
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#menu-utils" class="nav-link" data-toggle="collapse" aria-expanded="false">
<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"/><path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z" /></svg>
</span>
Utilities
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-utils">
<li class="nav-item">
<a href="../docs/cursors.html" class="nav-link">
Cursors
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#menu-plugins" class="nav-link" data-toggle="collapse" aria-expanded="false">
<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"/><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><rect x="14" y="14" width="6" height="6" rx="1" /><line x1="14" y1="7" x2="20" y2="7" /><line x1="17" y1="4" x2="17" y2="10" /></svg>
</span>
Plugins
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-plugins">
<li class="nav-item">
<a href="../docs/autosize.html" class="nav-link">
Autosize
</a>
</li>
<li class="nav-item">
<a href="../docs/input-mask.html" class="nav-link">
Form input mask
</a>
</li>
<li class="nav-item">
<a href="../docs/flags.html" class="nav-link active">
Flags
</a>
</li>
<li class="nav-item">
<a href="../docs/charts.html" class="nav-link">
Charts
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="../changelog.html" class="nav-link">
<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>
</a>
</li>
</ul>
</div>
<div class="col-lg-9">
<div class="card card-lg">
<div class="card-body">
<div class="markdown">
<div class="d-flex">
<h1 class="h2 mt-0 mb-3">Flags</h1>
<div class="mb-5">
<div class="d-flex mb-3">
<h1 class="mt-0">Flags</h1>
</div>
<div class="alert alert-info">This module is available in <code>tabler-flags</code>
plugin.
</div>
<p>Thanks to the Tabler flags plug-in, you can create flags to visually represent countries or languages. Flags are often used in forms, as an element of a delivery address, phone number dialling code and many more.</p>
</div>
<div class="alert alert-info">This module is available in <code>tabler-flags</code>
plugin.
</div>
<p>Thanks to the Tabler flags plug-in, you can create flags to visually represent countries or languages. Flags are often used in forms, as an element of a delivery address, phone number dialling code and many more.</p>
<h2 id="flag">Flag</h2>
<p>To create a flag, add the <code class="language-plaintext highlighter-rouge">flag</code> class to a component and choose the country whose flag you want to use. The full list of countries can be found below.</p>
<div class="example no_toc_section">
@@ -2161,7 +2209,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="https://github.com/tabler/tabler/releases" target="_blank" class="link-secondary">v1.0.0-alpha.10</a>
<a href="../changelog.html" class="link-secondary">v1.0.0-alpha.11</a>
</li>
</ul>
</div>

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.10
* @version 1.0.0-alpha.11
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -363,181 +363,14 @@
</li>
</ul>
</li>
<li class="nav-item active dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
<li class="nav-item active">
<a class="nav-link" href="../docs/index.html" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><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="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
</span>
<span class="nav-link-title">
Docs
Documentation
</span>
</a>
<ul class="dropdown-menu dropdown-menu-columns dropdown-menu-columns-3">
<li >
<a class="dropdown-item" href="../docs/index.html" >
Introduction
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/alerts.html" >
Alerts
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/autosize.html" >
Autosize
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/avatars.html" >
Avatars
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/badges.html" >
Badges
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/breadcrumb.html" >
Breadcrumb
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/buttons.html" >
Buttons
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/cards.html" >
Cards
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/carousel.html" >
Carousel
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/colors.html" >
Colors
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/cursors.html" >
Cursors
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/charts.html" >
Charts
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/dropdowns.html" >
Dropdowns
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/divider.html" >
Divider
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/empty.html" >
Empty states
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/flags.html" >
Flags
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/form-elements.html" >
Form elements
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/form-helpers.html" >
Form helpers
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/input-mask.html" >
Form input mask
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/modals.html" >
Modals
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/progress.html" >
Progress
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/payments.html" >
Payments
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/range-slider.html" >
Range slider
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/ribbons.html" >
Ribbons
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/skeleton.html" >
Skeleton
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/spinners.html" >
Spinners
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/steps.html" >
Steps
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/tables.html" >
Tables
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/tabs.html" >
Tabs
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/timelines.html" >
Timelines
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/toasts.html" >
Toasts
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/tooltips.html" >
Tooltips
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/typography.html" >
Typography
</a>
</li>
</ul>
</li>
</ul>
<div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
@@ -566,60 +399,250 @@
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="d-none d-lg-block col-lg-3 order-lg-1 mb-4">
<div class="sticky-top lh-lg py-4">
<a href="https://github.com/tabler/tabler" class="btn btn-white mb-6 btn-block" target="_blank" rel="noreferrer">
<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>
Browse source code
</a>
<h5 class="subheader">On this page</h5>
<ul class="list-unstyled">
<li class="toc-entry toc-h2"><a href="#classic-inputs">Classic inputs</a></li>
<li class="toc-entry toc-h2"><a href="#form-control-rounded">Form control rounded</a></li>
<li class="toc-entry toc-h2"><a href="#form-control-flush">Form control flush</a></li>
<li class="toc-entry toc-h2"><a href="#input-with-icon">Input with icon</a></li>
<li class="toc-entry toc-h2"><a href="#separated-inputs">Separated inputs</a></li>
<li class="toc-entry toc-h2"><a href="#textarea-and-select">Textarea and select</a></li>
<li class="toc-entry toc-h2"><a href="#validation-states">Validation states</a>
<ul>
<li class="toc-entry toc-h3"><a href="#subtle-validation-states">Subtle validation states</a></li>
</ul>
</li>
<li class="toc-entry toc-h2"><a href="#input-size">Input size</a></li>
<li class="toc-entry toc-h2"><a href="#image-check">Image check</a></li>
<li class="toc-entry toc-h2"><a href="#input-color">Input color</a></li>
<li class="toc-entry toc-h2"><a href="#input-color-picker">Input color picker</a></li>
<li class="toc-entry toc-h2"><a href="#datalists">Datalists</a></li>
<li class="toc-entry toc-h2"><a href="#custom-selectboxes">Custom selectboxes</a></li>
<li class="toc-entry toc-h2"><a href="#advanced-selectboxes">Advanced selectboxes</a></li>
<li class="toc-entry toc-h2"><a href="#toggle-switches">Toggle switches</a></li>
<li class="toc-entry toc-h2"><a href="#radios">Radios</a></li>
<li class="toc-entry toc-h2"><a href="#checkboxes">Checkboxes</a></li>
<li class="toc-entry toc-h2"><a href="#range-input">Range input</a></li>
<li class="toc-entry toc-h2"><a href="#fieldset">Fieldset</a></li>
<li class="toc-entry toc-h2"><a href="#input-group">Input group</a></li>
<li class="toc-entry toc-h2"><a href="#input-with-checkboxes-or-radios">Input with checkboxes or radios</a></li>
<li class="toc-entry toc-h2"><a href="#input-with-prepended-or-appended-text">Input with prepended or appended text</a></li>
<li class="toc-entry toc-h2"><a href="#input-with-appended-link">Input with appended link</a></li>
<li class="toc-entry toc-h2"><a href="#input-with-appended-icon-links">Input with appended icon links</a></li>
</ul>
</div>
<div class="row g-5">
<div class="d-none d-lg-block col-lg-3">
<ul class="nav nav-pills nav-vertical">
<li class="nav-item">
<a href="#menu-base" class="nav-link" data-toggle="collapse" aria-expanded="false">
<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"/><path d="M8 9l3 3l-3 3" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
</span>
Getting started
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-base">
<li class="nav-item">
<a href="../docs/index.html" class="nav-link">
Introduction
</a>
</li>
<li class="nav-item">
<a href="../docs/colors.html" class="nav-link">
Colors
</a>
</li>
<li class="nav-item">
<a href="../docs/typography.html" class="nav-link">
Typography
</a>
</li>
<li class="nav-item">
<a href="../docs/icons.html" class="nav-link">
Icons
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#menu-components" class="nav-link" data-toggle="collapse" aria-expanded="true">
<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"/><path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>
</span>
Components
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse show" id="menu-components">
<li class="nav-item">
<a href="../docs/alerts.html" class="nav-link">
Alerts
</a>
</li>
<li class="nav-item">
<a href="../docs/avatars.html" class="nav-link">
Avatars
</a>
</li>
<li class="nav-item">
<a href="../docs/badges.html" class="nav-link">
Badges
</a>
</li>
<li class="nav-item">
<a href="../docs/breadcrumb.html" class="nav-link">
Breadcrumb
</a>
</li>
<li class="nav-item">
<a href="../docs/buttons.html" class="nav-link">
Buttons
</a>
</li>
<li class="nav-item">
<a href="../docs/cards.html" class="nav-link">
Cards
</a>
</li>
<li class="nav-item">
<a href="../docs/carousel.html" class="nav-link">
Carousel
</a>
</li>
<li class="nav-item">
<a href="../docs/dropdowns.html" class="nav-link">
Dropdowns
</a>
</li>
<li class="nav-item">
<a href="../docs/divider.html" class="nav-link">
Divider
</a>
</li>
<li class="nav-item">
<a href="../docs/empty.html" class="nav-link">
Empty states
</a>
</li>
<li class="nav-item">
<a href="../docs/form-elements.html" class="nav-link active">
Form elements
</a>
</li>
<li class="nav-item">
<a href="../docs/form-helpers.html" class="nav-link">
Form helpers
</a>
</li>
<li class="nav-item">
<a href="../docs/modals.html" class="nav-link">
Modals
</a>
</li>
<li class="nav-item">
<a href="../docs/progress.html" class="nav-link">
Progress
</a>
</li>
<li class="nav-item">
<a href="../docs/payments.html" class="nav-link">
Payments
</a>
</li>
<li class="nav-item">
<a href="../docs/range-slider.html" class="nav-link">
Range slider
</a>
</li>
<li class="nav-item">
<a href="../docs/ribbons.html" class="nav-link">
Ribbons
</a>
</li>
<li class="nav-item">
<a href="../docs/skeleton.html" class="nav-link">
Skeleton
</a>
</li>
<li class="nav-item">
<a href="../docs/spinners.html" class="nav-link">
Spinners
</a>
</li>
<li class="nav-item">
<a href="../docs/steps.html" class="nav-link">
Steps
</a>
</li>
<li class="nav-item">
<a href="../docs/switch-icon.html" class="nav-link">
Switch icon
</a>
</li>
<li class="nav-item">
<a href="../docs/tables.html" class="nav-link">
Tables
</a>
</li>
<li class="nav-item">
<a href="../docs/tabs.html" class="nav-link">
Tabs
</a>
</li>
<li class="nav-item">
<a href="../docs/timelines.html" class="nav-link">
Timelines
</a>
</li>
<li class="nav-item">
<a href="../docs/toasts.html" class="nav-link">
Toasts
</a>
</li>
<li class="nav-item">
<a href="../docs/tooltips.html" class="nav-link">
Tooltips
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#menu-utils" class="nav-link" data-toggle="collapse" aria-expanded="false">
<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"/><path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z" /></svg>
</span>
Utilities
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-utils">
<li class="nav-item">
<a href="../docs/cursors.html" class="nav-link">
Cursors
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#menu-plugins" class="nav-link" data-toggle="collapse" aria-expanded="false">
<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"/><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><rect x="14" y="14" width="6" height="6" rx="1" /><line x1="14" y1="7" x2="20" y2="7" /><line x1="17" y1="4" x2="17" y2="10" /></svg>
</span>
Plugins
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-plugins">
<li class="nav-item">
<a href="../docs/autosize.html" class="nav-link">
Autosize
</a>
</li>
<li class="nav-item">
<a href="../docs/input-mask.html" class="nav-link">
Form input mask
</a>
</li>
<li class="nav-item">
<a href="../docs/flags.html" class="nav-link">
Flags
</a>
</li>
<li class="nav-item">
<a href="../docs/charts.html" class="nav-link">
Charts
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="../changelog.html" class="nav-link">
<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>
</a>
</li>
</ul>
</div>
<div class="col-lg-9">
<div class="card card-lg">
<div class="card-body">
<div class="markdown">
<div class="d-flex">
<h1 class="h2 mt-0 mb-3">Form elements</h1>
<p class="ml-auto">
<a href="https://getbootstrap.com/docs/4.4/components/forms/" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" class="icon pr-1 text-blue" 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="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" /><line x1="10" y1="14" x2="20" y2="4" /><polyline points="15 4 20 4 20 9" /></svg>
Bootstrap documentation
</a>
</p>
<div class="mb-5">
<div class="d-flex mb-3">
<h1 class="mt-0">Form elements</h1>
<p class="ml-auto">
<a href="https://getbootstrap.com/docs/4.4/components/forms/" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" class="icon pr-1 text-blue" 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="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" /><line x1="10" y1="14" x2="20" y2="4" /><polyline points="15 4 20 4 20 9" /></svg>
Bootstrap documentation
</a>
</p>
</div>
<p>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>
<p>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>
<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>
<div class="example no_toc_section">
@@ -775,7 +798,7 @@
<input type="text" class="form-control" placeholder="Search for…" />
</div>
<div class="col-auto">
<a href="#" class="btn btn-white btn-icon" aria-label="Button">
<a href="javascript:void()" class="btn btn-white 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" /><circle cx="10" cy="10" r="7" /><line x1="21" y1="21" x2="15" y2="15" /></svg>
</a>
</div>
@@ -1452,22 +1475,22 @@
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-selectgroup"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-selectgroup-item"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"icons"</span> <span class="na">value=</span><span class="s">"home"</span> <span class="na">class=</span><span class="s">"form-selectgroup-input"</span> <span class="na">checked</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-selectgroup-label"</span><span class="nt">&gt;</span><span class="c">&lt;!-- SVG icon code --&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-selectgroup-label"</span><span class="nt">&gt;</span><span class="c">&lt;!-- SVG icon code with class="mr-1" --&gt;</span>
Home<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-selectgroup-item"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"icons"</span> <span class="na">value=</span><span class="s">"user"</span> <span class="na">class=</span><span class="s">"form-selectgroup-input"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-selectgroup-label"</span><span class="nt">&gt;</span><span class="c">&lt;!-- SVG icon code --&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-selectgroup-label"</span><span class="nt">&gt;</span><span class="c">&lt;!-- SVG icon code with class="mr-1" --&gt;</span>
User<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-selectgroup-item"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"icons"</span> <span class="na">value=</span><span class="s">"circle"</span> <span class="na">class=</span><span class="s">"form-selectgroup-input"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-selectgroup-label"</span><span class="nt">&gt;</span><span class="c">&lt;!-- SVG icon code --&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-selectgroup-label"</span><span class="nt">&gt;</span><span class="c">&lt;!-- SVG icon code with class="mr-1" --&gt;</span>
Circle<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-selectgroup-item"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"icons"</span> <span class="na">value=</span><span class="s">"square"</span> <span class="na">class=</span><span class="s">"form-selectgroup-input"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-selectgroup-label"</span><span class="nt">&gt;</span><span class="c">&lt;!-- SVG icon code --&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-selectgroup-label"</span><span class="nt">&gt;</span><span class="c">&lt;!-- SVG icon code with class="mr-1" --&gt;</span>
Square<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;/div&gt;</span>
@@ -1509,7 +1532,7 @@
<span class="form-selectgroup-check"></span>
</div>
<div>
<span class="payment payment-provider-visa payment-sm mr-2"></span>
<span class="payment payment-provider-visa payment-xs mr-2"></span>
ending in <strong>7998</strong>
</div>
</div>
@@ -1521,7 +1544,7 @@
<span class="form-selectgroup-check"></span>
</div>
<div>
<span class="payment payment-provider-mastercard payment-sm mr-2"></span>
<span class="payment payment-provider-mastercard payment-xs mr-2"></span>
ending in <strong>2807</strong>
</div>
</div>
@@ -1533,7 +1556,7 @@
<span class="form-selectgroup-check"></span>
</div>
<div>
<span class="payment payment-provider-paypal payment-sm mr-2"></span>
<span class="payment payment-provider-paypal payment-xs mr-2"></span>
</div>
</div>
</label>
@@ -1633,7 +1656,7 @@
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-selectgroup-check"</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"payment payment-provider-visa payment-sm mr-2"</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"payment payment-provider-visa payment-xs mr-2"</span><span class="nt">&gt;&lt;/span&gt;</span>
ending in <span class="nt">&lt;strong&gt;</span>7998<span class="nt">&lt;/strong&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
@@ -1645,7 +1668,7 @@
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-selectgroup-check"</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"payment payment-provider-mastercard payment-sm mr-2"</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"payment payment-provider-mastercard payment-xs mr-2"</span><span class="nt">&gt;&lt;/span&gt;</span>
ending in <span class="nt">&lt;strong&gt;</span>2807<span class="nt">&lt;/strong&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
@@ -1657,7 +1680,7 @@
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-selectgroup-check"</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"payment payment-provider-paypal payment-sm mr-2"</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"payment payment-provider-paypal payment-xs mr-2"</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/label&gt;</span>
@@ -2180,7 +2203,7 @@
<div class="input-group input-group-flat">
<input type="password" class="form-control" value="ultrastrongpassword" />
<span class="input-group-text">
<a href="#" class="input-group-link">Show password</a>
<a href="javascript:void()" class="input-group-link">Show password</a>
</span>
</div>
</div>
@@ -2208,11 +2231,11 @@
<div class="input-group input-group-flat">
<input type="text" class="form-control" />
<span class="input-group-text">
<a href="#" class="link-secondary" title="Clear search" data-toggle="tooltip"><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" /><line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" /></svg>
<a href="javascript:void()" class="link-secondary" title="Clear search" data-toggle="tooltip"><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" /><line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" /></svg>
</a>
<a href="#" class="link-secondary ml-2" title="Search settings" data-toggle="tooltip"><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="6" cy="10" r="2" /><line x1="6" y1="4" x2="6" y2="8" /><line x1="6" y1="12" x2="6" y2="20" /><circle cx="12" cy="16" r="2" /><line x1="12" y1="4" x2="12" y2="14" /><line x1="12" y1="18" x2="12" y2="20" /><circle cx="18" cy="7" r="2" /><line x1="18" y1="4" x2="18" y2="5" /><line x1="18" y1="9" x2="18" y2="20" /></svg>
<a href="javascript:void()" class="link-secondary ml-2" title="Search settings" data-toggle="tooltip"><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="6" cy="10" r="2" /><line x1="6" y1="4" x2="6" y2="8" /><line x1="6" y1="12" x2="6" y2="20" /><circle cx="12" cy="16" r="2" /><line x1="12" y1="4" x2="12" y2="14" /><line x1="12" y1="18" x2="12" y2="20" /><circle cx="18" cy="7" r="2" /><line x1="18" y1="4" x2="18" y2="5" /><line x1="18" y1="9" x2="18" y2="20" /></svg>
</a>
<a href="#" class="link-secondary ml-2 disabled" title="Add notification" data-toggle="tooltip"><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>
<a href="javascript:void()" class="link-secondary ml-2 disabled" title="Add notification" data-toggle="tooltip"><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>
</a>
</span>
</div>
@@ -2261,7 +2284,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="https://github.com/tabler/tabler/releases" target="_blank" class="link-secondary">v1.0.0-alpha.10</a>
<a href="../changelog.html" class="link-secondary">v1.0.0-alpha.11</a>
</li>
</ul>
</div>

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.10
* @version 1.0.0-alpha.11
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -362,181 +362,14 @@
</li>
</ul>
</li>
<li class="nav-item active dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
<li class="nav-item active">
<a class="nav-link" href="../docs/index.html" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><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="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
</span>
<span class="nav-link-title">
Docs
Documentation
</span>
</a>
<ul class="dropdown-menu dropdown-menu-columns dropdown-menu-columns-3">
<li >
<a class="dropdown-item" href="../docs/index.html" >
Introduction
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/alerts.html" >
Alerts
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/autosize.html" >
Autosize
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/avatars.html" >
Avatars
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/badges.html" >
Badges
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/breadcrumb.html" >
Breadcrumb
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/buttons.html" >
Buttons
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/cards.html" >
Cards
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/carousel.html" >
Carousel
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/colors.html" >
Colors
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/cursors.html" >
Cursors
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/charts.html" >
Charts
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/dropdowns.html" >
Dropdowns
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/divider.html" >
Divider
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/empty.html" >
Empty states
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/flags.html" >
Flags
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/form-elements.html" >
Form elements
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/form-helpers.html" >
Form helpers
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/input-mask.html" >
Form input mask
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/modals.html" >
Modals
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/progress.html" >
Progress
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/payments.html" >
Payments
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/range-slider.html" >
Range slider
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/ribbons.html" >
Ribbons
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/skeleton.html" >
Skeleton
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/spinners.html" >
Spinners
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/steps.html" >
Steps
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/tables.html" >
Tables
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/tabs.html" >
Tabs
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/timelines.html" >
Timelines
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/toasts.html" >
Toasts
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/tooltips.html" >
Tooltips
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/typography.html" >
Typography
</a>
</li>
</ul>
</li>
</ul>
<div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
@@ -565,27 +398,244 @@
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="d-none d-lg-block col-lg-3 order-lg-1 mb-4">
<div class="sticky-top lh-lg py-4">
<a href="https://github.com/tabler/tabler" class="btn btn-white mb-6 btn-block" target="_blank" rel="noreferrer">
<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>
Browse source code
</a>
<h5 class="subheader">On this page</h5>
<ul class="list-unstyled">
<li class="toc-entry toc-h2"><a href="#input-help">Input help</a></li>
</ul>
</div>
<div class="row g-5">
<div class="d-none d-lg-block col-lg-3">
<ul class="nav nav-pills nav-vertical">
<li class="nav-item">
<a href="#menu-base" class="nav-link" data-toggle="collapse" aria-expanded="false">
<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"/><path d="M8 9l3 3l-3 3" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
</span>
Getting started
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-base">
<li class="nav-item">
<a href="../docs/index.html" class="nav-link">
Introduction
</a>
</li>
<li class="nav-item">
<a href="../docs/colors.html" class="nav-link">
Colors
</a>
</li>
<li class="nav-item">
<a href="../docs/typography.html" class="nav-link">
Typography
</a>
</li>
<li class="nav-item">
<a href="../docs/icons.html" class="nav-link">
Icons
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#menu-components" class="nav-link" data-toggle="collapse" aria-expanded="true">
<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"/><path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>
</span>
Components
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse show" id="menu-components">
<li class="nav-item">
<a href="../docs/alerts.html" class="nav-link">
Alerts
</a>
</li>
<li class="nav-item">
<a href="../docs/avatars.html" class="nav-link">
Avatars
</a>
</li>
<li class="nav-item">
<a href="../docs/badges.html" class="nav-link">
Badges
</a>
</li>
<li class="nav-item">
<a href="../docs/breadcrumb.html" class="nav-link">
Breadcrumb
</a>
</li>
<li class="nav-item">
<a href="../docs/buttons.html" class="nav-link">
Buttons
</a>
</li>
<li class="nav-item">
<a href="../docs/cards.html" class="nav-link">
Cards
</a>
</li>
<li class="nav-item">
<a href="../docs/carousel.html" class="nav-link">
Carousel
</a>
</li>
<li class="nav-item">
<a href="../docs/dropdowns.html" class="nav-link">
Dropdowns
</a>
</li>
<li class="nav-item">
<a href="../docs/divider.html" class="nav-link">
Divider
</a>
</li>
<li class="nav-item">
<a href="../docs/empty.html" class="nav-link">
Empty states
</a>
</li>
<li class="nav-item">
<a href="../docs/form-elements.html" class="nav-link">
Form elements
</a>
</li>
<li class="nav-item">
<a href="../docs/form-helpers.html" class="nav-link active">
Form helpers
</a>
</li>
<li class="nav-item">
<a href="../docs/modals.html" class="nav-link">
Modals
</a>
</li>
<li class="nav-item">
<a href="../docs/progress.html" class="nav-link">
Progress
</a>
</li>
<li class="nav-item">
<a href="../docs/payments.html" class="nav-link">
Payments
</a>
</li>
<li class="nav-item">
<a href="../docs/range-slider.html" class="nav-link">
Range slider
</a>
</li>
<li class="nav-item">
<a href="../docs/ribbons.html" class="nav-link">
Ribbons
</a>
</li>
<li class="nav-item">
<a href="../docs/skeleton.html" class="nav-link">
Skeleton
</a>
</li>
<li class="nav-item">
<a href="../docs/spinners.html" class="nav-link">
Spinners
</a>
</li>
<li class="nav-item">
<a href="../docs/steps.html" class="nav-link">
Steps
</a>
</li>
<li class="nav-item">
<a href="../docs/switch-icon.html" class="nav-link">
Switch icon
</a>
</li>
<li class="nav-item">
<a href="../docs/tables.html" class="nav-link">
Tables
</a>
</li>
<li class="nav-item">
<a href="../docs/tabs.html" class="nav-link">
Tabs
</a>
</li>
<li class="nav-item">
<a href="../docs/timelines.html" class="nav-link">
Timelines
</a>
</li>
<li class="nav-item">
<a href="../docs/toasts.html" class="nav-link">
Toasts
</a>
</li>
<li class="nav-item">
<a href="../docs/tooltips.html" class="nav-link">
Tooltips
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#menu-utils" class="nav-link" data-toggle="collapse" aria-expanded="false">
<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"/><path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z" /></svg>
</span>
Utilities
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-utils">
<li class="nav-item">
<a href="../docs/cursors.html" class="nav-link">
Cursors
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#menu-plugins" class="nav-link" data-toggle="collapse" aria-expanded="false">
<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"/><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><rect x="14" y="14" width="6" height="6" rx="1" /><line x1="14" y1="7" x2="20" y2="7" /><line x1="17" y1="4" x2="17" y2="10" /></svg>
</span>
Plugins
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-plugins">
<li class="nav-item">
<a href="../docs/autosize.html" class="nav-link">
Autosize
</a>
</li>
<li class="nav-item">
<a href="../docs/input-mask.html" class="nav-link">
Form input mask
</a>
</li>
<li class="nav-item">
<a href="../docs/flags.html" class="nav-link">
Flags
</a>
</li>
<li class="nav-item">
<a href="../docs/charts.html" class="nav-link">
Charts
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="../changelog.html" class="nav-link">
<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>
</a>
</li>
</ul>
</div>
<div class="col-lg-9">
<div class="card card-lg">
<div class="card-body">
<div class="markdown">
<div class="d-flex">
<h1 class="h2 mt-0 mb-3">Form helpers</h1>
<div class="mb-5">
<div class="d-flex mb-3">
<h1 class="mt-0">Form helpers</h1>
</div>
<p>A form helper can be used to provide users with additional information about the elements of a form that may be unclear.</p>
</div>
<p>A form helper can be used to provide users with additional information about the elements of a form that may be unclear.</p>
<h2 id="input-help">Input help</h2>
<p>Use an input helper to display additional information about a form element. The text label will appear once a user hovers over the helper.</p>
<div class="example no_toc_section">
@@ -624,7 +674,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="https://github.com/tabler/tabler/releases" target="_blank" class="link-secondary">v1.0.0-alpha.10</a>
<a href="../changelog.html" class="link-secondary">v1.0.0-alpha.11</a>
</li>
</ul>
</div>

745
demo/docs/icons.html Normal file
View File

@@ -0,0 +1,745 @@
<!doctype html>
<!--
* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
* @version 1.0.0-alpha.11
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
-->
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<title>Icons - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
<meta name="msapplication-TileColor" content="#206bc4"/>
<meta name="theme-color" content="#206bc4"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="mobile-web-app-capable" content="yes"/>
<meta name="HandheldFriendly" content="True"/>
<meta name="MobileOptimized" content="320"/>
<meta name="robots" content="noindex,nofollow,noarchive"/>
<link rel="icon" href="../favicon.ico" type="image/x-icon"/>
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
<!-- CSS files -->
<link href="../dist/css/tabler.min.css" rel="stylesheet"/>
<link href="../dist/css/tabler-flags.min.css" rel="stylesheet"/>
<link href="../dist/css/tabler-payments.min.css" rel="stylesheet"/>
<link href="../dist/css/demo.min.css" rel="stylesheet"/>
<style>
body {
display: none;
}
</style>
</head>
<body class="antialiased">
<div class="page">
<header class="navbar navbar-expand-md navbar-light">
<div class="container-xl">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-menu">
<span class="navbar-toggler-icon"></span>
</button>
<a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pr-0 pr-md-3">
<img src="../static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
</a>
<div class="navbar-nav flex-row order-md-last">
<div class="nav-item dropdown d-none d-md-flex mr-3">
<a href="#" class="nav-link px-0" data-toggle="dropdown" tabindex="-1">
<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>
<span class="badge bg-red"></span>
</a>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-card">
<div class="card">
<div class="card-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
</div>
</div>
</div>
</div>
<div class="nav-item dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-toggle="dropdown">
<span class="avatar avatar-sm" style="background-image: url(../static/avatars/000m.jpg)"></span>
<div class="d-none d-xl-block pl-2">
<div>Paweł Kuna</div>
<div class="mt-1 small text-muted">UI Designer</div>
</div>
</a>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
<a href="#" class="dropdown-item">Set status</a>
<a href="#" class="dropdown-item">Profile & account</a>
<a href="#" class="dropdown-item">Feedback</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">Settings</a>
<a href="#" class="dropdown-item">Logout</a>
</div>
</div>
</div>
</div>
</header>
<div class="navbar-expand-md">
<div class="collapse navbar-collapse" id="navbar-menu">
<div class="navbar navbar-light">
<div class="container-xl">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="../index.html" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><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"/><polyline points="5 12 3 12 12 3 21 12 19 12" /><path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" /><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" /></svg>
</span>
<span class="nav-link-title">
Home
</span>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button" aria-expanded="false" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><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"/><polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
</span>
<span class="nav-link-title">
User Interface
</span>
</a>
<ul class="dropdown-menu dropdown-menu-columns dropdown-menu-columns-2">
<li >
<a class="dropdown-item" href="../empty.html" >
Empty page
</a>
</li>
<li >
<a class="dropdown-item" href="../blank.html" >
Blank page
</a>
</li>
<li >
<a class="dropdown-item" href="../buttons.html" >
Buttons
</a>
</li>
<li >
<a class="dropdown-item" href="../cards.html" >
Cards
</a>
</li>
<li >
<a class="dropdown-item" href="../cards-masonry.html" >
Cards Masonry
</a>
</li>
<li >
<a class="dropdown-item" href="../dropdowns.html" >
Dropdowns
</a>
</li>
<li >
<a class="dropdown-item" href="../icons.html" >
Icons
</a>
</li>
<li >
<a class="dropdown-item" href="../modals.html" >
Modals
</a>
</li>
<li >
<a class="dropdown-item" href="../maps.html" >
Maps
</a>
</li>
<li >
<a class="dropdown-item" href="../maps-vector.html" >
Vector maps
</a>
</li>
<li >
<a class="dropdown-item" href="../navigation.html" >
Navigation
</a>
</li>
<li >
<a class="dropdown-item" href="../charts.html" >
Charts
</a>
</li>
<li >
<a class="dropdown-item" href="../pagination.html" >
Pagination
</a>
</li>
<li >
<a class="dropdown-item" href="../skeleton.html" >
Skeleton
</a>
</li>
<li >
<a class="dropdown-item" href="../tables.html" >
Tables
</a>
</li>
<li >
<a class="dropdown-item" href="../calendar.html" >
Calendar
</a>
</li>
<li >
<a class="dropdown-item" href="../carousel.html" >
Carousel
</a>
</li>
<li >
<a class="dropdown-item" href="../lists.html" >
Lists
</a>
</li>
<li >
<a class="dropdown-item" href="../docs-index.html" >
Docs index
</a>
</li>
<li class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
Authentication
</a>
<div class="dropdown-menu">
<a href="../sign-in.html" class="dropdown-item">Sign in</a>
<a href="../sign-up.html" class="dropdown-item">Sign up</a>
<a href="../forgot-password.html" class="dropdown-item">Forgot password</a>
<a href="../terms-of-service.html" class="dropdown-item">Terms of service</a>
</div>
</li>
<li class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
Error pages
</a>
<div class="dropdown-menu">
<a href="../error-404.html" class="dropdown-item">404 page</a>
<a href="../error-500.html" class="dropdown-item">500 page</a>
<a href="../error-maintenance.html" class="dropdown-item">Maintenance page</a>
</div>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="../form-elements.html" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><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"/><polyline points="9 11 12 14 20 6" /><path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" /></svg>
</span>
<span class="nav-link-title">
Form elements
</span>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button" aria-expanded="false" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><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="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
</span>
<span class="nav-link-title">
Extra
</span>
</a>
<ul class="dropdown-menu">
<li >
<a class="dropdown-item" href="../invoice.html" >
Invoice
</a>
</li>
<li >
<a class="dropdown-item" href="../blog.html" >
Blog cards
</a>
</li>
<li >
<a class="dropdown-item" href="../snippets.html" >
Snippets
</a>
</li>
<li >
<a class="dropdown-item" href="../search-results.html" >
Search results
</a>
</li>
<li >
<a class="dropdown-item" href="../pricing.html" >
Pricing cards
</a>
</li>
<li >
<a class="dropdown-item" href="../users.html" >
Users
</a>
</li>
<li >
<a class="dropdown-item" href="../gallery.html" >
Gallery
</a>
</li>
<li >
<a class="dropdown-item" href="../profile.html" >
Profile
</a>
</li>
<li >
<a class="dropdown-item" href="../music.html" >
Music
</a>
</li>
<li >
<a class="dropdown-item" href="../welcome.html" >
Welcome
</a>
</li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-toggle="dropdown" role="button" aria-expanded="false" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><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"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
</span>
<span class="nav-link-title">
Layout
</span>
</a>
<ul class="dropdown-menu">
<li >
<a class="dropdown-item" href="../layout-horizontal.html" >
Horizontal
</a>
</li>
<li >
<a class="dropdown-item" href="../layout-vertical.html" >
Vertical
</a>
</li>
<li >
<a class="dropdown-item" href="../layout-vertical-right.html" >
Right vertical
</a>
</li>
<li >
<a class="dropdown-item" href="../layout-condensed.html" >
Condensed
</a>
</li>
<li >
<a class="dropdown-item" href="../layout-condensed-dark.html" >
Condensed dark
</a>
</li>
<li >
<a class="dropdown-item" href="../layout-combo.html" >
Combined
</a>
</li>
<li >
<a class="dropdown-item" href="../layout-navbar-dark.html" >
Navbar dark
</a>
</li>
<li >
<a class="dropdown-item" href="../layout-navbar-overlap.html" >
Navbar overlap
</a>
</li>
<li >
<a class="dropdown-item" href="../layout-dark.html" >
Dark mode
</a>
</li>
<li >
<a class="dropdown-item" href="../layout-rtl.html" >
RTL mode
</a>
</li>
<li >
<a class="dropdown-item" href="../layout-fluid.html" >
Fluid
</a>
</li>
<li >
<a class="dropdown-item" href="../layout-fluid-vertical.html" >
Fluid vertical
</a>
</li>
</ul>
</li>
<li class="nav-item active">
<a class="nav-link" href="../docs/index.html" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><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="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
</span>
<span class="nav-link-title">
Documentation
</span>
</a>
</li>
</ul>
<div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
<form action="." method="get">
<div class="input-icon">
<span class="input-icon-addon">
<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>
</span>
<input type="text" class="form-control" placeholder="Search…">
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="content">
<div class="container-xl">
<!-- Page title -->
<div class="page-header">
<div class="row align-items-center">
<div class="col">
<h2 class="page-title">
Documentation
</h2>
</div>
</div>
</div>
<div class="row g-5">
<div class="d-none d-lg-block col-lg-3">
<ul class="nav nav-pills nav-vertical">
<li class="nav-item">
<a href="#menu-base" class="nav-link" data-toggle="collapse" aria-expanded="true">
<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"/><path d="M8 9l3 3l-3 3" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
</span>
Getting started
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse show" id="menu-base">
<li class="nav-item">
<a href="../docs/index.html" class="nav-link">
Introduction
</a>
</li>
<li class="nav-item">
<a href="../docs/colors.html" class="nav-link">
Colors
</a>
</li>
<li class="nav-item">
<a href="../docs/typography.html" class="nav-link">
Typography
</a>
</li>
<li class="nav-item">
<a href="../docs/icons.html" class="nav-link active">
Icons
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#menu-components" class="nav-link" data-toggle="collapse" aria-expanded="false">
<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"/><path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>
</span>
Components
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-components">
<li class="nav-item">
<a href="../docs/alerts.html" class="nav-link">
Alerts
</a>
</li>
<li class="nav-item">
<a href="../docs/avatars.html" class="nav-link">
Avatars
</a>
</li>
<li class="nav-item">
<a href="../docs/badges.html" class="nav-link">
Badges
</a>
</li>
<li class="nav-item">
<a href="../docs/breadcrumb.html" class="nav-link">
Breadcrumb
</a>
</li>
<li class="nav-item">
<a href="../docs/buttons.html" class="nav-link">
Buttons
</a>
</li>
<li class="nav-item">
<a href="../docs/cards.html" class="nav-link">
Cards
</a>
</li>
<li class="nav-item">
<a href="../docs/carousel.html" class="nav-link">
Carousel
</a>
</li>
<li class="nav-item">
<a href="../docs/dropdowns.html" class="nav-link">
Dropdowns
</a>
</li>
<li class="nav-item">
<a href="../docs/divider.html" class="nav-link">
Divider
</a>
</li>
<li class="nav-item">
<a href="../docs/empty.html" class="nav-link">
Empty states
</a>
</li>
<li class="nav-item">
<a href="../docs/form-elements.html" class="nav-link">
Form elements
</a>
</li>
<li class="nav-item">
<a href="../docs/form-helpers.html" class="nav-link">
Form helpers
</a>
</li>
<li class="nav-item">
<a href="../docs/modals.html" class="nav-link">
Modals
</a>
</li>
<li class="nav-item">
<a href="../docs/progress.html" class="nav-link">
Progress
</a>
</li>
<li class="nav-item">
<a href="../docs/payments.html" class="nav-link">
Payments
</a>
</li>
<li class="nav-item">
<a href="../docs/range-slider.html" class="nav-link">
Range slider
</a>
</li>
<li class="nav-item">
<a href="../docs/ribbons.html" class="nav-link">
Ribbons
</a>
</li>
<li class="nav-item">
<a href="../docs/skeleton.html" class="nav-link">
Skeleton
</a>
</li>
<li class="nav-item">
<a href="../docs/spinners.html" class="nav-link">
Spinners
</a>
</li>
<li class="nav-item">
<a href="../docs/steps.html" class="nav-link">
Steps
</a>
</li>
<li class="nav-item">
<a href="../docs/switch-icon.html" class="nav-link">
Switch icon
</a>
</li>
<li class="nav-item">
<a href="../docs/tables.html" class="nav-link">
Tables
</a>
</li>
<li class="nav-item">
<a href="../docs/tabs.html" class="nav-link">
Tabs
</a>
</li>
<li class="nav-item">
<a href="../docs/timelines.html" class="nav-link">
Timelines
</a>
</li>
<li class="nav-item">
<a href="../docs/toasts.html" class="nav-link">
Toasts
</a>
</li>
<li class="nav-item">
<a href="../docs/tooltips.html" class="nav-link">
Tooltips
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#menu-utils" class="nav-link" data-toggle="collapse" aria-expanded="false">
<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"/><path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z" /></svg>
</span>
Utilities
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-utils">
<li class="nav-item">
<a href="../docs/cursors.html" class="nav-link">
Cursors
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#menu-plugins" class="nav-link" data-toggle="collapse" aria-expanded="false">
<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"/><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><rect x="14" y="14" width="6" height="6" rx="1" /><line x1="14" y1="7" x2="20" y2="7" /><line x1="17" y1="4" x2="17" y2="10" /></svg>
</span>
Plugins
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-plugins">
<li class="nav-item">
<a href="../docs/autosize.html" class="nav-link">
Autosize
</a>
</li>
<li class="nav-item">
<a href="../docs/input-mask.html" class="nav-link">
Form input mask
</a>
</li>
<li class="nav-item">
<a href="../docs/flags.html" class="nav-link">
Flags
</a>
</li>
<li class="nav-item">
<a href="../docs/charts.html" class="nav-link">
Charts
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="../changelog.html" class="nav-link">
<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>
</a>
</li>
</ul>
</div>
<div class="col-lg-9">
<div class="card card-lg">
<div class="card-body">
<div class="markdown">
<div class="mb-5">
<div class="d-flex mb-3">
<h1 class="mt-0">Icons</h1>
</div>
</div>
<h2 id="base-icon">Base icon</h2>
<div class="example no_toc_section">
<div class="example-content">
<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="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>
<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="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></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" /><circle cx="5" cy="18" r="3" /><circle cx="19" cy="18" r="3" /><polyline points="12 19 12 15 9 12 14 8 16 11 19 11" /><circle cx="17" cy="5" r="1" /></svg>
</div>
</div>
<div class="example-code">
<figure class="highlight">
<pre><code class="language-html" data-lang="html"><span class="c">&lt;!-- SVG icon code --&gt;</span>
<span class="c">&lt;!-- SVG icon code --&gt;</span>
<span class="c">&lt;!-- SVG icon code --&gt;</span>
<span class="c">&lt;!-- SVG icon code --&gt;</span></code></pre>
</figure>
</div>
<h2 id="filled-icons">Filled icons</h2>
<div class="example no_toc_section">
<div class="example-content">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-filled" 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-filled" 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="9" /></svg>
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-filled" 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="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-filled" 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" /><rect x="4" y="4" width="16" height="16" rx="2" /></svg>
</div>
</div>
<div class="example-code">
<figure class="highlight">
<pre><code class="language-html" data-lang="html"><span class="c">&lt;!-- SVG icon code with class="icon-filled" --&gt;</span>
<span class="c">&lt;!-- SVG icon code with class="icon-filled" --&gt;</span>
<span class="c">&lt;!-- SVG icon code with class="icon-filled" --&gt;</span>
<span class="c">&lt;!-- SVG icon code with class="icon-filled" --&gt;</span></code></pre>
</figure>
</div>
<h2 id="icon-colors">Icon colors</h2>
<div class="example no_toc_section">
<div class="example-content">
<span class="text-red">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-filled" 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>
</span>
<span class="text-yellow">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-filled" 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="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
</span>
<span class="text-blue">
<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="9" /></svg>
</span>
<span class="text-green">
<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" /><rect x="4" y="4" width="16" height="16" rx="2" /></svg>
</span>
</div>
</div>
<div class="example-code">
<figure class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"text-red"</span><span class="nt">&gt;</span>
<span class="c">&lt;!-- SVG icon code with class="icon-filled" --&gt;</span>
<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"text-yellow"</span><span class="nt">&gt;</span>
<span class="c">&lt;!-- SVG icon code with class="icon-filled" --&gt;</span>
<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"text-blue"</span><span class="nt">&gt;</span>
<span class="c">&lt;!-- SVG icon code --&gt;</span>
<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"text-green"</span><span class="nt">&gt;</span>
<span class="c">&lt;!-- SVG icon code --&gt;</span>
<span class="nt">&lt;/span&gt;</span></code></pre>
</figure>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="footer footer-transparent">
<div class="container">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ml-lg-auto">
<ul class="list-inline list-inline-dots mb-0">
<li class="list-inline-item"><a href="../docs/index.html" class="link-secondary">Documentation</a></li>
<li class="list-inline-item"><a href="../faq.html" class="link-secondary">FAQ</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary">Source code</a></li>
</ul>
</div>
<div class="col-12 col-lg-auto mt-3 mt-lg-0">
<ul class="list-inline list-inline-dots mb-0">
<li class="list-inline-item">
Copyright © 2020
<a href=".." class="link-secondary">Tabler</a>.
All rights reserved.
</li>
<li class="list-inline-item">
<a href="../changelog.html" class="link-secondary">v1.0.0-alpha.11</a>
</li>
</ul>
</div>
</div>
</div>
</footer>
</div>
</div>
<!-- Libs JS -->
<script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<!-- Tabler Core -->
<script src="../dist/js/tabler.min.js"></script>
<script>
document.body.style.display = "block"
</script>
</body>
</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-alpha.10
* @version 1.0.0-alpha.11
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -361,181 +361,14 @@
</li>
</ul>
</li>
<li class="nav-item active dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
<li class="nav-item active">
<a class="nav-link" href="../docs/index.html" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><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="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
</span>
<span class="nav-link-title">
Docs
Documentation
</span>
</a>
<ul class="dropdown-menu dropdown-menu-columns dropdown-menu-columns-3">
<li >
<a class="dropdown-item active" href="../docs/index.html" >
Introduction
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/alerts.html" >
Alerts
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/autosize.html" >
Autosize
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/avatars.html" >
Avatars
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/badges.html" >
Badges
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/breadcrumb.html" >
Breadcrumb
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/buttons.html" >
Buttons
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/cards.html" >
Cards
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/carousel.html" >
Carousel
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/colors.html" >
Colors
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/cursors.html" >
Cursors
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/charts.html" >
Charts
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/dropdowns.html" >
Dropdowns
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/divider.html" >
Divider
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/empty.html" >
Empty states
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/flags.html" >
Flags
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/form-elements.html" >
Form elements
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/form-helpers.html" >
Form helpers
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/input-mask.html" >
Form input mask
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/modals.html" >
Modals
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/progress.html" >
Progress
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/payments.html" >
Payments
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/range-slider.html" >
Range slider
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/ribbons.html" >
Ribbons
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/skeleton.html" >
Skeleton
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/spinners.html" >
Spinners
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/steps.html" >
Steps
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/tables.html" >
Tables
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/tabs.html" >
Tabs
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/timelines.html" >
Timelines
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/toasts.html" >
Toasts
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/tooltips.html" >
Tooltips
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/typography.html" >
Typography
</a>
</li>
</ul>
</li>
</ul>
<div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
@@ -564,29 +397,242 @@
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="d-none d-lg-block col-lg-3 order-lg-1 mb-4">
<div class="sticky-top lh-lg py-4">
<a href="https://github.com/tabler/tabler" class="btn btn-white mb-6 btn-block" target="_blank" rel="noreferrer">
<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>
Browse source code
</a>
<h5 class="subheader">On this page</h5>
<ul class="list-unstyled">
<li class="toc-entry toc-h2"><a href="#what-is-tabler">What is Tabler?</a></li>
<li class="toc-entry toc-h2"><a href="#what-are-the-benefits">What are the benefits?</a></li>
<li class="toc-entry toc-h2"><a href="#set-up-the-environment">Set up the environment</a></li>
<li class="toc-entry toc-h2"><a href="#build-tabler-locally">Build Tabler locally</a></li>
<li class="toc-entry toc-h2"><a href="#bugs-and-feature-requests">Bugs and feature requests</a></li>
</ul>
</div>
<div class="row g-5">
<div class="d-none d-lg-block col-lg-3">
<ul class="nav nav-pills nav-vertical">
<li class="nav-item">
<a href="#menu-base" class="nav-link" data-toggle="collapse" aria-expanded="true">
<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"/><path d="M8 9l3 3l-3 3" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
</span>
Getting started
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse show" id="menu-base">
<li class="nav-item">
<a href="../docs/index.html" class="nav-link active">
Introduction
</a>
</li>
<li class="nav-item">
<a href="../docs/colors.html" class="nav-link">
Colors
</a>
</li>
<li class="nav-item">
<a href="../docs/typography.html" class="nav-link">
Typography
</a>
</li>
<li class="nav-item">
<a href="../docs/icons.html" class="nav-link">
Icons
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#menu-components" class="nav-link" data-toggle="collapse" aria-expanded="false">
<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"/><path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>
</span>
Components
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-components">
<li class="nav-item">
<a href="../docs/alerts.html" class="nav-link">
Alerts
</a>
</li>
<li class="nav-item">
<a href="../docs/avatars.html" class="nav-link">
Avatars
</a>
</li>
<li class="nav-item">
<a href="../docs/badges.html" class="nav-link">
Badges
</a>
</li>
<li class="nav-item">
<a href="../docs/breadcrumb.html" class="nav-link">
Breadcrumb
</a>
</li>
<li class="nav-item">
<a href="../docs/buttons.html" class="nav-link">
Buttons
</a>
</li>
<li class="nav-item">
<a href="../docs/cards.html" class="nav-link">
Cards
</a>
</li>
<li class="nav-item">
<a href="../docs/carousel.html" class="nav-link">
Carousel
</a>
</li>
<li class="nav-item">
<a href="../docs/dropdowns.html" class="nav-link">
Dropdowns
</a>
</li>
<li class="nav-item">
<a href="../docs/divider.html" class="nav-link">
Divider
</a>
</li>
<li class="nav-item">
<a href="../docs/empty.html" class="nav-link">
Empty states
</a>
</li>
<li class="nav-item">
<a href="../docs/form-elements.html" class="nav-link">
Form elements
</a>
</li>
<li class="nav-item">
<a href="../docs/form-helpers.html" class="nav-link">
Form helpers
</a>
</li>
<li class="nav-item">
<a href="../docs/modals.html" class="nav-link">
Modals
</a>
</li>
<li class="nav-item">
<a href="../docs/progress.html" class="nav-link">
Progress
</a>
</li>
<li class="nav-item">
<a href="../docs/payments.html" class="nav-link">
Payments
</a>
</li>
<li class="nav-item">
<a href="../docs/range-slider.html" class="nav-link">
Range slider
</a>
</li>
<li class="nav-item">
<a href="../docs/ribbons.html" class="nav-link">
Ribbons
</a>
</li>
<li class="nav-item">
<a href="../docs/skeleton.html" class="nav-link">
Skeleton
</a>
</li>
<li class="nav-item">
<a href="../docs/spinners.html" class="nav-link">
Spinners
</a>
</li>
<li class="nav-item">
<a href="../docs/steps.html" class="nav-link">
Steps
</a>
</li>
<li class="nav-item">
<a href="../docs/switch-icon.html" class="nav-link">
Switch icon
</a>
</li>
<li class="nav-item">
<a href="../docs/tables.html" class="nav-link">
Tables
</a>
</li>
<li class="nav-item">
<a href="../docs/tabs.html" class="nav-link">
Tabs
</a>
</li>
<li class="nav-item">
<a href="../docs/timelines.html" class="nav-link">
Timelines
</a>
</li>
<li class="nav-item">
<a href="../docs/toasts.html" class="nav-link">
Toasts
</a>
</li>
<li class="nav-item">
<a href="../docs/tooltips.html" class="nav-link">
Tooltips
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#menu-utils" class="nav-link" data-toggle="collapse" aria-expanded="false">
<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"/><path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z" /></svg>
</span>
Utilities
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-utils">
<li class="nav-item">
<a href="../docs/cursors.html" class="nav-link">
Cursors
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#menu-plugins" class="nav-link" data-toggle="collapse" aria-expanded="false">
<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"/><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><rect x="14" y="14" width="6" height="6" rx="1" /><line x1="14" y1="7" x2="20" y2="7" /><line x1="17" y1="4" x2="17" y2="10" /></svg>
</span>
Plugins
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-plugins">
<li class="nav-item">
<a href="../docs/autosize.html" class="nav-link">
Autosize
</a>
</li>
<li class="nav-item">
<a href="../docs/input-mask.html" class="nav-link">
Form input mask
</a>
</li>
<li class="nav-item">
<a href="../docs/flags.html" class="nav-link">
Flags
</a>
</li>
<li class="nav-item">
<a href="../docs/charts.html" class="nav-link">
Charts
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="../changelog.html" class="nav-link">
<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>
</a>
</li>
</ul>
</div>
<div class="col-lg-9">
<div class="card card-lg">
<div class="card-body">
<div class="markdown">
<div class="d-flex">
<h1 class="h2 mt-0 mb-3">Introduction</h1>
<div class="mb-5">
<div class="d-flex mb-3">
<h1 class="mt-0">Introduction</h1>
</div>
</div>
<h2 id="what-is-tabler">What is Tabler?</h2>
<p>Tabler is a UI kit that speeds up the development process and makes it easier than ever! Built on the latest version of Bootstrap, it helps you create templates based on fully customizable and ready-to-use UI components, which can be used by both simple websites and sophisticated systems. With basic knowledge of HTML and CSS, youll be able to create dashboards that are fully functional and beautifully designed!</p>
@@ -601,7 +647,7 @@
<li><a href="https://ruby-lang.org/en/documentation/installation/">Install Ruby</a> - the recommended version is <a href="https://cache.ruby-lang.org/pub/ruby/2.5/ruby-2.5.5.tar.gz">2.5.5</a>.</li>
<li><a href="https://bundler.io">Install Bundler</a> with <code class="language-plaintext highlighter-rouge">gem install bundler</code> and, finally, run <code class="language-plaintext highlighter-rouge">bundle install</code>. It will install all Ruby dependencies, such as <a href="https://jekyllrb.com">Jekyll and plugins</a>.</li>
</ol>
<p><strong>Windows users</strong>:</p>
<h3 id="windows-users">Windows users</h3>
<ol>
<li><a href="https://git-scm.com/download/win">Install Git</a> in <code class="language-plaintext highlighter-rouge">C:\Program Files\git\bin</code> directory and run <code class="language-plaintext highlighter-rouge">npm config set script-shell "C:\Program Files\git\bin\bash.exe"</code> to change the default shell.</li>
<li><a href="https://rubyinstaller.org/downloads/">Install Ruby+Devkit</a> - recommended version is <a href="https://github.com/oneclick/rubyinstaller2/releases/download/RubyInstaller-2.5.5-1/rubyinstaller-devkit-2.5.5-1-x86.exe">2.5.5</a>.</li>
@@ -614,9 +660,6 @@
<li>Open <a href="http://localhost:4000">http://localhost:4000</a> in your browser, and voilà.</li>
<li>Any change in <code class="language-plaintext highlighter-rouge">/pages</code> directory will build the application and refresh the page.</li>
</ol>
<p><strong>Note</strong>:
Run <code class="language-plaintext highlighter-rouge">npm run build</code> for rerforms a one off build application without refresh.
Open <a href="http://localhost:3001">http://localhost:3001</a> to configure the Web server.</p>
<h2 id="bugs-and-feature-requests">Bugs and feature requests</h2>
<p>Found a bug or have a feature request? <a href="https://github.com/tabler/tabler/issues/new">Please open a new issue</a>.</p>
</div>
@@ -643,7 +686,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="https://github.com/tabler/tabler/releases" target="_blank" class="link-secondary">v1.0.0-alpha.10</a>
<a href="../changelog.html" class="link-secondary">v1.0.0-alpha.11</a>
</li>
</ul>
</div>

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.10
* @version 1.0.0-alpha.11
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -362,181 +362,14 @@
</li>
</ul>
</li>
<li class="nav-item active dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
<li class="nav-item active">
<a class="nav-link" href="../docs/index.html" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><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="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
</span>
<span class="nav-link-title">
Docs
Documentation
</span>
</a>
<ul class="dropdown-menu dropdown-menu-columns dropdown-menu-columns-3">
<li >
<a class="dropdown-item" href="../docs/index.html" >
Introduction
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/alerts.html" >
Alerts
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/autosize.html" >
Autosize
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/avatars.html" >
Avatars
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/badges.html" >
Badges
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/breadcrumb.html" >
Breadcrumb
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/buttons.html" >
Buttons
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/cards.html" >
Cards
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/carousel.html" >
Carousel
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/colors.html" >
Colors
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/cursors.html" >
Cursors
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/charts.html" >
Charts
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/dropdowns.html" >
Dropdowns
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/divider.html" >
Divider
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/empty.html" >
Empty states
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/flags.html" >
Flags
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/form-elements.html" >
Form elements
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/form-helpers.html" >
Form helpers
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/input-mask.html" >
Form input mask
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/modals.html" >
Modals
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/progress.html" >
Progress
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/payments.html" >
Payments
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/range-slider.html" >
Range slider
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/ribbons.html" >
Ribbons
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/skeleton.html" >
Skeleton
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/spinners.html" >
Spinners
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/steps.html" >
Steps
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/tables.html" >
Tables
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/tabs.html" >
Tabs
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/timelines.html" >
Timelines
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/toasts.html" >
Toasts
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/tooltips.html" >
Tooltips
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/typography.html" >
Typography
</a>
</li>
</ul>
</li>
</ul>
<div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
@@ -565,27 +398,244 @@
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="d-none d-lg-block col-lg-3 order-lg-1 mb-4">
<div class="sticky-top lh-lg py-4">
<a href="https://github.com/tabler/tabler" class="btn btn-white mb-6 btn-block" target="_blank" rel="noreferrer">
<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>
Browse source code
</a>
<h5 class="subheader">On this page</h5>
<ul class="list-unstyled">
<li class="toc-entry toc-h2"><a href="#default-markup">Default markup</a></li>
</ul>
</div>
<div class="row g-5">
<div class="d-none d-lg-block col-lg-3">
<ul class="nav nav-pills nav-vertical">
<li class="nav-item">
<a href="#menu-base" class="nav-link" data-toggle="collapse" aria-expanded="false">
<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"/><path d="M8 9l3 3l-3 3" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
</span>
Getting started
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-base">
<li class="nav-item">
<a href="../docs/index.html" class="nav-link">
Introduction
</a>
</li>
<li class="nav-item">
<a href="../docs/colors.html" class="nav-link">
Colors
</a>
</li>
<li class="nav-item">
<a href="../docs/typography.html" class="nav-link">
Typography
</a>
</li>
<li class="nav-item">
<a href="../docs/icons.html" class="nav-link">
Icons
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#menu-components" class="nav-link" data-toggle="collapse" aria-expanded="false">
<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"/><path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>
</span>
Components
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-components">
<li class="nav-item">
<a href="../docs/alerts.html" class="nav-link">
Alerts
</a>
</li>
<li class="nav-item">
<a href="../docs/avatars.html" class="nav-link">
Avatars
</a>
</li>
<li class="nav-item">
<a href="../docs/badges.html" class="nav-link">
Badges
</a>
</li>
<li class="nav-item">
<a href="../docs/breadcrumb.html" class="nav-link">
Breadcrumb
</a>
</li>
<li class="nav-item">
<a href="../docs/buttons.html" class="nav-link">
Buttons
</a>
</li>
<li class="nav-item">
<a href="../docs/cards.html" class="nav-link">
Cards
</a>
</li>
<li class="nav-item">
<a href="../docs/carousel.html" class="nav-link">
Carousel
</a>
</li>
<li class="nav-item">
<a href="../docs/dropdowns.html" class="nav-link">
Dropdowns
</a>
</li>
<li class="nav-item">
<a href="../docs/divider.html" class="nav-link">
Divider
</a>
</li>
<li class="nav-item">
<a href="../docs/empty.html" class="nav-link">
Empty states
</a>
</li>
<li class="nav-item">
<a href="../docs/form-elements.html" class="nav-link">
Form elements
</a>
</li>
<li class="nav-item">
<a href="../docs/form-helpers.html" class="nav-link">
Form helpers
</a>
</li>
<li class="nav-item">
<a href="../docs/modals.html" class="nav-link">
Modals
</a>
</li>
<li class="nav-item">
<a href="../docs/progress.html" class="nav-link">
Progress
</a>
</li>
<li class="nav-item">
<a href="../docs/payments.html" class="nav-link">
Payments
</a>
</li>
<li class="nav-item">
<a href="../docs/range-slider.html" class="nav-link">
Range slider
</a>
</li>
<li class="nav-item">
<a href="../docs/ribbons.html" class="nav-link">
Ribbons
</a>
</li>
<li class="nav-item">
<a href="../docs/skeleton.html" class="nav-link">
Skeleton
</a>
</li>
<li class="nav-item">
<a href="../docs/spinners.html" class="nav-link">
Spinners
</a>
</li>
<li class="nav-item">
<a href="../docs/steps.html" class="nav-link">
Steps
</a>
</li>
<li class="nav-item">
<a href="../docs/switch-icon.html" class="nav-link">
Switch icon
</a>
</li>
<li class="nav-item">
<a href="../docs/tables.html" class="nav-link">
Tables
</a>
</li>
<li class="nav-item">
<a href="../docs/tabs.html" class="nav-link">
Tabs
</a>
</li>
<li class="nav-item">
<a href="../docs/timelines.html" class="nav-link">
Timelines
</a>
</li>
<li class="nav-item">
<a href="../docs/toasts.html" class="nav-link">
Toasts
</a>
</li>
<li class="nav-item">
<a href="../docs/tooltips.html" class="nav-link">
Tooltips
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#menu-utils" class="nav-link" data-toggle="collapse" aria-expanded="false">
<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"/><path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z" /></svg>
</span>
Utilities
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-utils">
<li class="nav-item">
<a href="../docs/cursors.html" class="nav-link">
Cursors
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#menu-plugins" class="nav-link" data-toggle="collapse" aria-expanded="true">
<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"/><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><rect x="14" y="14" width="6" height="6" rx="1" /><line x1="14" y1="7" x2="20" y2="7" /><line x1="17" y1="4" x2="17" y2="10" /></svg>
</span>
Plugins
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse show" id="menu-plugins">
<li class="nav-item">
<a href="../docs/autosize.html" class="nav-link">
Autosize
</a>
</li>
<li class="nav-item">
<a href="../docs/input-mask.html" class="nav-link active">
Form input mask
</a>
</li>
<li class="nav-item">
<a href="../docs/flags.html" class="nav-link">
Flags
</a>
</li>
<li class="nav-item">
<a href="../docs/charts.html" class="nav-link">
Charts
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="../changelog.html" class="nav-link">
<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>
</a>
</li>
</ul>
</div>
<div class="col-lg-9">
<div class="card card-lg">
<div class="card-body">
<div class="markdown">
<div class="d-flex">
<h1 class="h2 mt-0 mb-3">Input mask</h1>
<div class="mb-5">
<div class="d-flex mb-3">
<h1 class="mt-0">Input mask</h1>
</div>
<p>An input mask is a used to clarify the input format required in a given field and is helpful for users, removing confusion and reducing the number of validation errors.</p>
</div>
<p>An input mask is a used to clarify the input format required in a given field and is helpful for users, removing confusion and reducing the number of validation errors.</p>
<h2 id="default-markup">Default markup</h2>
<p>Use an input mask in the fields where users have to enter their phone number, to make the formatting rules clear and help them avoid confusion.</p>
<div class="example no_toc_section">
@@ -624,7 +674,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="https://github.com/tabler/tabler/releases" target="_blank" class="link-secondary">v1.0.0-alpha.10</a>
<a href="../changelog.html" class="link-secondary">v1.0.0-alpha.11</a>
</li>
</ul>
</div>

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.10
* @version 1.0.0-alpha.11
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -362,181 +362,14 @@
</li>
</ul>
</li>
<li class="nav-item active dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
<li class="nav-item active">
<a class="nav-link" href="../docs/index.html" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><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="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
</span>
<span class="nav-link-title">
Docs
Documentation
</span>
</a>
<ul class="dropdown-menu dropdown-menu-columns dropdown-menu-columns-3">
<li >
<a class="dropdown-item" href="../docs/index.html" >
Introduction
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/alerts.html" >
Alerts
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/autosize.html" >
Autosize
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/avatars.html" >
Avatars
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/badges.html" >
Badges
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/breadcrumb.html" >
Breadcrumb
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/buttons.html" >
Buttons
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/cards.html" >
Cards
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/carousel.html" >
Carousel
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/colors.html" >
Colors
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/cursors.html" >
Cursors
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/charts.html" >
Charts
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/dropdowns.html" >
Dropdowns
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/divider.html" >
Divider
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/empty.html" >
Empty states
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/flags.html" >
Flags
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/form-elements.html" >
Form elements
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/form-helpers.html" >
Form helpers
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/input-mask.html" >
Form input mask
</a>
</li>
<li >
<a class="dropdown-item active" href="../docs/modals.html" >
Modals
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/progress.html" >
Progress
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/payments.html" >
Payments
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/range-slider.html" >
Range slider
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/ribbons.html" >
Ribbons
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/skeleton.html" >
Skeleton
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/spinners.html" >
Spinners
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/steps.html" >
Steps
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/tables.html" >
Tables
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/tabs.html" >
Tabs
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/timelines.html" >
Timelines
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/toasts.html" >
Toasts
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/tooltips.html" >
Tooltips
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/typography.html" >
Typography
</a>
</li>
</ul>
</li>
</ul>
<div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
@@ -565,29 +398,244 @@
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="d-none d-lg-block col-lg-3 order-lg-1 mb-4">
<div class="sticky-top lh-lg py-4">
<a href="https://github.com/tabler/tabler" class="btn btn-white mb-6 btn-block" target="_blank" rel="noreferrer">
<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>
Browse source code
</a>
<h5 class="subheader">On this page</h5>
<ul class="list-unstyled">
<li class="toc-entry toc-h2"><a href="#default-markup">Default markup</a></li>
<li class="toc-entry toc-h2"><a href="#prompt-and-alert">Prompt and alert</a></li>
<li class="toc-entry toc-h2"><a href="#modal-with-form">Modal with form</a></li>
</ul>
</div>
<div class="row g-5">
<div class="d-none d-lg-block col-lg-3">
<ul class="nav nav-pills nav-vertical">
<li class="nav-item">
<a href="#menu-base" class="nav-link" data-toggle="collapse" aria-expanded="false">
<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"/><path d="M8 9l3 3l-3 3" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
</span>
Getting started
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-base">
<li class="nav-item">
<a href="../docs/index.html" class="nav-link">
Introduction
</a>
</li>
<li class="nav-item">
<a href="../docs/colors.html" class="nav-link">
Colors
</a>
</li>
<li class="nav-item">
<a href="../docs/typography.html" class="nav-link">
Typography
</a>
</li>
<li class="nav-item">
<a href="../docs/icons.html" class="nav-link">
Icons
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#menu-components" class="nav-link" data-toggle="collapse" aria-expanded="true">
<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"/><path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>
</span>
Components
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse show" id="menu-components">
<li class="nav-item">
<a href="../docs/alerts.html" class="nav-link">
Alerts
</a>
</li>
<li class="nav-item">
<a href="../docs/avatars.html" class="nav-link">
Avatars
</a>
</li>
<li class="nav-item">
<a href="../docs/badges.html" class="nav-link">
Badges
</a>
</li>
<li class="nav-item">
<a href="../docs/breadcrumb.html" class="nav-link">
Breadcrumb
</a>
</li>
<li class="nav-item">
<a href="../docs/buttons.html" class="nav-link">
Buttons
</a>
</li>
<li class="nav-item">
<a href="../docs/cards.html" class="nav-link">
Cards
</a>
</li>
<li class="nav-item">
<a href="../docs/carousel.html" class="nav-link">
Carousel
</a>
</li>
<li class="nav-item">
<a href="../docs/dropdowns.html" class="nav-link">
Dropdowns
</a>
</li>
<li class="nav-item">
<a href="../docs/divider.html" class="nav-link">
Divider
</a>
</li>
<li class="nav-item">
<a href="../docs/empty.html" class="nav-link">
Empty states
</a>
</li>
<li class="nav-item">
<a href="../docs/form-elements.html" class="nav-link">
Form elements
</a>
</li>
<li class="nav-item">
<a href="../docs/form-helpers.html" class="nav-link">
Form helpers
</a>
</li>
<li class="nav-item">
<a href="../docs/modals.html" class="nav-link active">
Modals
</a>
</li>
<li class="nav-item">
<a href="../docs/progress.html" class="nav-link">
Progress
</a>
</li>
<li class="nav-item">
<a href="../docs/payments.html" class="nav-link">
Payments
</a>
</li>
<li class="nav-item">
<a href="../docs/range-slider.html" class="nav-link">
Range slider
</a>
</li>
<li class="nav-item">
<a href="../docs/ribbons.html" class="nav-link">
Ribbons
</a>
</li>
<li class="nav-item">
<a href="../docs/skeleton.html" class="nav-link">
Skeleton
</a>
</li>
<li class="nav-item">
<a href="../docs/spinners.html" class="nav-link">
Spinners
</a>
</li>
<li class="nav-item">
<a href="../docs/steps.html" class="nav-link">
Steps
</a>
</li>
<li class="nav-item">
<a href="../docs/switch-icon.html" class="nav-link">
Switch icon
</a>
</li>
<li class="nav-item">
<a href="../docs/tables.html" class="nav-link">
Tables
</a>
</li>
<li class="nav-item">
<a href="../docs/tabs.html" class="nav-link">
Tabs
</a>
</li>
<li class="nav-item">
<a href="../docs/timelines.html" class="nav-link">
Timelines
</a>
</li>
<li class="nav-item">
<a href="../docs/toasts.html" class="nav-link">
Toasts
</a>
</li>
<li class="nav-item">
<a href="../docs/tooltips.html" class="nav-link">
Tooltips
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#menu-utils" class="nav-link" data-toggle="collapse" aria-expanded="false">
<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"/><path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z" /></svg>
</span>
Utilities
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-utils">
<li class="nav-item">
<a href="../docs/cursors.html" class="nav-link">
Cursors
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#menu-plugins" class="nav-link" data-toggle="collapse" aria-expanded="false">
<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"/><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><rect x="14" y="14" width="6" height="6" rx="1" /><line x1="14" y1="7" x2="20" y2="7" /><line x1="17" y1="4" x2="17" y2="10" /></svg>
</span>
Plugins
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-plugins">
<li class="nav-item">
<a href="../docs/autosize.html" class="nav-link">
Autosize
</a>
</li>
<li class="nav-item">
<a href="../docs/input-mask.html" class="nav-link">
Form input mask
</a>
</li>
<li class="nav-item">
<a href="../docs/flags.html" class="nav-link">
Flags
</a>
</li>
<li class="nav-item">
<a href="../docs/charts.html" class="nav-link">
Charts
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="../changelog.html" class="nav-link">
<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>
</a>
</li>
</ul>
</div>
<div class="col-lg-9">
<div class="card card-lg">
<div class="card-body">
<div class="markdown">
<div class="d-flex">
<h1 class="h2 mt-0 mb-3">Modals</h1>
<div class="mb-5">
<div class="d-flex mb-3">
<h1 class="mt-0">Modals</h1>
</div>
<p>Use Bootstraps JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.</p>
</div>
<p>Use Bootstraps JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.</p>
<h2 id="default-markup">Default markup</h2>
<div class="example no_toc_section">
<div class="example-content">
@@ -755,10 +803,10 @@
</div>
</div>
<div class="modal-footer">
<a href="#" class="btn btn-link link-secondary" data-dismiss="modal">
<a href="javascript:void()" class="btn btn-link link-secondary" data-dismiss="modal">
Cancel
</a>
<a href="#" class="btn btn-primary ml-auto" data-dismiss="modal">
<a href="javascript:void()" class="btn btn-primary ml-auto" data-dismiss="modal">
<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" /><line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" /></svg>
Create new report
</a>
@@ -894,7 +942,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="https://github.com/tabler/tabler/releases" target="_blank" class="link-secondary">v1.0.0-alpha.10</a>
<a href="../changelog.html" class="link-secondary">v1.0.0-alpha.11</a>
</li>
</ul>
</div>

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.10
* @version 1.0.0-alpha.11
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -362,181 +362,14 @@
</li>
</ul>
</li>
<li class="nav-item active dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
<li class="nav-item active">
<a class="nav-link" href="../docs/index.html" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><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="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
</span>
<span class="nav-link-title">
Docs
Documentation
</span>
</a>
<ul class="dropdown-menu dropdown-menu-columns dropdown-menu-columns-3">
<li >
<a class="dropdown-item" href="../docs/index.html" >
Introduction
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/alerts.html" >
Alerts
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/autosize.html" >
Autosize
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/avatars.html" >
Avatars
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/badges.html" >
Badges
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/breadcrumb.html" >
Breadcrumb
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/buttons.html" >
Buttons
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/cards.html" >
Cards
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/carousel.html" >
Carousel
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/colors.html" >
Colors
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/cursors.html" >
Cursors
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/charts.html" >
Charts
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/dropdowns.html" >
Dropdowns
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/divider.html" >
Divider
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/empty.html" >
Empty states
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/flags.html" >
Flags
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/form-elements.html" >
Form elements
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/form-helpers.html" >
Form helpers
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/input-mask.html" >
Form input mask
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/modals.html" >
Modals
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/progress.html" >
Progress
</a>
</li>
<li >
<a class="dropdown-item active" href="../docs/payments.html" >
Payments
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/range-slider.html" >
Range slider
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/ribbons.html" >
Ribbons
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/skeleton.html" >
Skeleton
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/spinners.html" >
Spinners
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/steps.html" >
Steps
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/tables.html" >
Tables
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/tabs.html" >
Tabs
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/timelines.html" >
Timelines
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/toasts.html" >
Toasts
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/tooltips.html" >
Tooltips
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/typography.html" >
Typography
</a>
</li>
</ul>
</li>
</ul>
<div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
@@ -565,32 +398,247 @@
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="d-none d-lg-block col-lg-3 order-lg-1 mb-4">
<div class="sticky-top lh-lg py-4">
<a href="https://github.com/tabler/tabler" class="btn btn-white mb-6 btn-block" target="_blank" rel="noreferrer">
<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>
Browse source code
</a>
<h5 class="subheader">On this page</h5>
<ul class="list-unstyled">
<li class="toc-entry toc-h2"><a href="#payment">Payment</a></li>
<li class="toc-entry toc-h2"><a href="#payment-sizes">Payment sizes</a></li>
<li class="toc-entry toc-h2"><a href="#types">Types</a></li>
</ul>
</div>
<div class="row g-5">
<div class="d-none d-lg-block col-lg-3">
<ul class="nav nav-pills nav-vertical">
<li class="nav-item">
<a href="#menu-base" class="nav-link" data-toggle="collapse" aria-expanded="false">
<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"/><path d="M8 9l3 3l-3 3" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
</span>
Getting started
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-base">
<li class="nav-item">
<a href="../docs/index.html" class="nav-link">
Introduction
</a>
</li>
<li class="nav-item">
<a href="../docs/colors.html" class="nav-link">
Colors
</a>
</li>
<li class="nav-item">
<a href="../docs/typography.html" class="nav-link">
Typography
</a>
</li>
<li class="nav-item">
<a href="../docs/icons.html" class="nav-link">
Icons
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#menu-components" class="nav-link" data-toggle="collapse" aria-expanded="true">
<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"/><path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>
</span>
Components
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse show" id="menu-components">
<li class="nav-item">
<a href="../docs/alerts.html" class="nav-link">
Alerts
</a>
</li>
<li class="nav-item">
<a href="../docs/avatars.html" class="nav-link">
Avatars
</a>
</li>
<li class="nav-item">
<a href="../docs/badges.html" class="nav-link">
Badges
</a>
</li>
<li class="nav-item">
<a href="../docs/breadcrumb.html" class="nav-link">
Breadcrumb
</a>
</li>
<li class="nav-item">
<a href="../docs/buttons.html" class="nav-link">
Buttons
</a>
</li>
<li class="nav-item">
<a href="../docs/cards.html" class="nav-link">
Cards
</a>
</li>
<li class="nav-item">
<a href="../docs/carousel.html" class="nav-link">
Carousel
</a>
</li>
<li class="nav-item">
<a href="../docs/dropdowns.html" class="nav-link">
Dropdowns
</a>
</li>
<li class="nav-item">
<a href="../docs/divider.html" class="nav-link">
Divider
</a>
</li>
<li class="nav-item">
<a href="../docs/empty.html" class="nav-link">
Empty states
</a>
</li>
<li class="nav-item">
<a href="../docs/form-elements.html" class="nav-link">
Form elements
</a>
</li>
<li class="nav-item">
<a href="../docs/form-helpers.html" class="nav-link">
Form helpers
</a>
</li>
<li class="nav-item">
<a href="../docs/modals.html" class="nav-link">
Modals
</a>
</li>
<li class="nav-item">
<a href="../docs/progress.html" class="nav-link">
Progress
</a>
</li>
<li class="nav-item">
<a href="../docs/payments.html" class="nav-link active">
Payments
</a>
</li>
<li class="nav-item">
<a href="../docs/range-slider.html" class="nav-link">
Range slider
</a>
</li>
<li class="nav-item">
<a href="../docs/ribbons.html" class="nav-link">
Ribbons
</a>
</li>
<li class="nav-item">
<a href="../docs/skeleton.html" class="nav-link">
Skeleton
</a>
</li>
<li class="nav-item">
<a href="../docs/spinners.html" class="nav-link">
Spinners
</a>
</li>
<li class="nav-item">
<a href="../docs/steps.html" class="nav-link">
Steps
</a>
</li>
<li class="nav-item">
<a href="../docs/switch-icon.html" class="nav-link">
Switch icon
</a>
</li>
<li class="nav-item">
<a href="../docs/tables.html" class="nav-link">
Tables
</a>
</li>
<li class="nav-item">
<a href="../docs/tabs.html" class="nav-link">
Tabs
</a>
</li>
<li class="nav-item">
<a href="../docs/timelines.html" class="nav-link">
Timelines
</a>
</li>
<li class="nav-item">
<a href="../docs/toasts.html" class="nav-link">
Toasts
</a>
</li>
<li class="nav-item">
<a href="../docs/tooltips.html" class="nav-link">
Tooltips
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#menu-utils" class="nav-link" data-toggle="collapse" aria-expanded="false">
<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"/><path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z" /></svg>
</span>
Utilities
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-utils">
<li class="nav-item">
<a href="../docs/cursors.html" class="nav-link">
Cursors
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#menu-plugins" class="nav-link" data-toggle="collapse" aria-expanded="false">
<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"/><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><rect x="14" y="14" width="6" height="6" rx="1" /><line x1="14" y1="7" x2="20" y2="7" /><line x1="17" y1="4" x2="17" y2="10" /></svg>
</span>
Plugins
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-plugins">
<li class="nav-item">
<a href="../docs/autosize.html" class="nav-link">
Autosize
</a>
</li>
<li class="nav-item">
<a href="../docs/input-mask.html" class="nav-link">
Form input mask
</a>
</li>
<li class="nav-item">
<a href="../docs/flags.html" class="nav-link">
Flags
</a>
</li>
<li class="nav-item">
<a href="../docs/charts.html" class="nav-link">
Charts
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="../changelog.html" class="nav-link">
<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>
</a>
</li>
</ul>
</div>
<div class="col-lg-9">
<div class="card card-lg">
<div class="card-body">
<div class="markdown">
<div class="d-flex">
<h1 class="h2 mt-0 mb-3">Payments</h1>
<div class="mb-5">
<div class="d-flex mb-3">
<h1 class="mt-0">Payments</h1>
</div>
<div class="alert alert-info">This module is available in <code>tabler-payments</code>
plugin.
</div>
<p>The Tabler payments plug-in will let you use a set of payment provider icons to facilitate the payment process and make it more-user friendly.</p>
</div>
<div class="alert alert-info">This module is available in <code>tabler-payments</code>
plugin.
</div>
<p>The Tabler payments plug-in will let you use a set of payment provider icons to facilitate the payment process and make it more-user friendly.</p>
<h2 id="payment">Payment</h2>
<p>To create a payment provider icon, add the <code class="language-plaintext highlighter-rouge">payment</code> class to a component and specify the payment provider. The full list of payment providers can be found below.</p>
<div class="example no_toc_section">
@@ -1125,7 +1173,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="https://github.com/tabler/tabler/releases" target="_blank" class="link-secondary">v1.0.0-alpha.10</a>
<a href="../changelog.html" class="link-secondary">v1.0.0-alpha.11</a>
</li>
</ul>
</div>

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.10
* @version 1.0.0-alpha.11
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -362,181 +362,14 @@
</li>
</ul>
</li>
<li class="nav-item active dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
<li class="nav-item active">
<a class="nav-link" href="../docs/index.html" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><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="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
</span>
<span class="nav-link-title">
Docs
Documentation
</span>
</a>
<ul class="dropdown-menu dropdown-menu-columns dropdown-menu-columns-3">
<li >
<a class="dropdown-item" href="../docs/index.html" >
Introduction
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/alerts.html" >
Alerts
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/autosize.html" >
Autosize
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/avatars.html" >
Avatars
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/badges.html" >
Badges
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/breadcrumb.html" >
Breadcrumb
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/buttons.html" >
Buttons
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/cards.html" >
Cards
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/carousel.html" >
Carousel
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/colors.html" >
Colors
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/cursors.html" >
Cursors
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/charts.html" >
Charts
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/dropdowns.html" >
Dropdowns
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/divider.html" >
Divider
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/empty.html" >
Empty states
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/flags.html" >
Flags
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/form-elements.html" >
Form elements
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/form-helpers.html" >
Form helpers
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/input-mask.html" >
Form input mask
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/modals.html" >
Modals
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/progress.html" >
Progress
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/payments.html" >
Payments
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/range-slider.html" >
Range slider
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/ribbons.html" >
Ribbons
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/skeleton.html" >
Skeleton
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/spinners.html" >
Spinners
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/steps.html" >
Steps
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/tables.html" >
Tables
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/tabs.html" >
Tabs
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/timelines.html" >
Timelines
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/toasts.html" >
Toasts
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/tooltips.html" >
Tooltips
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/typography.html" >
Typography
</a>
</li>
</ul>
</li>
</ul>
<div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
@@ -565,38 +398,250 @@
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="d-none d-lg-block col-lg-3 order-lg-1 mb-4">
<div class="sticky-top lh-lg py-4">
<a href="https://github.com/tabler/tabler" class="btn btn-white mb-6 btn-block" target="_blank" rel="noreferrer">
<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>
Browse source code
</a>
<h5 class="subheader">On this page</h5>
<ul class="list-unstyled">
<li class="toc-entry toc-h2"><a href="#default-markup">Default markup</a></li>
<li class="toc-entry toc-h2"><a href="#progress-size">Progress size</a></li>
<li class="toc-entry toc-h2"><a href="#progress-without-value">Progress without value</a></li>
<li class="toc-entry toc-h2"><a href="#indeterminate-progress">Indeterminate progress</a></li>
<li class="toc-entry toc-h2"><a href="#native-progress-element">Native progress element</a></li>
<li class="toc-entry toc-h2"><a href="#progress-color">Progress color</a></li>
</ul>
</div>
<div class="row g-5">
<div class="d-none d-lg-block col-lg-3">
<ul class="nav nav-pills nav-vertical">
<li class="nav-item">
<a href="#menu-base" class="nav-link" data-toggle="collapse" aria-expanded="false">
<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"/><path d="M8 9l3 3l-3 3" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
</span>
Getting started
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-base">
<li class="nav-item">
<a href="../docs/index.html" class="nav-link">
Introduction
</a>
</li>
<li class="nav-item">
<a href="../docs/colors.html" class="nav-link">
Colors
</a>
</li>
<li class="nav-item">
<a href="../docs/typography.html" class="nav-link">
Typography
</a>
</li>
<li class="nav-item">
<a href="../docs/icons.html" class="nav-link">
Icons
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#menu-components" class="nav-link" data-toggle="collapse" aria-expanded="true">
<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"/><path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>
</span>
Components
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse show" id="menu-components">
<li class="nav-item">
<a href="../docs/alerts.html" class="nav-link">
Alerts
</a>
</li>
<li class="nav-item">
<a href="../docs/avatars.html" class="nav-link">
Avatars
</a>
</li>
<li class="nav-item">
<a href="../docs/badges.html" class="nav-link">
Badges
</a>
</li>
<li class="nav-item">
<a href="../docs/breadcrumb.html" class="nav-link">
Breadcrumb
</a>
</li>
<li class="nav-item">
<a href="../docs/buttons.html" class="nav-link">
Buttons
</a>
</li>
<li class="nav-item">
<a href="../docs/cards.html" class="nav-link">
Cards
</a>
</li>
<li class="nav-item">
<a href="../docs/carousel.html" class="nav-link">
Carousel
</a>
</li>
<li class="nav-item">
<a href="../docs/dropdowns.html" class="nav-link">
Dropdowns
</a>
</li>
<li class="nav-item">
<a href="../docs/divider.html" class="nav-link">
Divider
</a>
</li>
<li class="nav-item">
<a href="../docs/empty.html" class="nav-link">
Empty states
</a>
</li>
<li class="nav-item">
<a href="../docs/form-elements.html" class="nav-link">
Form elements
</a>
</li>
<li class="nav-item">
<a href="../docs/form-helpers.html" class="nav-link">
Form helpers
</a>
</li>
<li class="nav-item">
<a href="../docs/modals.html" class="nav-link">
Modals
</a>
</li>
<li class="nav-item">
<a href="../docs/progress.html" class="nav-link active">
Progress
</a>
</li>
<li class="nav-item">
<a href="../docs/payments.html" class="nav-link">
Payments
</a>
</li>
<li class="nav-item">
<a href="../docs/range-slider.html" class="nav-link">
Range slider
</a>
</li>
<li class="nav-item">
<a href="../docs/ribbons.html" class="nav-link">
Ribbons
</a>
</li>
<li class="nav-item">
<a href="../docs/skeleton.html" class="nav-link">
Skeleton
</a>
</li>
<li class="nav-item">
<a href="../docs/spinners.html" class="nav-link">
Spinners
</a>
</li>
<li class="nav-item">
<a href="../docs/steps.html" class="nav-link">
Steps
</a>
</li>
<li class="nav-item">
<a href="../docs/switch-icon.html" class="nav-link">
Switch icon
</a>
</li>
<li class="nav-item">
<a href="../docs/tables.html" class="nav-link">
Tables
</a>
</li>
<li class="nav-item">
<a href="../docs/tabs.html" class="nav-link">
Tabs
</a>
</li>
<li class="nav-item">
<a href="../docs/timelines.html" class="nav-link">
Timelines
</a>
</li>
<li class="nav-item">
<a href="../docs/toasts.html" class="nav-link">
Toasts
</a>
</li>
<li class="nav-item">
<a href="../docs/tooltips.html" class="nav-link">
Tooltips
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#menu-utils" class="nav-link" data-toggle="collapse" aria-expanded="false">
<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"/><path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z" /></svg>
</span>
Utilities
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-utils">
<li class="nav-item">
<a href="../docs/cursors.html" class="nav-link">
Cursors
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#menu-plugins" class="nav-link" data-toggle="collapse" aria-expanded="false">
<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"/><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><rect x="14" y="14" width="6" height="6" rx="1" /><line x1="14" y1="7" x2="20" y2="7" /><line x1="17" y1="4" x2="17" y2="10" /></svg>
</span>
Plugins
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-plugins">
<li class="nav-item">
<a href="../docs/autosize.html" class="nav-link">
Autosize
</a>
</li>
<li class="nav-item">
<a href="../docs/input-mask.html" class="nav-link">
Form input mask
</a>
</li>
<li class="nav-item">
<a href="../docs/flags.html" class="nav-link">
Flags
</a>
</li>
<li class="nav-item">
<a href="../docs/charts.html" class="nav-link">
Charts
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="../changelog.html" class="nav-link">
<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>
</a>
</li>
</ul>
</div>
<div class="col-lg-9">
<div class="card card-lg">
<div class="card-body">
<div class="markdown">
<div class="d-flex">
<h1 class="h2 mt-0 mb-3">Progress bars</h1>
<p class="ml-auto">
<a href="https://getbootstrap.com/docs/4.4/components/progress" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" class="icon pr-1 text-blue" 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="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" /><line x1="10" y1="14" x2="20" y2="4" /><polyline points="15 4 20 4 20 9" /></svg>
Bootstrap documentation
</a>
</p>
<div class="mb-5">
<div class="d-flex mb-3">
<h1 class="mt-0">Progress bars</h1>
<p class="ml-auto">
<a href="https://getbootstrap.com/docs/4.4/components/progress" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" class="icon pr-1 text-blue" 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="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" /><line x1="10" y1="14" x2="20" y2="4" /><polyline points="15 4 20 4 20 9" /></svg>
Bootstrap documentation
</a>
</p>
</div>
<p>Progress bars are used to provide feedback on an action status and inform users of the current progress. Although seemingly small interface elements, they are extremely hepful in managing users' expectations and preventing them from abandoning a process they have initiated.</p>
</div>
<p>Progress bars are used to provide feedback on an action status and inform users of the current progress. Although seemingly small interface elements, they are extremely hepful in managing users' expectations and preventing them from abandoning a process they have initiated.</p>
<h2 id="default-markup">Default markup</h2>
<p>To create a default progress bar, add a <code class="language-plaintext highlighter-rouge">.progress</code> class to a <code class="language-plaintext highlighter-rouge">&lt;div&gt;</code> element. Thanks to that, you will be able to notify users how long they have to wait for a process to complete.</p>
<div class="example no_toc_section">
@@ -759,7 +804,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="https://github.com/tabler/tabler/releases" target="_blank" class="link-secondary">v1.0.0-alpha.10</a>
<a href="../changelog.html" class="link-secondary">v1.0.0-alpha.11</a>
</li>
</ul>
</div>

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.10
* @version 1.0.0-alpha.11
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -362,181 +362,14 @@
</li>
</ul>
</li>
<li class="nav-item active dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
<li class="nav-item active">
<a class="nav-link" href="../docs/index.html" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><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="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
</span>
<span class="nav-link-title">
Docs
Documentation
</span>
</a>
<ul class="dropdown-menu dropdown-menu-columns dropdown-menu-columns-3">
<li >
<a class="dropdown-item" href="../docs/index.html" >
Introduction
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/alerts.html" >
Alerts
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/autosize.html" >
Autosize
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/avatars.html" >
Avatars
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/badges.html" >
Badges
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/breadcrumb.html" >
Breadcrumb
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/buttons.html" >
Buttons
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/cards.html" >
Cards
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/carousel.html" >
Carousel
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/colors.html" >
Colors
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/cursors.html" >
Cursors
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/charts.html" >
Charts
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/dropdowns.html" >
Dropdowns
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/divider.html" >
Divider
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/empty.html" >
Empty states
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/flags.html" >
Flags
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/form-elements.html" >
Form elements
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/form-helpers.html" >
Form helpers
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/input-mask.html" >
Form input mask
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/modals.html" >
Modals
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/progress.html" >
Progress
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/payments.html" >
Payments
</a>
</li>
<li >
<a class="dropdown-item active" href="../docs/range-slider.html" >
Range slider
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/ribbons.html" >
Ribbons
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/skeleton.html" >
Skeleton
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/spinners.html" >
Spinners
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/steps.html" >
Steps
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/tables.html" >
Tables
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/tabs.html" >
Tabs
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/timelines.html" >
Timelines
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/toasts.html" >
Toasts
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/tooltips.html" >
Tooltips
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/typography.html" >
Typography
</a>
</li>
</ul>
</li>
</ul>
<div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
@@ -565,34 +398,242 @@
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="d-none d-lg-block col-lg-3 order-lg-1 mb-4">
<div class="sticky-top lh-lg py-4">
<a href="https://github.com/tabler/tabler" class="btn btn-white mb-6 btn-block" target="_blank" rel="noreferrer">
<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>
Browse source code
</a>
<h5 class="subheader">On this page</h5>
<ul class="list-unstyled">
<li class="toc-entry toc-h2"><a href="#basic-range-slider">Basic range slider</a></li>
<li class="toc-entry toc-h2"><a href="#basic-options">Basic options</a></li>
<li class="toc-entry toc-h2"><a href="#js-name">js-name</a></li>
<li class="toc-entry toc-h2"><a href="#start">start</a></li>
<li class="toc-entry toc-h2"><a href="#range">range</a></li>
<li class="toc-entry toc-h2"><a href="#step">step</a></li>
<li class="toc-entry toc-h2"><a href="#connect">connect</a></li>
<li class="toc-entry toc-h2"><a href="#margin">margin</a></li>
<li class="toc-entry toc-h2"><a href="#limit">limit</a></li>
<li class="toc-entry toc-h2"><a href="#padding">padding</a></li>
</ul>
</div>
<div class="row g-5">
<div class="d-none d-lg-block col-lg-3">
<ul class="nav nav-pills nav-vertical">
<li class="nav-item">
<a href="#menu-base" class="nav-link" data-toggle="collapse" aria-expanded="false">
<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"/><path d="M8 9l3 3l-3 3" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
</span>
Getting started
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-base">
<li class="nav-item">
<a href="../docs/index.html" class="nav-link">
Introduction
</a>
</li>
<li class="nav-item">
<a href="../docs/colors.html" class="nav-link">
Colors
</a>
</li>
<li class="nav-item">
<a href="../docs/typography.html" class="nav-link">
Typography
</a>
</li>
<li class="nav-item">
<a href="../docs/icons.html" class="nav-link">
Icons
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#menu-components" class="nav-link" data-toggle="collapse" aria-expanded="true">
<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"/><path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>
</span>
Components
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse show" id="menu-components">
<li class="nav-item">
<a href="../docs/alerts.html" class="nav-link">
Alerts
</a>
</li>
<li class="nav-item">
<a href="../docs/avatars.html" class="nav-link">
Avatars
</a>
</li>
<li class="nav-item">
<a href="../docs/badges.html" class="nav-link">
Badges
</a>
</li>
<li class="nav-item">
<a href="../docs/breadcrumb.html" class="nav-link">
Breadcrumb
</a>
</li>
<li class="nav-item">
<a href="../docs/buttons.html" class="nav-link">
Buttons
</a>
</li>
<li class="nav-item">
<a href="../docs/cards.html" class="nav-link">
Cards
</a>
</li>
<li class="nav-item">
<a href="../docs/carousel.html" class="nav-link">
Carousel
</a>
</li>
<li class="nav-item">
<a href="../docs/dropdowns.html" class="nav-link">
Dropdowns
</a>
</li>
<li class="nav-item">
<a href="../docs/divider.html" class="nav-link">
Divider
</a>
</li>
<li class="nav-item">
<a href="../docs/empty.html" class="nav-link">
Empty states
</a>
</li>
<li class="nav-item">
<a href="../docs/form-elements.html" class="nav-link">
Form elements
</a>
</li>
<li class="nav-item">
<a href="../docs/form-helpers.html" class="nav-link">
Form helpers
</a>
</li>
<li class="nav-item">
<a href="../docs/modals.html" class="nav-link">
Modals
</a>
</li>
<li class="nav-item">
<a href="../docs/progress.html" class="nav-link">
Progress
</a>
</li>
<li class="nav-item">
<a href="../docs/payments.html" class="nav-link">
Payments
</a>
</li>
<li class="nav-item">
<a href="../docs/range-slider.html" class="nav-link active">
Range slider
</a>
</li>
<li class="nav-item">
<a href="../docs/ribbons.html" class="nav-link">
Ribbons
</a>
</li>
<li class="nav-item">
<a href="../docs/skeleton.html" class="nav-link">
Skeleton
</a>
</li>
<li class="nav-item">
<a href="../docs/spinners.html" class="nav-link">
Spinners
</a>
</li>
<li class="nav-item">
<a href="../docs/steps.html" class="nav-link">
Steps
</a>
</li>
<li class="nav-item">
<a href="../docs/switch-icon.html" class="nav-link">
Switch icon
</a>
</li>
<li class="nav-item">
<a href="../docs/tables.html" class="nav-link">
Tables
</a>
</li>
<li class="nav-item">
<a href="../docs/tabs.html" class="nav-link">
Tabs
</a>
</li>
<li class="nav-item">
<a href="../docs/timelines.html" class="nav-link">
Timelines
</a>
</li>
<li class="nav-item">
<a href="../docs/toasts.html" class="nav-link">
Toasts
</a>
</li>
<li class="nav-item">
<a href="../docs/tooltips.html" class="nav-link">
Tooltips
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#menu-utils" class="nav-link" data-toggle="collapse" aria-expanded="false">
<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"/><path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z" /></svg>
</span>
Utilities
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-utils">
<li class="nav-item">
<a href="../docs/cursors.html" class="nav-link">
Cursors
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#menu-plugins" class="nav-link" data-toggle="collapse" aria-expanded="false">
<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"/><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><rect x="14" y="14" width="6" height="6" rx="1" /><line x1="14" y1="7" x2="20" y2="7" /><line x1="17" y1="4" x2="17" y2="10" /></svg>
</span>
Plugins
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-plugins">
<li class="nav-item">
<a href="../docs/autosize.html" class="nav-link">
Autosize
</a>
</li>
<li class="nav-item">
<a href="../docs/input-mask.html" class="nav-link">
Form input mask
</a>
</li>
<li class="nav-item">
<a href="../docs/flags.html" class="nav-link">
Flags
</a>
</li>
<li class="nav-item">
<a href="../docs/charts.html" class="nav-link">
Charts
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="../changelog.html" class="nav-link">
<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>
</a>
</li>
</ul>
</div>
<div class="col-lg-9">
<div class="card card-lg">
<div class="card-body">
<div class="markdown">
<div class="d-flex">
<h1 class="h2 mt-0 mb-3">Range slider</h1>
<div class="mb-5">
<div class="d-flex mb-3">
<h1 class="mt-0">Range slider</h1>
</div>
</div>
<p>All options and features can be found <a href="https://refreshless.com/nouislider/"><strong>here</strong></a>.</p>
<h2 id="basic-range-slider">Basic range slider</h2>
@@ -819,7 +860,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="https://github.com/tabler/tabler/releases" target="_blank" class="link-secondary">v1.0.0-alpha.10</a>
<a href="../changelog.html" class="link-secondary">v1.0.0-alpha.11</a>
</li>
</ul>
</div>

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.10
* @version 1.0.0-alpha.11
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -362,181 +362,14 @@
</li>
</ul>
</li>
<li class="nav-item active dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
<li class="nav-item active">
<a class="nav-link" href="../docs/index.html" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><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="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
</span>
<span class="nav-link-title">
Docs
Documentation
</span>
</a>
<ul class="dropdown-menu dropdown-menu-columns dropdown-menu-columns-3">
<li >
<a class="dropdown-item" href="../docs/index.html" >
Introduction
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/alerts.html" >
Alerts
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/autosize.html" >
Autosize
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/avatars.html" >
Avatars
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/badges.html" >
Badges
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/breadcrumb.html" >
Breadcrumb
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/buttons.html" >
Buttons
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/cards.html" >
Cards
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/carousel.html" >
Carousel
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/colors.html" >
Colors
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/cursors.html" >
Cursors
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/charts.html" >
Charts
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/dropdowns.html" >
Dropdowns
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/divider.html" >
Divider
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/empty.html" >
Empty states
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/flags.html" >
Flags
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/form-elements.html" >
Form elements
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/form-helpers.html" >
Form helpers
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/input-mask.html" >
Form input mask
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/modals.html" >
Modals
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/progress.html" >
Progress
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/payments.html" >
Payments
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/range-slider.html" >
Range slider
</a>
</li>
<li >
<a class="dropdown-item active" href="../docs/ribbons.html" >
Ribbons
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/skeleton.html" >
Skeleton
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/spinners.html" >
Spinners
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/steps.html" >
Steps
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/tables.html" >
Tables
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/tabs.html" >
Tabs
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/timelines.html" >
Timelines
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/toasts.html" >
Toasts
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/tooltips.html" >
Tooltips
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/typography.html" >
Typography
</a>
</li>
</ul>
</li>
</ul>
<div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
@@ -565,31 +398,244 @@
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="d-none d-lg-block col-lg-3 order-lg-1 mb-4">
<div class="sticky-top lh-lg py-4">
<a href="https://github.com/tabler/tabler" class="btn btn-white mb-6 btn-block" target="_blank" rel="noreferrer">
<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>
Browse source code
</a>
<h5 class="subheader">On this page</h5>
<ul class="list-unstyled">
<li class="toc-entry toc-h2"><a href="#default-markup">Default markup</a></li>
<li class="toc-entry toc-h2"><a href="#ribbon-position">Ribbon position</a></li>
<li class="toc-entry toc-h2"><a href="#ribbon-color">Ribbon color</a></li>
<li class="toc-entry toc-h2"><a href="#ribbon-text">Ribbon text</a></li>
<li class="toc-entry toc-h2"><a href="#ribbon-style">Ribbon style</a></li>
</ul>
</div>
<div class="row g-5">
<div class="d-none d-lg-block col-lg-3">
<ul class="nav nav-pills nav-vertical">
<li class="nav-item">
<a href="#menu-base" class="nav-link" data-toggle="collapse" aria-expanded="false">
<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"/><path d="M8 9l3 3l-3 3" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
</span>
Getting started
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-base">
<li class="nav-item">
<a href="../docs/index.html" class="nav-link">
Introduction
</a>
</li>
<li class="nav-item">
<a href="../docs/colors.html" class="nav-link">
Colors
</a>
</li>
<li class="nav-item">
<a href="../docs/typography.html" class="nav-link">
Typography
</a>
</li>
<li class="nav-item">
<a href="../docs/icons.html" class="nav-link">
Icons
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#menu-components" class="nav-link" data-toggle="collapse" aria-expanded="true">
<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"/><path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>
</span>
Components
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse show" id="menu-components">
<li class="nav-item">
<a href="../docs/alerts.html" class="nav-link">
Alerts
</a>
</li>
<li class="nav-item">
<a href="../docs/avatars.html" class="nav-link">
Avatars
</a>
</li>
<li class="nav-item">
<a href="../docs/badges.html" class="nav-link">
Badges
</a>
</li>
<li class="nav-item">
<a href="../docs/breadcrumb.html" class="nav-link">
Breadcrumb
</a>
</li>
<li class="nav-item">
<a href="../docs/buttons.html" class="nav-link">
Buttons
</a>
</li>
<li class="nav-item">
<a href="../docs/cards.html" class="nav-link">
Cards
</a>
</li>
<li class="nav-item">
<a href="../docs/carousel.html" class="nav-link">
Carousel
</a>
</li>
<li class="nav-item">
<a href="../docs/dropdowns.html" class="nav-link">
Dropdowns
</a>
</li>
<li class="nav-item">
<a href="../docs/divider.html" class="nav-link">
Divider
</a>
</li>
<li class="nav-item">
<a href="../docs/empty.html" class="nav-link">
Empty states
</a>
</li>
<li class="nav-item">
<a href="../docs/form-elements.html" class="nav-link">
Form elements
</a>
</li>
<li class="nav-item">
<a href="../docs/form-helpers.html" class="nav-link">
Form helpers
</a>
</li>
<li class="nav-item">
<a href="../docs/modals.html" class="nav-link">
Modals
</a>
</li>
<li class="nav-item">
<a href="../docs/progress.html" class="nav-link">
Progress
</a>
</li>
<li class="nav-item">
<a href="../docs/payments.html" class="nav-link">
Payments
</a>
</li>
<li class="nav-item">
<a href="../docs/range-slider.html" class="nav-link">
Range slider
</a>
</li>
<li class="nav-item">
<a href="../docs/ribbons.html" class="nav-link active">
Ribbons
</a>
</li>
<li class="nav-item">
<a href="../docs/skeleton.html" class="nav-link">
Skeleton
</a>
</li>
<li class="nav-item">
<a href="../docs/spinners.html" class="nav-link">
Spinners
</a>
</li>
<li class="nav-item">
<a href="../docs/steps.html" class="nav-link">
Steps
</a>
</li>
<li class="nav-item">
<a href="../docs/switch-icon.html" class="nav-link">
Switch icon
</a>
</li>
<li class="nav-item">
<a href="../docs/tables.html" class="nav-link">
Tables
</a>
</li>
<li class="nav-item">
<a href="../docs/tabs.html" class="nav-link">
Tabs
</a>
</li>
<li class="nav-item">
<a href="../docs/timelines.html" class="nav-link">
Timelines
</a>
</li>
<li class="nav-item">
<a href="../docs/toasts.html" class="nav-link">
Toasts
</a>
</li>
<li class="nav-item">
<a href="../docs/tooltips.html" class="nav-link">
Tooltips
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#menu-utils" class="nav-link" data-toggle="collapse" aria-expanded="false">
<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"/><path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z" /></svg>
</span>
Utilities
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-utils">
<li class="nav-item">
<a href="../docs/cursors.html" class="nav-link">
Cursors
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#menu-plugins" class="nav-link" data-toggle="collapse" aria-expanded="false">
<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"/><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><rect x="14" y="14" width="6" height="6" rx="1" /><line x1="14" y1="7" x2="20" y2="7" /><line x1="17" y1="4" x2="17" y2="10" /></svg>
</span>
Plugins
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-plugins">
<li class="nav-item">
<a href="../docs/autosize.html" class="nav-link">
Autosize
</a>
</li>
<li class="nav-item">
<a href="../docs/input-mask.html" class="nav-link">
Form input mask
</a>
</li>
<li class="nav-item">
<a href="../docs/flags.html" class="nav-link">
Flags
</a>
</li>
<li class="nav-item">
<a href="../docs/charts.html" class="nav-link">
Charts
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="../changelog.html" class="nav-link">
<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>
</a>
</li>
</ul>
</div>
<div class="col-lg-9">
<div class="card card-lg">
<div class="card-body">
<div class="markdown">
<div class="d-flex">
<h1 class="h2 mt-0 mb-3">Ribbons</h1>
<div class="mb-5">
<div class="d-flex mb-3">
<h1 class="mt-0">Ribbons</h1>
</div>
<p>Ribbons are graphical elements which attract users' attention to a given element of an interface and make it stand out.</p>
</div>
<p>Ribbons are graphical elements which attract users' attention to a given element of an interface and make it stand out.</p>
<h2 id="default-markup">Default markup</h2>
<p>Use the <code class="language-plaintext highlighter-rouge">ribbon</code> class to add the default ribbon to any section of your interface.</p>
<div class="example no_toc_section">
@@ -731,7 +777,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="https://github.com/tabler/tabler/releases" target="_blank" class="link-secondary">v1.0.0-alpha.10</a>
<a href="../changelog.html" class="link-secondary">v1.0.0-alpha.11</a>
</li>
</ul>
</div>

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.10
* @version 1.0.0-alpha.11
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -362,181 +362,14 @@
</li>
</ul>
</li>
<li class="nav-item active dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
<li class="nav-item active">
<a class="nav-link" href="../docs/index.html" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><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="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
</span>
<span class="nav-link-title">
Docs
Documentation
</span>
</a>
<ul class="dropdown-menu dropdown-menu-columns dropdown-menu-columns-3">
<li >
<a class="dropdown-item" href="../docs/index.html" >
Introduction
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/alerts.html" >
Alerts
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/autosize.html" >
Autosize
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/avatars.html" >
Avatars
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/badges.html" >
Badges
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/breadcrumb.html" >
Breadcrumb
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/buttons.html" >
Buttons
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/cards.html" >
Cards
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/carousel.html" >
Carousel
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/colors.html" >
Colors
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/cursors.html" >
Cursors
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/charts.html" >
Charts
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/dropdowns.html" >
Dropdowns
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/divider.html" >
Divider
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/empty.html" >
Empty states
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/flags.html" >
Flags
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/form-elements.html" >
Form elements
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/form-helpers.html" >
Form helpers
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/input-mask.html" >
Form input mask
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/modals.html" >
Modals
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/progress.html" >
Progress
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/payments.html" >
Payments
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/range-slider.html" >
Range slider
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/ribbons.html" >
Ribbons
</a>
</li>
<li >
<a class="dropdown-item active" href="../docs/skeleton.html" >
Skeleton
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/spinners.html" >
Spinners
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/steps.html" >
Steps
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/tables.html" >
Tables
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/tabs.html" >
Tabs
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/timelines.html" >
Timelines
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/toasts.html" >
Toasts
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/tooltips.html" >
Tooltips
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/typography.html" >
Typography
</a>
</li>
</ul>
</li>
</ul>
<div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
@@ -565,31 +398,244 @@
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="d-none d-lg-block col-lg-3 order-lg-1 mb-4">
<div class="sticky-top lh-lg py-4">
<a href="https://github.com/tabler/tabler" class="btn btn-white mb-6 btn-block" target="_blank" rel="noreferrer">
<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>
Browse source code
</a>
<h5 class="subheader">On this page</h5>
<ul class="list-unstyled">
<li class="toc-entry toc-h2"><a href="#skeleton-line">Skeleton line</a></li>
<li class="toc-entry toc-h2"><a href="#skeleton-heading">Skeleton heading</a></li>
<li class="toc-entry toc-h2"><a href="#skeleton-avatar">Skeleton avatar</a></li>
<li class="toc-entry toc-h2"><a href="#skeleton-image">Skeleton image</a></li>
<li class="toc-entry toc-h2"><a href="#live-examples">Live examples</a></li>
</ul>
</div>
<div class="row g-5">
<div class="d-none d-lg-block col-lg-3">
<ul class="nav nav-pills nav-vertical">
<li class="nav-item">
<a href="#menu-base" class="nav-link" data-toggle="collapse" aria-expanded="false">
<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"/><path d="M8 9l3 3l-3 3" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
</span>
Getting started
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-base">
<li class="nav-item">
<a href="../docs/index.html" class="nav-link">
Introduction
</a>
</li>
<li class="nav-item">
<a href="../docs/colors.html" class="nav-link">
Colors
</a>
</li>
<li class="nav-item">
<a href="../docs/typography.html" class="nav-link">
Typography
</a>
</li>
<li class="nav-item">
<a href="../docs/icons.html" class="nav-link">
Icons
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#menu-components" class="nav-link" data-toggle="collapse" aria-expanded="true">
<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"/><path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>
</span>
Components
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse show" id="menu-components">
<li class="nav-item">
<a href="../docs/alerts.html" class="nav-link">
Alerts
</a>
</li>
<li class="nav-item">
<a href="../docs/avatars.html" class="nav-link">
Avatars
</a>
</li>
<li class="nav-item">
<a href="../docs/badges.html" class="nav-link">
Badges
</a>
</li>
<li class="nav-item">
<a href="../docs/breadcrumb.html" class="nav-link">
Breadcrumb
</a>
</li>
<li class="nav-item">
<a href="../docs/buttons.html" class="nav-link">
Buttons
</a>
</li>
<li class="nav-item">
<a href="../docs/cards.html" class="nav-link">
Cards
</a>
</li>
<li class="nav-item">
<a href="../docs/carousel.html" class="nav-link">
Carousel
</a>
</li>
<li class="nav-item">
<a href="../docs/dropdowns.html" class="nav-link">
Dropdowns
</a>
</li>
<li class="nav-item">
<a href="../docs/divider.html" class="nav-link">
Divider
</a>
</li>
<li class="nav-item">
<a href="../docs/empty.html" class="nav-link">
Empty states
</a>
</li>
<li class="nav-item">
<a href="../docs/form-elements.html" class="nav-link">
Form elements
</a>
</li>
<li class="nav-item">
<a href="../docs/form-helpers.html" class="nav-link">
Form helpers
</a>
</li>
<li class="nav-item">
<a href="../docs/modals.html" class="nav-link">
Modals
</a>
</li>
<li class="nav-item">
<a href="../docs/progress.html" class="nav-link">
Progress
</a>
</li>
<li class="nav-item">
<a href="../docs/payments.html" class="nav-link">
Payments
</a>
</li>
<li class="nav-item">
<a href="../docs/range-slider.html" class="nav-link">
Range slider
</a>
</li>
<li class="nav-item">
<a href="../docs/ribbons.html" class="nav-link">
Ribbons
</a>
</li>
<li class="nav-item">
<a href="../docs/skeleton.html" class="nav-link active">
Skeleton
</a>
</li>
<li class="nav-item">
<a href="../docs/spinners.html" class="nav-link">
Spinners
</a>
</li>
<li class="nav-item">
<a href="../docs/steps.html" class="nav-link">
Steps
</a>
</li>
<li class="nav-item">
<a href="../docs/switch-icon.html" class="nav-link">
Switch icon
</a>
</li>
<li class="nav-item">
<a href="../docs/tables.html" class="nav-link">
Tables
</a>
</li>
<li class="nav-item">
<a href="../docs/tabs.html" class="nav-link">
Tabs
</a>
</li>
<li class="nav-item">
<a href="../docs/timelines.html" class="nav-link">
Timelines
</a>
</li>
<li class="nav-item">
<a href="../docs/toasts.html" class="nav-link">
Toasts
</a>
</li>
<li class="nav-item">
<a href="../docs/tooltips.html" class="nav-link">
Tooltips
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#menu-utils" class="nav-link" data-toggle="collapse" aria-expanded="false">
<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"/><path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z" /></svg>
</span>
Utilities
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-utils">
<li class="nav-item">
<a href="../docs/cursors.html" class="nav-link">
Cursors
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#menu-plugins" class="nav-link" data-toggle="collapse" aria-expanded="false">
<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"/><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><rect x="14" y="14" width="6" height="6" rx="1" /><line x1="14" y1="7" x2="20" y2="7" /><line x1="17" y1="4" x2="17" y2="10" /></svg>
</span>
Plugins
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-plugins">
<li class="nav-item">
<a href="../docs/autosize.html" class="nav-link">
Autosize
</a>
</li>
<li class="nav-item">
<a href="../docs/input-mask.html" class="nav-link">
Form input mask
</a>
</li>
<li class="nav-item">
<a href="../docs/flags.html" class="nav-link">
Flags
</a>
</li>
<li class="nav-item">
<a href="../docs/charts.html" class="nav-link">
Charts
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="../changelog.html" class="nav-link">
<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>
</a>
</li>
</ul>
</div>
<div class="col-lg-9">
<div class="card card-lg">
<div class="card-body">
<div class="markdown">
<div class="d-flex">
<h1 class="h2 mt-0 mb-3">Skeleton</h1>
<div class="mb-5">
<div class="d-flex mb-3">
<h1 class="mt-0">Skeleton</h1>
</div>
<p>Skeleton is used to reserve space for content that soon will appear in a layout.</p>
</div>
<p>Skeleton is used to reserve space for content that soon will appear in a layout.</p>
<h2 id="skeleton-line">Skeleton line</h2>
<p>Skeleton lines can contain have lines of text. Their length is different and depends on the <code class="language-plaintext highlighter-rouge">text-align</code> property.</p>
<div class="example no_toc_section">
@@ -1042,7 +1088,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="https://github.com/tabler/tabler/releases" target="_blank" class="link-secondary">v1.0.0-alpha.10</a>
<a href="../changelog.html" class="link-secondary">v1.0.0-alpha.11</a>
</li>
</ul>
</div>

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.10
* @version 1.0.0-alpha.11
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -362,181 +362,14 @@
</li>
</ul>
</li>
<li class="nav-item active dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
<li class="nav-item active">
<a class="nav-link" href="../docs/index.html" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><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="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
</span>
<span class="nav-link-title">
Docs
Documentation
</span>
</a>
<ul class="dropdown-menu dropdown-menu-columns dropdown-menu-columns-3">
<li >
<a class="dropdown-item" href="../docs/index.html" >
Introduction
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/alerts.html" >
Alerts
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/autosize.html" >
Autosize
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/avatars.html" >
Avatars
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/badges.html" >
Badges
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/breadcrumb.html" >
Breadcrumb
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/buttons.html" >
Buttons
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/cards.html" >
Cards
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/carousel.html" >
Carousel
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/colors.html" >
Colors
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/cursors.html" >
Cursors
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/charts.html" >
Charts
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/dropdowns.html" >
Dropdowns
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/divider.html" >
Divider
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/empty.html" >
Empty states
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/flags.html" >
Flags
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/form-elements.html" >
Form elements
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/form-helpers.html" >
Form helpers
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/input-mask.html" >
Form input mask
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/modals.html" >
Modals
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/progress.html" >
Progress
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/payments.html" >
Payments
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/range-slider.html" >
Range slider
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/ribbons.html" >
Ribbons
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/skeleton.html" >
Skeleton
</a>
</li>
<li >
<a class="dropdown-item active" href="../docs/spinners.html" >
Spinners
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/steps.html" >
Steps
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/tables.html" >
Tables
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/tabs.html" >
Tabs
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/timelines.html" >
Timelines
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/toasts.html" >
Toasts
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/tooltips.html" >
Tooltips
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/typography.html" >
Typography
</a>
</li>
</ul>
</li>
</ul>
<div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
@@ -565,37 +398,250 @@
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="d-none d-lg-block col-lg-3 order-lg-1 mb-4">
<div class="sticky-top lh-lg py-4">
<a href="https://github.com/tabler/tabler" class="btn btn-white mb-6 btn-block" target="_blank" rel="noreferrer">
<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>
Browse source code
</a>
<h5 class="subheader">On this page</h5>
<ul class="list-unstyled">
<li class="toc-entry toc-h2"><a href="#default-markup">Default markup</a></li>
<li class="toc-entry toc-h2"><a href="#colors">Colors</a></li>
<li class="toc-entry toc-h2"><a href="#size">Size</a></li>
<li class="toc-entry toc-h2"><a href="#growing-spinner">Growing spinner</a></li>
<li class="toc-entry toc-h2"><a href="#buttons">Buttons</a></li>
</ul>
</div>
<div class="row g-5">
<div class="d-none d-lg-block col-lg-3">
<ul class="nav nav-pills nav-vertical">
<li class="nav-item">
<a href="#menu-base" class="nav-link" data-toggle="collapse" aria-expanded="false">
<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"/><path d="M8 9l3 3l-3 3" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
</span>
Getting started
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-base">
<li class="nav-item">
<a href="../docs/index.html" class="nav-link">
Introduction
</a>
</li>
<li class="nav-item">
<a href="../docs/colors.html" class="nav-link">
Colors
</a>
</li>
<li class="nav-item">
<a href="../docs/typography.html" class="nav-link">
Typography
</a>
</li>
<li class="nav-item">
<a href="../docs/icons.html" class="nav-link">
Icons
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#menu-components" class="nav-link" data-toggle="collapse" aria-expanded="true">
<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"/><path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>
</span>
Components
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse show" id="menu-components">
<li class="nav-item">
<a href="../docs/alerts.html" class="nav-link">
Alerts
</a>
</li>
<li class="nav-item">
<a href="../docs/avatars.html" class="nav-link">
Avatars
</a>
</li>
<li class="nav-item">
<a href="../docs/badges.html" class="nav-link">
Badges
</a>
</li>
<li class="nav-item">
<a href="../docs/breadcrumb.html" class="nav-link">
Breadcrumb
</a>
</li>
<li class="nav-item">
<a href="../docs/buttons.html" class="nav-link">
Buttons
</a>
</li>
<li class="nav-item">
<a href="../docs/cards.html" class="nav-link">
Cards
</a>
</li>
<li class="nav-item">
<a href="../docs/carousel.html" class="nav-link">
Carousel
</a>
</li>
<li class="nav-item">
<a href="../docs/dropdowns.html" class="nav-link">
Dropdowns
</a>
</li>
<li class="nav-item">
<a href="../docs/divider.html" class="nav-link">
Divider
</a>
</li>
<li class="nav-item">
<a href="../docs/empty.html" class="nav-link">
Empty states
</a>
</li>
<li class="nav-item">
<a href="../docs/form-elements.html" class="nav-link">
Form elements
</a>
</li>
<li class="nav-item">
<a href="../docs/form-helpers.html" class="nav-link">
Form helpers
</a>
</li>
<li class="nav-item">
<a href="../docs/modals.html" class="nav-link">
Modals
</a>
</li>
<li class="nav-item">
<a href="../docs/progress.html" class="nav-link">
Progress
</a>
</li>
<li class="nav-item">
<a href="../docs/payments.html" class="nav-link">
Payments
</a>
</li>
<li class="nav-item">
<a href="../docs/range-slider.html" class="nav-link">
Range slider
</a>
</li>
<li class="nav-item">
<a href="../docs/ribbons.html" class="nav-link">
Ribbons
</a>
</li>
<li class="nav-item">
<a href="../docs/skeleton.html" class="nav-link">
Skeleton
</a>
</li>
<li class="nav-item">
<a href="../docs/spinners.html" class="nav-link active">
Spinners
</a>
</li>
<li class="nav-item">
<a href="../docs/steps.html" class="nav-link">
Steps
</a>
</li>
<li class="nav-item">
<a href="../docs/switch-icon.html" class="nav-link">
Switch icon
</a>
</li>
<li class="nav-item">
<a href="../docs/tables.html" class="nav-link">
Tables
</a>
</li>
<li class="nav-item">
<a href="../docs/tabs.html" class="nav-link">
Tabs
</a>
</li>
<li class="nav-item">
<a href="../docs/timelines.html" class="nav-link">
Timelines
</a>
</li>
<li class="nav-item">
<a href="../docs/toasts.html" class="nav-link">
Toasts
</a>
</li>
<li class="nav-item">
<a href="../docs/tooltips.html" class="nav-link">
Tooltips
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#menu-utils" class="nav-link" data-toggle="collapse" aria-expanded="false">
<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"/><path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z" /></svg>
</span>
Utilities
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-utils">
<li class="nav-item">
<a href="../docs/cursors.html" class="nav-link">
Cursors
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#menu-plugins" class="nav-link" data-toggle="collapse" aria-expanded="false">
<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"/><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><rect x="14" y="14" width="6" height="6" rx="1" /><line x1="14" y1="7" x2="20" y2="7" /><line x1="17" y1="4" x2="17" y2="10" /></svg>
</span>
Plugins
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-plugins">
<li class="nav-item">
<a href="../docs/autosize.html" class="nav-link">
Autosize
</a>
</li>
<li class="nav-item">
<a href="../docs/input-mask.html" class="nav-link">
Form input mask
</a>
</li>
<li class="nav-item">
<a href="../docs/flags.html" class="nav-link">
Flags
</a>
</li>
<li class="nav-item">
<a href="../docs/charts.html" class="nav-link">
Charts
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="../changelog.html" class="nav-link">
<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>
</a>
</li>
</ul>
</div>
<div class="col-lg-9">
<div class="card card-lg">
<div class="card-body">
<div class="markdown">
<div class="d-flex">
<h1 class="h2 mt-0 mb-3">Spinners</h1>
<p class="ml-auto">
<a href="https://getbootstrap.com/docs/4.4/components/spinners/" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" class="icon pr-1 text-blue" 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="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" /><line x1="10" y1="14" x2="20" y2="4" /><polyline points="15 4 20 4 20 9" /></svg>
Bootstrap documentation
</a>
</p>
<div class="mb-5">
<div class="d-flex mb-3">
<h1 class="mt-0">Spinners</h1>
<p class="ml-auto">
<a href="https://getbootstrap.com/docs/4.4/components/spinners/" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" class="icon pr-1 text-blue" 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="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" /><line x1="10" y1="14" x2="20" y2="4" /><polyline points="15 4 20 4 20 9" /></svg>
Bootstrap documentation
</a>
</p>
</div>
<p>Spinners are used to show the loading state of a component or page. They provide feedback for an action a user has taken, when it takes a bit longer to complete.</p>
</div>
<p>Spinners are used to show the loading state of a component or page. They provide feedback for an action a user has taken, when it takes a bit longer to complete.</p>
<h2 id="default-markup">Default markup</h2>
<p>Use the default spinner to notify users that an action they have taken is in progress, helping them avoid confusion.</p>
<div class="example no_toc_section">
@@ -705,23 +751,23 @@
<p>Use buttons with spinners to notify users that an action they have taken by clicking the button is in progress and prevent them from clicking multiple times or giving up.</p>
<div class="example no_toc_section">
<div class="example-content">
<a href="#" class="btn btn-primary">
<a href="javascript:void()" class="btn btn-primary">
<span class="spinner-border spinner-border-sm mr-2" role="status"></span>
Button
</a>
<a href="#" class="btn btn-danger">
<a href="javascript:void()" class="btn btn-danger">
<span class="spinner-border spinner-border-sm mr-2" role="status"></span>
Button
</a>
<a href="#" class="btn btn-warning">
<a href="javascript:void()" class="btn btn-warning">
<span class="spinner-border spinner-border-sm mr-2" role="status"></span>
Button
</a>
<a href="#" class="btn btn-success">
<a href="javascript:void()" class="btn btn-success">
<span class="spinner-border spinner-border-sm" role="status"></span>
Button
</a>
<a href="#" class="btn btn-white">
<a href="javascript:void()" class="btn btn-white">
<span class="spinner-border spinner-border-sm" role="status"></span>
Button
</a>
@@ -775,7 +821,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="https://github.com/tabler/tabler/releases" target="_blank" class="link-secondary">v1.0.0-alpha.10</a>
<a href="../changelog.html" class="link-secondary">v1.0.0-alpha.11</a>
</li>
</ul>
</div>

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.10
* @version 1.0.0-alpha.11
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -362,181 +362,14 @@
</li>
</ul>
</li>
<li class="nav-item active dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
<li class="nav-item active">
<a class="nav-link" href="../docs/index.html" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><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="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
</span>
<span class="nav-link-title">
Docs
Documentation
</span>
</a>
<ul class="dropdown-menu dropdown-menu-columns dropdown-menu-columns-3">
<li >
<a class="dropdown-item" href="../docs/index.html" >
Introduction
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/alerts.html" >
Alerts
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/autosize.html" >
Autosize
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/avatars.html" >
Avatars
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/badges.html" >
Badges
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/breadcrumb.html" >
Breadcrumb
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/buttons.html" >
Buttons
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/cards.html" >
Cards
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/carousel.html" >
Carousel
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/colors.html" >
Colors
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/cursors.html" >
Cursors
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/charts.html" >
Charts
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/dropdowns.html" >
Dropdowns
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/divider.html" >
Divider
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/empty.html" >
Empty states
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/flags.html" >
Flags
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/form-elements.html" >
Form elements
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/form-helpers.html" >
Form helpers
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/input-mask.html" >
Form input mask
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/modals.html" >
Modals
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/progress.html" >
Progress
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/payments.html" >
Payments
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/range-slider.html" >
Range slider
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/ribbons.html" >
Ribbons
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/skeleton.html" >
Skeleton
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/spinners.html" >
Spinners
</a>
</li>
<li >
<a class="dropdown-item active" href="../docs/steps.html" >
Steps
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/tables.html" >
Tables
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/tabs.html" >
Tabs
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/timelines.html" >
Timelines
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/toasts.html" >
Toasts
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/tooltips.html" >
Tooltips
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/typography.html" >
Typography
</a>
</li>
</ul>
</li>
</ul>
<div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
@@ -565,47 +398,260 @@
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="d-none d-lg-block col-lg-3 order-lg-1 mb-4">
<div class="sticky-top lh-lg py-4">
<a href="https://github.com/tabler/tabler" class="btn btn-white mb-6 btn-block" target="_blank" rel="noreferrer">
<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>
Browse source code
</a>
<h5 class="subheader">On this page</h5>
<ul class="list-unstyled">
<li class="toc-entry toc-h2"><a href="#default-markup">Default markup</a></li>
<li class="toc-entry toc-h2"><a href="#tooltips">Tooltips</a></li>
<li class="toc-entry toc-h2"><a href="#color">Color</a></li>
<li class="toc-entry toc-h2"><a href="#steps-without-title">Steps without title</a></li>
<li class="toc-entry toc-h2"><a href="#steps-with-numbers">Steps with numbers</a></li>
</ul>
</div>
<div class="row g-5">
<div class="d-none d-lg-block col-lg-3">
<ul class="nav nav-pills nav-vertical">
<li class="nav-item">
<a href="#menu-base" class="nav-link" data-toggle="collapse" aria-expanded="false">
<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"/><path d="M8 9l3 3l-3 3" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
</span>
Getting started
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-base">
<li class="nav-item">
<a href="../docs/index.html" class="nav-link">
Introduction
</a>
</li>
<li class="nav-item">
<a href="../docs/colors.html" class="nav-link">
Colors
</a>
</li>
<li class="nav-item">
<a href="../docs/typography.html" class="nav-link">
Typography
</a>
</li>
<li class="nav-item">
<a href="../docs/icons.html" class="nav-link">
Icons
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#menu-components" class="nav-link" data-toggle="collapse" aria-expanded="true">
<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"/><path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>
</span>
Components
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse show" id="menu-components">
<li class="nav-item">
<a href="../docs/alerts.html" class="nav-link">
Alerts
</a>
</li>
<li class="nav-item">
<a href="../docs/avatars.html" class="nav-link">
Avatars
</a>
</li>
<li class="nav-item">
<a href="../docs/badges.html" class="nav-link">
Badges
</a>
</li>
<li class="nav-item">
<a href="../docs/breadcrumb.html" class="nav-link">
Breadcrumb
</a>
</li>
<li class="nav-item">
<a href="../docs/buttons.html" class="nav-link">
Buttons
</a>
</li>
<li class="nav-item">
<a href="../docs/cards.html" class="nav-link">
Cards
</a>
</li>
<li class="nav-item">
<a href="../docs/carousel.html" class="nav-link">
Carousel
</a>
</li>
<li class="nav-item">
<a href="../docs/dropdowns.html" class="nav-link">
Dropdowns
</a>
</li>
<li class="nav-item">
<a href="../docs/divider.html" class="nav-link">
Divider
</a>
</li>
<li class="nav-item">
<a href="../docs/empty.html" class="nav-link">
Empty states
</a>
</li>
<li class="nav-item">
<a href="../docs/form-elements.html" class="nav-link">
Form elements
</a>
</li>
<li class="nav-item">
<a href="../docs/form-helpers.html" class="nav-link">
Form helpers
</a>
</li>
<li class="nav-item">
<a href="../docs/modals.html" class="nav-link">
Modals
</a>
</li>
<li class="nav-item">
<a href="../docs/progress.html" class="nav-link">
Progress
</a>
</li>
<li class="nav-item">
<a href="../docs/payments.html" class="nav-link">
Payments
</a>
</li>
<li class="nav-item">
<a href="../docs/range-slider.html" class="nav-link">
Range slider
</a>
</li>
<li class="nav-item">
<a href="../docs/ribbons.html" class="nav-link">
Ribbons
</a>
</li>
<li class="nav-item">
<a href="../docs/skeleton.html" class="nav-link">
Skeleton
</a>
</li>
<li class="nav-item">
<a href="../docs/spinners.html" class="nav-link">
Spinners
</a>
</li>
<li class="nav-item">
<a href="../docs/steps.html" class="nav-link active">
Steps
</a>
</li>
<li class="nav-item">
<a href="../docs/switch-icon.html" class="nav-link">
Switch icon
</a>
</li>
<li class="nav-item">
<a href="../docs/tables.html" class="nav-link">
Tables
</a>
</li>
<li class="nav-item">
<a href="../docs/tabs.html" class="nav-link">
Tabs
</a>
</li>
<li class="nav-item">
<a href="../docs/timelines.html" class="nav-link">
Timelines
</a>
</li>
<li class="nav-item">
<a href="../docs/toasts.html" class="nav-link">
Toasts
</a>
</li>
<li class="nav-item">
<a href="../docs/tooltips.html" class="nav-link">
Tooltips
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#menu-utils" class="nav-link" data-toggle="collapse" aria-expanded="false">
<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"/><path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z" /></svg>
</span>
Utilities
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-utils">
<li class="nav-item">
<a href="../docs/cursors.html" class="nav-link">
Cursors
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#menu-plugins" class="nav-link" data-toggle="collapse" aria-expanded="false">
<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"/><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><rect x="14" y="14" width="6" height="6" rx="1" /><line x1="14" y1="7" x2="20" y2="7" /><line x1="17" y1="4" x2="17" y2="10" /></svg>
</span>
Plugins
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-plugins">
<li class="nav-item">
<a href="../docs/autosize.html" class="nav-link">
Autosize
</a>
</li>
<li class="nav-item">
<a href="../docs/input-mask.html" class="nav-link">
Form input mask
</a>
</li>
<li class="nav-item">
<a href="../docs/flags.html" class="nav-link">
Flags
</a>
</li>
<li class="nav-item">
<a href="../docs/charts.html" class="nav-link">
Charts
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="../changelog.html" class="nav-link">
<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>
</a>
</li>
</ul>
</div>
<div class="col-lg-9">
<div class="card card-lg">
<div class="card-body">
<div class="markdown">
<div class="d-flex">
<h1 class="h2 mt-0 mb-3">Steps</h1>
<div class="mb-5">
<div class="d-flex mb-3">
<h1 class="mt-0">Steps</h1>
</div>
<p>Steps are used to guide users through complex processes, making them easier and more intuitive. Breaking a multi-step process into smaller parts and tracking progress along the way helps users complete it successfully.</p>
</div>
<p>Steps are used to guide users through complex processes, making them easier and more intuitive. Breaking a multi-step process into smaller parts and tracking progress along the way helps users complete it successfully.</p>
<h2 id="default-markup">Default markup</h2>
<p>Steps show users where they are within a process, what steps they have already completed and what they are expected to complete. Making multi-step processes more user-friendly facilitates users interaction with your interface.</p>
<p>Use the <code class="language-plaintext highlighter-rouge">steps</code> class to create the default progress tracker and name the steps accordingly.</p>
<div class="example no_toc_section">
<div class="example-content">
<div class="steps">
<a href="#" class="step-item">
<a href="javascript:void()" class="step-item">
Step 1
</a>
<a href="#" class="step-item">
<a href="javascript:void()" class="step-item">
Step 2
</a>
<a href="#" class="step-item active">
<a href="javascript:void()" class="step-item active">
Step 3
</a>
<span href="#" class="step-item">
<span href="javascript:void()" class="step-item">
Step 4
</span>
</div>
@@ -634,16 +680,16 @@
<div class="example no_toc_section">
<div class="example-content">
<div class="steps">
<a href="#" class="step-item" data-toggle="tooltip" title="Step 1 description">
<a href="javascript:void()" class="step-item" data-toggle="tooltip" title="Step 1 description">
Step 1
</a>
<a href="#" class="step-item" data-toggle="tooltip" title="Step 2 description">
<a href="javascript:void()" class="step-item" data-toggle="tooltip" title="Step 2 description">
Step 2
</a>
<a href="#" class="step-item active" data-toggle="tooltip" title="Step 3 description">
<a href="javascript:void()" class="step-item active" data-toggle="tooltip" title="Step 3 description">
Step 3
</a>
<span href="#" class="step-item" data-toggle="tooltip" title="Step 4 description">
<span href="javascript:void()" class="step-item" data-toggle="tooltip" title="Step 4 description">
Step 4
</span>
</div>
@@ -672,30 +718,30 @@
<div class="example no_toc_section">
<div class="example-content">
<div class="steps steps-green">
<a href="#" class="step-item">
<a href="javascript:void()" class="step-item">
Step 1
</a>
<a href="#" class="step-item">
<a href="javascript:void()" class="step-item">
Step 2
</a>
<a href="#" class="step-item active">
<a href="javascript:void()" class="step-item active">
Step 3
</a>
<span href="#" class="step-item">
<span href="javascript:void()" class="step-item">
Step 4
</span>
</div>
<div class="steps steps-red">
<a href="#" class="step-item">
<a href="javascript:void()" class="step-item">
Step 1
</a>
<a href="#" class="step-item">
<a href="javascript:void()" class="step-item">
Step 2
</a>
<a href="#" class="step-item active">
<a href="javascript:void()" class="step-item active">
Step 3
</a>
<span href="#" class="step-item">
<span href="javascript:void()" class="step-item">
Step 4
</span>
</div>
@@ -738,10 +784,10 @@
<div class="example no_toc_section">
<div class="example-content">
<div class="steps">
<a href="#" class="step-item" data-toggle="tooltip" title="Step 1 description"></a>
<a href="#" class="step-item" data-toggle="tooltip" title="Step 2 description"></a>
<a href="#" class="step-item active" data-toggle="tooltip" title="Step 3 description"></a>
<span href="#" class="step-item" data-toggle="tooltip" title="Step 4 description"></span>
<a href="javascript:void()" class="step-item" data-toggle="tooltip" title="Step 1 description"></a>
<a href="javascript:void()" class="step-item" data-toggle="tooltip" title="Step 2 description"></a>
<a href="javascript:void()" class="step-item active" data-toggle="tooltip" title="Step 3 description"></a>
<span href="javascript:void()" class="step-item" data-toggle="tooltip" title="Step 4 description"></span>
</div>
</div>
</div>
@@ -760,11 +806,11 @@
<div class="example no_toc_section">
<div class="example-content">
<div class="steps steps-counter steps-lime">
<a href="#" class="step-item"></a>
<a href="#" class="step-item active"></a>
<span href="#" class="step-item"></span>
<span href="#" class="step-item"></span>
<span href="#" class="step-item"></span>
<a href="javascript:void()" class="step-item"></a>
<a href="javascript:void()" class="step-item active"></a>
<span href="javascript:void()" class="step-item"></span>
<span href="javascript:void()" class="step-item"></span>
<span href="javascript:void()" class="step-item"></span>
</div>
</div>
</div>
@@ -803,7 +849,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="https://github.com/tabler/tabler/releases" target="_blank" class="link-secondary">v1.0.0-alpha.10</a>
<a href="../changelog.html" class="link-secondary">v1.0.0-alpha.11</a>
</li>
</ul>
</div>

848
demo/docs/switch-icon.html Normal file
View File

@@ -0,0 +1,848 @@
<!doctype html>
<!--
* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
* @version 1.0.0-alpha.11
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
-->
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<title>Switch icon - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
<meta name="msapplication-TileColor" content="#206bc4"/>
<meta name="theme-color" content="#206bc4"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="mobile-web-app-capable" content="yes"/>
<meta name="HandheldFriendly" content="True"/>
<meta name="MobileOptimized" content="320"/>
<meta name="robots" content="noindex,nofollow,noarchive"/>
<link rel="icon" href="../favicon.ico" type="image/x-icon"/>
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
<meta name="description" content="The Switch Icon component is used to create a transition between two icons. You can use any icon, both line and filled version."/>
<!-- CSS files -->
<link href="../dist/css/tabler.min.css" rel="stylesheet"/>
<link href="../dist/css/tabler-flags.min.css" rel="stylesheet"/>
<link href="../dist/css/tabler-payments.min.css" rel="stylesheet"/>
<link href="../dist/css/demo.min.css" rel="stylesheet"/>
<style>
body {
display: none;
}
</style>
</head>
<body class="antialiased">
<div class="page">
<header class="navbar navbar-expand-md navbar-light">
<div class="container-xl">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-menu">
<span class="navbar-toggler-icon"></span>
</button>
<a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pr-0 pr-md-3">
<img src="../static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
</a>
<div class="navbar-nav flex-row order-md-last">
<div class="nav-item dropdown d-none d-md-flex mr-3">
<a href="#" class="nav-link px-0" data-toggle="dropdown" tabindex="-1">
<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>
<span class="badge bg-red"></span>
</a>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-card">
<div class="card">
<div class="card-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
</div>
</div>
</div>
</div>
<div class="nav-item dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-toggle="dropdown">
<span class="avatar avatar-sm" style="background-image: url(../static/avatars/000m.jpg)"></span>
<div class="d-none d-xl-block pl-2">
<div>Paweł Kuna</div>
<div class="mt-1 small text-muted">UI Designer</div>
</div>
</a>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
<a href="#" class="dropdown-item">Set status</a>
<a href="#" class="dropdown-item">Profile & account</a>
<a href="#" class="dropdown-item">Feedback</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">Settings</a>
<a href="#" class="dropdown-item">Logout</a>
</div>
</div>
</div>
</div>
</header>
<div class="navbar-expand-md">
<div class="collapse navbar-collapse" id="navbar-menu">
<div class="navbar navbar-light">
<div class="container-xl">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="../index.html" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><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"/><polyline points="5 12 3 12 12 3 21 12 19 12" /><path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" /><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" /></svg>
</span>
<span class="nav-link-title">
Home
</span>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button" aria-expanded="false" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><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"/><polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
</span>
<span class="nav-link-title">
User Interface
</span>
</a>
<ul class="dropdown-menu dropdown-menu-columns dropdown-menu-columns-2">
<li >
<a class="dropdown-item" href="../empty.html" >
Empty page
</a>
</li>
<li >
<a class="dropdown-item" href="../blank.html" >
Blank page
</a>
</li>
<li >
<a class="dropdown-item" href="../buttons.html" >
Buttons
</a>
</li>
<li >
<a class="dropdown-item" href="../cards.html" >
Cards
</a>
</li>
<li >
<a class="dropdown-item" href="../cards-masonry.html" >
Cards Masonry
</a>
</li>
<li >
<a class="dropdown-item" href="../dropdowns.html" >
Dropdowns
</a>
</li>
<li >
<a class="dropdown-item" href="../icons.html" >
Icons
</a>
</li>
<li >
<a class="dropdown-item" href="../modals.html" >
Modals
</a>
</li>
<li >
<a class="dropdown-item" href="../maps.html" >
Maps
</a>
</li>
<li >
<a class="dropdown-item" href="../maps-vector.html" >
Vector maps
</a>
</li>
<li >
<a class="dropdown-item" href="../navigation.html" >
Navigation
</a>
</li>
<li >
<a class="dropdown-item" href="../charts.html" >
Charts
</a>
</li>
<li >
<a class="dropdown-item" href="../pagination.html" >
Pagination
</a>
</li>
<li >
<a class="dropdown-item" href="../skeleton.html" >
Skeleton
</a>
</li>
<li >
<a class="dropdown-item" href="../tables.html" >
Tables
</a>
</li>
<li >
<a class="dropdown-item" href="../calendar.html" >
Calendar
</a>
</li>
<li >
<a class="dropdown-item" href="../carousel.html" >
Carousel
</a>
</li>
<li >
<a class="dropdown-item" href="../lists.html" >
Lists
</a>
</li>
<li >
<a class="dropdown-item" href="../docs-index.html" >
Docs index
</a>
</li>
<li class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
Authentication
</a>
<div class="dropdown-menu">
<a href="../sign-in.html" class="dropdown-item">Sign in</a>
<a href="../sign-up.html" class="dropdown-item">Sign up</a>
<a href="../forgot-password.html" class="dropdown-item">Forgot password</a>
<a href="../terms-of-service.html" class="dropdown-item">Terms of service</a>
</div>
</li>
<li class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
Error pages
</a>
<div class="dropdown-menu">
<a href="../error-404.html" class="dropdown-item">404 page</a>
<a href="../error-500.html" class="dropdown-item">500 page</a>
<a href="../error-maintenance.html" class="dropdown-item">Maintenance page</a>
</div>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="../form-elements.html" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><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"/><polyline points="9 11 12 14 20 6" /><path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" /></svg>
</span>
<span class="nav-link-title">
Form elements
</span>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button" aria-expanded="false" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><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="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
</span>
<span class="nav-link-title">
Extra
</span>
</a>
<ul class="dropdown-menu">
<li >
<a class="dropdown-item" href="../invoice.html" >
Invoice
</a>
</li>
<li >
<a class="dropdown-item" href="../blog.html" >
Blog cards
</a>
</li>
<li >
<a class="dropdown-item" href="../snippets.html" >
Snippets
</a>
</li>
<li >
<a class="dropdown-item" href="../search-results.html" >
Search results
</a>
</li>
<li >
<a class="dropdown-item" href="../pricing.html" >
Pricing cards
</a>
</li>
<li >
<a class="dropdown-item" href="../users.html" >
Users
</a>
</li>
<li >
<a class="dropdown-item" href="../gallery.html" >
Gallery
</a>
</li>
<li >
<a class="dropdown-item" href="../profile.html" >
Profile
</a>
</li>
<li >
<a class="dropdown-item" href="../music.html" >
Music
</a>
</li>
<li >
<a class="dropdown-item" href="../welcome.html" >
Welcome
</a>
</li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-toggle="dropdown" role="button" aria-expanded="false" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><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"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
</span>
<span class="nav-link-title">
Layout
</span>
</a>
<ul class="dropdown-menu">
<li >
<a class="dropdown-item" href="../layout-horizontal.html" >
Horizontal
</a>
</li>
<li >
<a class="dropdown-item" href="../layout-vertical.html" >
Vertical
</a>
</li>
<li >
<a class="dropdown-item" href="../layout-vertical-right.html" >
Right vertical
</a>
</li>
<li >
<a class="dropdown-item" href="../layout-condensed.html" >
Condensed
</a>
</li>
<li >
<a class="dropdown-item" href="../layout-condensed-dark.html" >
Condensed dark
</a>
</li>
<li >
<a class="dropdown-item" href="../layout-combo.html" >
Combined
</a>
</li>
<li >
<a class="dropdown-item" href="../layout-navbar-dark.html" >
Navbar dark
</a>
</li>
<li >
<a class="dropdown-item" href="../layout-navbar-overlap.html" >
Navbar overlap
</a>
</li>
<li >
<a class="dropdown-item" href="../layout-dark.html" >
Dark mode
</a>
</li>
<li >
<a class="dropdown-item" href="../layout-rtl.html" >
RTL mode
</a>
</li>
<li >
<a class="dropdown-item" href="../layout-fluid.html" >
Fluid
</a>
</li>
<li >
<a class="dropdown-item" href="../layout-fluid-vertical.html" >
Fluid vertical
</a>
</li>
</ul>
</li>
<li class="nav-item active">
<a class="nav-link" href="../docs/index.html" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><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="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
</span>
<span class="nav-link-title">
Documentation
</span>
</a>
</li>
</ul>
<div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
<form action="." method="get">
<div class="input-icon">
<span class="input-icon-addon">
<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>
</span>
<input type="text" class="form-control" placeholder="Search…">
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="content">
<div class="container-xl">
<!-- Page title -->
<div class="page-header">
<div class="row align-items-center">
<div class="col">
<h2 class="page-title">
Documentation
</h2>
</div>
</div>
</div>
<div class="row g-5">
<div class="d-none d-lg-block col-lg-3">
<ul class="nav nav-pills nav-vertical">
<li class="nav-item">
<a href="#menu-base" class="nav-link" data-toggle="collapse" aria-expanded="false">
<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"/><path d="M8 9l3 3l-3 3" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
</span>
Getting started
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-base">
<li class="nav-item">
<a href="../docs/index.html" class="nav-link">
Introduction
</a>
</li>
<li class="nav-item">
<a href="../docs/colors.html" class="nav-link">
Colors
</a>
</li>
<li class="nav-item">
<a href="../docs/typography.html" class="nav-link">
Typography
</a>
</li>
<li class="nav-item">
<a href="../docs/icons.html" class="nav-link">
Icons
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#menu-components" class="nav-link" data-toggle="collapse" aria-expanded="true">
<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"/><path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>
</span>
Components
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse show" id="menu-components">
<li class="nav-item">
<a href="../docs/alerts.html" class="nav-link">
Alerts
</a>
</li>
<li class="nav-item">
<a href="../docs/avatars.html" class="nav-link">
Avatars
</a>
</li>
<li class="nav-item">
<a href="../docs/badges.html" class="nav-link">
Badges
</a>
</li>
<li class="nav-item">
<a href="../docs/breadcrumb.html" class="nav-link">
Breadcrumb
</a>
</li>
<li class="nav-item">
<a href="../docs/buttons.html" class="nav-link">
Buttons
</a>
</li>
<li class="nav-item">
<a href="../docs/cards.html" class="nav-link">
Cards
</a>
</li>
<li class="nav-item">
<a href="../docs/carousel.html" class="nav-link">
Carousel
</a>
</li>
<li class="nav-item">
<a href="../docs/dropdowns.html" class="nav-link">
Dropdowns
</a>
</li>
<li class="nav-item">
<a href="../docs/divider.html" class="nav-link">
Divider
</a>
</li>
<li class="nav-item">
<a href="../docs/empty.html" class="nav-link">
Empty states
</a>
</li>
<li class="nav-item">
<a href="../docs/form-elements.html" class="nav-link">
Form elements
</a>
</li>
<li class="nav-item">
<a href="../docs/form-helpers.html" class="nav-link">
Form helpers
</a>
</li>
<li class="nav-item">
<a href="../docs/modals.html" class="nav-link">
Modals
</a>
</li>
<li class="nav-item">
<a href="../docs/progress.html" class="nav-link">
Progress
</a>
</li>
<li class="nav-item">
<a href="../docs/payments.html" class="nav-link">
Payments
</a>
</li>
<li class="nav-item">
<a href="../docs/range-slider.html" class="nav-link">
Range slider
</a>
</li>
<li class="nav-item">
<a href="../docs/ribbons.html" class="nav-link">
Ribbons
</a>
</li>
<li class="nav-item">
<a href="../docs/skeleton.html" class="nav-link">
Skeleton
</a>
</li>
<li class="nav-item">
<a href="../docs/spinners.html" class="nav-link">
Spinners
</a>
</li>
<li class="nav-item">
<a href="../docs/steps.html" class="nav-link">
Steps
</a>
</li>
<li class="nav-item">
<a href="../docs/switch-icon.html" class="nav-link active">
Switch icon
</a>
</li>
<li class="nav-item">
<a href="../docs/tables.html" class="nav-link">
Tables
</a>
</li>
<li class="nav-item">
<a href="../docs/tabs.html" class="nav-link">
Tabs
</a>
</li>
<li class="nav-item">
<a href="../docs/timelines.html" class="nav-link">
Timelines
</a>
</li>
<li class="nav-item">
<a href="../docs/toasts.html" class="nav-link">
Toasts
</a>
</li>
<li class="nav-item">
<a href="../docs/tooltips.html" class="nav-link">
Tooltips
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#menu-utils" class="nav-link" data-toggle="collapse" aria-expanded="false">
<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"/><path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z" /></svg>
</span>
Utilities
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-utils">
<li class="nav-item">
<a href="../docs/cursors.html" class="nav-link">
Cursors
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#menu-plugins" class="nav-link" data-toggle="collapse" aria-expanded="false">
<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"/><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><rect x="14" y="14" width="6" height="6" rx="1" /><line x1="14" y1="7" x2="20" y2="7" /><line x1="17" y1="4" x2="17" y2="10" /></svg>
</span>
Plugins
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-plugins">
<li class="nav-item">
<a href="../docs/autosize.html" class="nav-link">
Autosize
</a>
</li>
<li class="nav-item">
<a href="../docs/input-mask.html" class="nav-link">
Form input mask
</a>
</li>
<li class="nav-item">
<a href="../docs/flags.html" class="nav-link">
Flags
</a>
</li>
<li class="nav-item">
<a href="../docs/charts.html" class="nav-link">
Charts
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="../changelog.html" class="nav-link">
<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>
</a>
</li>
</ul>
</div>
<div class="col-lg-9">
<div class="card card-lg">
<div class="card-body">
<div class="markdown">
<div class="mb-5">
<div class="d-flex mb-3">
<h1 class="mt-0">Switch icon</h1>
</div>
<p>The Switch Icon component is used to create a transition between two icons. You can use any icon, both line and filled version.</p>
</div>
<h2 id="default-markup">Default markup</h2>
<p>To replace the icons, all should add <code class="language-plaintext highlighter-rouge">active</code> class to the <code class="language-plaintext highlighter-rouge">switch-icon</code> component.</p>
<div class="example no_toc_section">
<div class="example-content">
<div class="d-flex space-x-2">
<button class="switch-icon" data-toggle="switch-icon">
<span class="switch-icon-a text-muted">
<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="9" /></svg>
</span>
<span class="switch-icon-b text-blue">
<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" /><rect x="4" y="4" width="16" height="16" rx="2" /></svg>
</span>
</button>
</div>
</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">class=</span><span class="s">"switch-icon"</span> <span class="na">data-toggle=</span><span class="s">"switch-icon"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"switch-icon-a text-muted"</span><span class="nt">&gt;</span>
<span class="c">&lt;!-- SVG icon code --&gt;</span>
<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"switch-icon-b text-blue"</span><span class="nt">&gt;</span>
<span class="c">&lt;!-- SVG icon code --&gt;</span>
<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/button&gt;</span></code></pre>
</figure>
</div>
<h2 id="switch-animations">Switch animations</h2>
<p>You can also add a fancy animation to add variety to your button. See demo below:</p>
<div class="example no_toc_section">
<div class="example-content">
<div class="d-flex space-x-2">
<button class="switch-icon" data-toggle="switch-icon">
<span class="switch-icon-a text-muted">
<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="9" /></svg>
</span>
<span class="switch-icon-b text-blue">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-filled" 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="9" /></svg>
</span>
</button>
<button class="switch-icon switch-icon-fade" data-toggle="switch-icon">
<span class="switch-icon-a text-muted">
<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>
</span>
<span class="switch-icon-b text-red">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-filled" 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>
</span>
</button>
<button class="switch-icon switch-icon-scale" data-toggle="switch-icon">
<span class="switch-icon-a text-muted">
<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="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
</span>
<span class="switch-icon-b text-yellow">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-filled" 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="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
</span>
</button>
<button class="switch-icon switch-icon-flip" data-toggle="switch-icon">
<span class="switch-icon-a text-muted">
<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="M7 11v8a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1v-7a1 1 0 0 1 1 -1h3a4 4 0 0 0 4 -4v-1a2 2 0 0 1 4 0v5h3a2 2 0 0 1 2 2l-1 5a2 3 0 0 1 -2 2h-7a3 3 0 0 1 -3 -3" /></svg>
</span>
<span class="switch-icon-b text-facebook">
<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="M7 11v8a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1v-7a1 1 0 0 1 1 -1h3a4 4 0 0 0 4 -4v-1a2 2 0 0 1 4 0v5h3a2 2 0 0 1 2 2l-1 5a2 3 0 0 1 -2 2h-7a3 3 0 0 1 -3 -3" /></svg>
</span>
</button>
<button class="switch-icon switch-icon-slide-up" data-toggle="switch-icon">
<span class="switch-icon-a text-muted">
<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="M22 4.01c-1 .49 -1.98 .689 -3 .99c-1.121 -1.265 -2.783 -1.335 -4.38 -.737s-2.643 2.06 -2.62 3.737v1c-3.245 .083 -6.135 -1.395 -8 -4c0 0 -4.182 7.433 4 11c-1.872 1.247 -3.739 2.088 -6 2c3.308 1.803 6.913 2.423 10.034 1.517c3.58 -1.04 6.522 -3.723 7.651 -7.742a13.84 13.84 0 0 0 .497 -3.753c-.002 -.249 1.51 -2.772 1.818 -4.013z" /></svg>
</span>
<span class="switch-icon-b text-twitter">
<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="M22 4.01c-1 .49 -1.98 .689 -3 .99c-1.121 -1.265 -2.783 -1.335 -4.38 -.737s-2.643 2.06 -2.62 3.737v1c-3.245 .083 -6.135 -1.395 -8 -4c0 0 -4.182 7.433 4 11c-1.872 1.247 -3.739 2.088 -6 2c3.308 1.803 6.913 2.423 10.034 1.517c3.58 -1.04 6.522 -3.723 7.651 -7.742a13.84 13.84 0 0 0 .497 -3.753c-.002 -.249 1.51 -2.772 1.818 -4.013z" /></svg>
</span>
</button>
<button class="switch-icon switch-icon-slide-left" data-toggle="switch-icon">
<span class="switch-icon-a text-muted">
<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 12l5 5l10 -10" /></svg>
</span>
<span class="switch-icon-b text-red">
<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" /><line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" /></svg>
</span>
</button>
<button class="switch-icon switch-icon-slide-down" data-toggle="switch-icon">
<span class="switch-icon-a text-muted">
<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" /><line x1="12" y1="5" x2="12" y2="19" /><line x1="18" y1="13" x2="12" y2="19" /><line x1="6" y1="13" x2="12" y2="19" /></svg>
</span>
<span class="switch-icon-b text-muted">
<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" /><line x1="12" y1="5" x2="12" y2="19" /><line x1="18" y1="11" x2="12" y2="5" /><line x1="6" y1="11" x2="12" y2="5" /></svg>
</span>
</button>
<button class="switch-icon switch-icon-slide-right" data-toggle="switch-icon">
<span class="switch-icon-a text-muted">
<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="17" r="2" /><circle cx="17" cy="17" r="2" /><path d="M5 17h-2v-6l2-5h9l4 5h1a2 2 0 0 1 2 2v4h-2m-4 0h-6m-6 -6h15m-6 0v-5" /></svg>
</span>
<span class="switch-icon-b text-muted">
<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="18" cy="17" r="2" /><circle cx="6" cy="17" r="2" /><path d="M8 17h5a6 6 0 0 1 5 -5v-5a2 2 0 0 0 -2 -2h-1" /></svg>
</span>
</button>
</div>
</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">class=</span><span class="s">"switch-icon"</span> <span class="na">data-toggle=</span><span class="s">"switch-icon"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"switch-icon-a text-muted"</span><span class="nt">&gt;</span>
<span class="c">&lt;!-- SVG icon code --&gt;</span>
<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"switch-icon-b text-blue"</span><span class="nt">&gt;</span>
<span class="c">&lt;!-- SVG icon code with class="icon-filled" --&gt;</span>
<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"switch-icon switch-icon-fade"</span> <span class="na">data-toggle=</span><span class="s">"switch-icon"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"switch-icon-a text-muted"</span><span class="nt">&gt;</span>
<span class="c">&lt;!-- SVG icon code --&gt;</span>
<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"switch-icon-b text-red"</span><span class="nt">&gt;</span>
<span class="c">&lt;!-- SVG icon code with class="icon-filled" --&gt;</span>
<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"switch-icon switch-icon-scale"</span> <span class="na">data-toggle=</span><span class="s">"switch-icon"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"switch-icon-a text-muted"</span><span class="nt">&gt;</span>
<span class="c">&lt;!-- SVG icon code --&gt;</span>
<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"switch-icon-b text-yellow"</span><span class="nt">&gt;</span>
<span class="c">&lt;!-- SVG icon code with class="icon-filled" --&gt;</span>
<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"switch-icon switch-icon-flip"</span> <span class="na">data-toggle=</span><span class="s">"switch-icon"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"switch-icon-a text-muted"</span><span class="nt">&gt;</span>
<span class="c">&lt;!-- SVG icon code --&gt;</span>
<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"switch-icon-b text-facebook"</span><span class="nt">&gt;</span>
<span class="c">&lt;!-- SVG icon code --&gt;</span>
<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"switch-icon switch-icon-slide-up"</span> <span class="na">data-toggle=</span><span class="s">"switch-icon"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"switch-icon-a text-muted"</span><span class="nt">&gt;</span>
<span class="c">&lt;!-- SVG icon code --&gt;</span>
<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"switch-icon-b text-twitter"</span><span class="nt">&gt;</span>
<span class="c">&lt;!-- SVG icon code --&gt;</span>
<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"switch-icon switch-icon-slide-left"</span> <span class="na">data-toggle=</span><span class="s">"switch-icon"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"switch-icon-a text-muted"</span><span class="nt">&gt;</span>
<span class="c">&lt;!-- SVG icon code --&gt;</span>
<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"switch-icon-b text-red"</span><span class="nt">&gt;</span>
<span class="c">&lt;!-- SVG icon code --&gt;</span>
<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"switch-icon switch-icon-slide-down"</span> <span class="na">data-toggle=</span><span class="s">"switch-icon"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"switch-icon-a text-muted"</span><span class="nt">&gt;</span>
<span class="c">&lt;!-- SVG icon code --&gt;</span>
<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"switch-icon-b text-muted"</span><span class="nt">&gt;</span>
<span class="c">&lt;!-- SVG icon code --&gt;</span>
<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"switch-icon switch-icon-slide-right"</span> <span class="na">data-toggle=</span><span class="s">"switch-icon"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"switch-icon-a text-muted"</span><span class="nt">&gt;</span>
<span class="c">&lt;!-- SVG icon code --&gt;</span>
<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"switch-icon-b text-muted"</span><span class="nt">&gt;</span>
<span class="c">&lt;!-- SVG icon code --&gt;</span>
<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/button&gt;</span></code></pre>
</figure>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="footer footer-transparent">
<div class="container">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ml-lg-auto">
<ul class="list-inline list-inline-dots mb-0">
<li class="list-inline-item"><a href="../docs/index.html" class="link-secondary">Documentation</a></li>
<li class="list-inline-item"><a href="../faq.html" class="link-secondary">FAQ</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary">Source code</a></li>
</ul>
</div>
<div class="col-12 col-lg-auto mt-3 mt-lg-0">
<ul class="list-inline list-inline-dots mb-0">
<li class="list-inline-item">
Copyright © 2020
<a href=".." class="link-secondary">Tabler</a>.
All rights reserved.
</li>
<li class="list-inline-item">
<a href="../changelog.html" class="link-secondary">v1.0.0-alpha.11</a>
</li>
</ul>
</div>
</div>
</div>
</footer>
</div>
</div>
<!-- Libs JS -->
<script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<!-- Tabler Core -->
<script src="../dist/js/tabler.min.js"></script>
<script>
document.body.style.display = "block"
</script>
</body>
</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-alpha.10
* @version 1.0.0-alpha.11
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -362,181 +362,14 @@
</li>
</ul>
</li>
<li class="nav-item active dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
<li class="nav-item active">
<a class="nav-link" href="../docs/index.html" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><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="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
</span>
<span class="nav-link-title">
Docs
Documentation
</span>
</a>
<ul class="dropdown-menu dropdown-menu-columns dropdown-menu-columns-3">
<li >
<a class="dropdown-item" href="../docs/index.html" >
Introduction
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/alerts.html" >
Alerts
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/autosize.html" >
Autosize
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/avatars.html" >
Avatars
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/badges.html" >
Badges
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/breadcrumb.html" >
Breadcrumb
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/buttons.html" >
Buttons
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/cards.html" >
Cards
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/carousel.html" >
Carousel
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/colors.html" >
Colors
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/cursors.html" >
Cursors
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/charts.html" >
Charts
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/dropdowns.html" >
Dropdowns
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/divider.html" >
Divider
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/empty.html" >
Empty states
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/flags.html" >
Flags
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/form-elements.html" >
Form elements
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/form-helpers.html" >
Form helpers
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/input-mask.html" >
Form input mask
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/modals.html" >
Modals
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/progress.html" >
Progress
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/payments.html" >
Payments
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/range-slider.html" >
Range slider
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/ribbons.html" >
Ribbons
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/skeleton.html" >
Skeleton
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/spinners.html" >
Spinners
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/steps.html" >
Steps
</a>
</li>
<li >
<a class="dropdown-item active" href="../docs/tables.html" >
Tables
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/tabs.html" >
Tabs
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/timelines.html" >
Timelines
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/toasts.html" >
Toasts
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/tooltips.html" >
Tooltips
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/typography.html" >
Typography
</a>
</li>
</ul>
</li>
</ul>
<div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
@@ -565,35 +398,250 @@
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="d-none d-lg-block col-lg-3 order-lg-1 mb-4">
<div class="sticky-top lh-lg py-4">
<a href="https://github.com/tabler/tabler" class="btn btn-white mb-6 btn-block" target="_blank" rel="noreferrer">
<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>
Browse source code
</a>
<h5 class="subheader">On this page</h5>
<ul class="list-unstyled">
<li class="toc-entry toc-h2"><a href="#basic-table">Basic Table</a></li>
<li class="toc-entry toc-h2"><a href="#responsive-tables">Responsive tables</a></li>
<li class="toc-entry toc-h2"><a href="#no-wrap">No wrap</a></li>
</ul>
</div>
<div class="row g-5">
<div class="d-none d-lg-block col-lg-3">
<ul class="nav nav-pills nav-vertical">
<li class="nav-item">
<a href="#menu-base" class="nav-link" data-toggle="collapse" aria-expanded="false">
<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"/><path d="M8 9l3 3l-3 3" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
</span>
Getting started
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-base">
<li class="nav-item">
<a href="../docs/index.html" class="nav-link">
Introduction
</a>
</li>
<li class="nav-item">
<a href="../docs/colors.html" class="nav-link">
Colors
</a>
</li>
<li class="nav-item">
<a href="../docs/typography.html" class="nav-link">
Typography
</a>
</li>
<li class="nav-item">
<a href="../docs/icons.html" class="nav-link">
Icons
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#menu-components" class="nav-link" data-toggle="collapse" aria-expanded="true">
<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"/><path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>
</span>
Components
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse show" id="menu-components">
<li class="nav-item">
<a href="../docs/alerts.html" class="nav-link">
Alerts
</a>
</li>
<li class="nav-item">
<a href="../docs/avatars.html" class="nav-link">
Avatars
</a>
</li>
<li class="nav-item">
<a href="../docs/badges.html" class="nav-link">
Badges
</a>
</li>
<li class="nav-item">
<a href="../docs/breadcrumb.html" class="nav-link">
Breadcrumb
</a>
</li>
<li class="nav-item">
<a href="../docs/buttons.html" class="nav-link">
Buttons
</a>
</li>
<li class="nav-item">
<a href="../docs/cards.html" class="nav-link">
Cards
</a>
</li>
<li class="nav-item">
<a href="../docs/carousel.html" class="nav-link">
Carousel
</a>
</li>
<li class="nav-item">
<a href="../docs/dropdowns.html" class="nav-link">
Dropdowns
</a>
</li>
<li class="nav-item">
<a href="../docs/divider.html" class="nav-link">
Divider
</a>
</li>
<li class="nav-item">
<a href="../docs/empty.html" class="nav-link">
Empty states
</a>
</li>
<li class="nav-item">
<a href="../docs/form-elements.html" class="nav-link">
Form elements
</a>
</li>
<li class="nav-item">
<a href="../docs/form-helpers.html" class="nav-link">
Form helpers
</a>
</li>
<li class="nav-item">
<a href="../docs/modals.html" class="nav-link">
Modals
</a>
</li>
<li class="nav-item">
<a href="../docs/progress.html" class="nav-link">
Progress
</a>
</li>
<li class="nav-item">
<a href="../docs/payments.html" class="nav-link">
Payments
</a>
</li>
<li class="nav-item">
<a href="../docs/range-slider.html" class="nav-link">
Range slider
</a>
</li>
<li class="nav-item">
<a href="../docs/ribbons.html" class="nav-link">
Ribbons
</a>
</li>
<li class="nav-item">
<a href="../docs/skeleton.html" class="nav-link">
Skeleton
</a>
</li>
<li class="nav-item">
<a href="../docs/spinners.html" class="nav-link">
Spinners
</a>
</li>
<li class="nav-item">
<a href="../docs/steps.html" class="nav-link">
Steps
</a>
</li>
<li class="nav-item">
<a href="../docs/switch-icon.html" class="nav-link">
Switch icon
</a>
</li>
<li class="nav-item">
<a href="../docs/tables.html" class="nav-link active">
Tables
</a>
</li>
<li class="nav-item">
<a href="../docs/tabs.html" class="nav-link">
Tabs
</a>
</li>
<li class="nav-item">
<a href="../docs/timelines.html" class="nav-link">
Timelines
</a>
</li>
<li class="nav-item">
<a href="../docs/toasts.html" class="nav-link">
Toasts
</a>
</li>
<li class="nav-item">
<a href="../docs/tooltips.html" class="nav-link">
Tooltips
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#menu-utils" class="nav-link" data-toggle="collapse" aria-expanded="false">
<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"/><path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z" /></svg>
</span>
Utilities
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-utils">
<li class="nav-item">
<a href="../docs/cursors.html" class="nav-link">
Cursors
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#menu-plugins" class="nav-link" data-toggle="collapse" aria-expanded="false">
<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"/><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><rect x="14" y="14" width="6" height="6" rx="1" /><line x1="14" y1="7" x2="20" y2="7" /><line x1="17" y1="4" x2="17" y2="10" /></svg>
</span>
Plugins
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-plugins">
<li class="nav-item">
<a href="../docs/autosize.html" class="nav-link">
Autosize
</a>
</li>
<li class="nav-item">
<a href="../docs/input-mask.html" class="nav-link">
Form input mask
</a>
</li>
<li class="nav-item">
<a href="../docs/flags.html" class="nav-link">
Flags
</a>
</li>
<li class="nav-item">
<a href="../docs/charts.html" class="nav-link">
Charts
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="../changelog.html" class="nav-link">
<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>
</a>
</li>
</ul>
</div>
<div class="col-lg-9">
<div class="card card-lg">
<div class="card-body">
<div class="markdown">
<div class="d-flex">
<h1 class="h2 mt-0 mb-3">Tables</h1>
<p class="ml-auto">
<a href="https://getbootstrap.com/docs/4.4/content/tables/" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" class="icon pr-1 text-blue" 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="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" /><line x1="10" y1="14" x2="20" y2="4" /><polyline points="15 4 20 4 20 9" /></svg>
Bootstrap documentation
</a>
</p>
<div class="mb-5">
<div class="d-flex mb-3">
<h1 class="mt-0">Tables</h1>
<p class="ml-auto">
<a href="https://getbootstrap.com/docs/4.4/content/tables/" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" class="icon pr-1 text-blue" 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="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" /><line x1="10" y1="14" x2="20" y2="4" /><polyline points="15 4 20 4 20 9" /></svg>
Bootstrap documentation
</a>
</p>
</div>
<p>Tables are a useful interface element that allows to visualise data and arrange it in a clear way. Thanks to that, users can browse a lot of information at once and a good table design will help you take care of its clarity.</p>
</div>
<p>Tables are a useful interface element that allows to visualise data and arrange it in a clear way. Thanks to that, users can browse a lot of information at once and a good table design will help you take care of its clarity.</p>
<h2 id="basic-table">Basic Table</h2>
<p>The basic table design has light padding and the presented data is separated wih horizontal dividers. It helps provide users with all the necessary information, without overwheling them with visuals.</p>
<p>The <code class="language-plaintext highlighter-rouge">.table</code> class adds basic styling to a table:</p>
@@ -616,12 +664,12 @@
<td class="text-muted">
UI Designer, Training
</td>
<td class="text-muted"><a href="#" class="text-reset">paweluna@howstuffworks.com</a></td>
<td class="text-muted"><a href="javascript:void()" class="text-reset">paweluna@howstuffworks.com</a></td>
<td class="text-muted">
User
</td>
<td>
<a href="#">Edit</a>
<a href="javascript:void()">Edit</a>
</td>
</tr>
<tr>
@@ -629,12 +677,12 @@
<td class="text-muted">
Chemical Engineer, Support
</td>
<td class="text-muted"><a href="#" class="text-reset">jlewzey1@seesaa.net</a></td>
<td class="text-muted"><a href="javascript:void()" class="text-reset">jlewzey1@seesaa.net</a></td>
<td class="text-muted">
Admin
</td>
<td>
<a href="#">Edit</a>
<a href="javascript:void()">Edit</a>
</td>
</tr>
<tr>
@@ -642,12 +690,12 @@
<td class="text-muted">
Geologist IV, Support
</td>
<td class="text-muted"><a href="#" class="text-reset">mhulme2@domainmarket.com</a></td>
<td class="text-muted"><a href="javascript:void()" class="text-reset">mhulme2@domainmarket.com</a></td>
<td class="text-muted">
User
</td>
<td>
<a href="#">Edit</a>
<a href="javascript:void()">Edit</a>
</td>
</tr>
<tr>
@@ -655,12 +703,12 @@
<td class="text-muted">
Research Nurse, Sales
</td>
<td class="text-muted"><a href="#" class="text-reset">dslane3@epa.gov</a></td>
<td class="text-muted"><a href="javascript:void()" class="text-reset">dslane3@epa.gov</a></td>
<td class="text-muted">
Owner
</td>
<td>
<a href="#">Edit</a>
<a href="javascript:void()">Edit</a>
</td>
</tr>
<tr>
@@ -668,12 +716,12 @@
<td class="text-muted">
VP Product Management, Accounting
</td>
<td class="text-muted"><a href="#" class="text-reset">elevet4@senate.gov</a></td>
<td class="text-muted"><a href="javascript:void()" class="text-reset">elevet4@senate.gov</a></td>
<td class="text-muted">
Admin
</td>
<td>
<a href="#">Edit</a>
<a href="javascript:void()">Edit</a>
</td>
</tr>
</tbody>
@@ -888,7 +936,7 @@
<td class="text-muted">
UI Designer, Training
</td>
<td class="text-muted"><a href="#" class="text-reset">paweluna@howstuffworks.com</a></td>
<td class="text-muted"><a href="javascript:void()" class="text-reset">paweluna@howstuffworks.com</a></td>
<td class="text-muted">
User
</td>
@@ -897,7 +945,7 @@
quaerat quo repellendus, voluptates.
</td>
<td>
<a href="#">Edit</a>
<a href="javascript:void()">Edit</a>
</td>
</tr>
<tr>
@@ -905,7 +953,7 @@
<td class="text-muted">
Chemical Engineer, Support
</td>
<td class="text-muted"><a href="#" class="text-reset">jlewzey1@seesaa.net</a></td>
<td class="text-muted"><a href="javascript:void()" class="text-reset">jlewzey1@seesaa.net</a></td>
<td class="text-muted">
Admin
</td>
@@ -914,7 +962,7 @@
quaerat quo repellendus, voluptates.
</td>
<td>
<a href="#">Edit</a>
<a href="javascript:void()">Edit</a>
</td>
</tr>
<tr>
@@ -922,7 +970,7 @@
<td class="text-muted">
Geologist IV, Support
</td>
<td class="text-muted"><a href="#" class="text-reset">mhulme2@domainmarket.com</a></td>
<td class="text-muted"><a href="javascript:void()" class="text-reset">mhulme2@domainmarket.com</a></td>
<td class="text-muted">
User
</td>
@@ -931,7 +979,7 @@
quaerat quo repellendus, voluptates.
</td>
<td>
<a href="#">Edit</a>
<a href="javascript:void()">Edit</a>
</td>
</tr>
<tr>
@@ -939,7 +987,7 @@
<td class="text-muted">
Research Nurse, Sales
</td>
<td class="text-muted"><a href="#" class="text-reset">dslane3@epa.gov</a></td>
<td class="text-muted"><a href="javascript:void()" class="text-reset">dslane3@epa.gov</a></td>
<td class="text-muted">
Owner
</td>
@@ -948,7 +996,7 @@
quaerat quo repellendus, voluptates.
</td>
<td>
<a href="#">Edit</a>
<a href="javascript:void()">Edit</a>
</td>
</tr>
<tr>
@@ -956,7 +1004,7 @@
<td class="text-muted">
VP Product Management, Accounting
</td>
<td class="text-muted"><a href="#" class="text-reset">elevet4@senate.gov</a></td>
<td class="text-muted"><a href="javascript:void()" class="text-reset">elevet4@senate.gov</a></td>
<td class="text-muted">
Admin
</td>
@@ -965,7 +1013,7 @@
quaerat quo repellendus, voluptates.
</td>
<td>
<a href="#">Edit</a>
<a href="javascript:void()">Edit</a>
</td>
</tr>
</tbody>
@@ -1103,7 +1151,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="https://github.com/tabler/tabler/releases" target="_blank" class="link-secondary">v1.0.0-alpha.10</a>
<a href="../changelog.html" class="link-secondary">v1.0.0-alpha.11</a>
</li>
</ul>
</div>

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.10
* @version 1.0.0-alpha.11
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -362,181 +362,14 @@
</li>
</ul>
</li>
<li class="nav-item active dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
<li class="nav-item active">
<a class="nav-link" href="../docs/index.html" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><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="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
</span>
<span class="nav-link-title">
Docs
Documentation
</span>
</a>
<ul class="dropdown-menu dropdown-menu-columns dropdown-menu-columns-3">
<li >
<a class="dropdown-item" href="../docs/index.html" >
Introduction
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/alerts.html" >
Alerts
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/autosize.html" >
Autosize
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/avatars.html" >
Avatars
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/badges.html" >
Badges
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/breadcrumb.html" >
Breadcrumb
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/buttons.html" >
Buttons
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/cards.html" >
Cards
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/carousel.html" >
Carousel
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/colors.html" >
Colors
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/cursors.html" >
Cursors
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/charts.html" >
Charts
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/dropdowns.html" >
Dropdowns
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/divider.html" >
Divider
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/empty.html" >
Empty states
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/flags.html" >
Flags
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/form-elements.html" >
Form elements
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/form-helpers.html" >
Form helpers
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/input-mask.html" >
Form input mask
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/modals.html" >
Modals
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/progress.html" >
Progress
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/payments.html" >
Payments
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/range-slider.html" >
Range slider
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/ribbons.html" >
Ribbons
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/skeleton.html" >
Skeleton
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/spinners.html" >
Spinners
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/steps.html" >
Steps
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/tables.html" >
Tables
</a>
</li>
<li >
<a class="dropdown-item active" href="../docs/tabs.html" >
Tabs
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/timelines.html" >
Timelines
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/toasts.html" >
Toasts
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/tooltips.html" >
Tooltips
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/typography.html" >
Typography
</a>
</li>
</ul>
</li>
</ul>
<div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
@@ -565,38 +398,250 @@
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="d-none d-lg-block col-lg-3 order-lg-1 mb-4">
<div class="sticky-top lh-lg py-4">
<a href="https://github.com/tabler/tabler" class="btn btn-white mb-6 btn-block" target="_blank" rel="noreferrer">
<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>
Browse source code
</a>
<h5 class="subheader">On this page</h5>
<ul class="list-unstyled">
<li class="toc-entry toc-h2"><a href="#default-markup">Default markup</a></li>
<li class="toc-entry toc-h2"><a href="#tabs-with-icons">Tabs with icons</a></li>
<li class="toc-entry toc-h2"><a href="#tabs-only-with-icons">Tabs only with icons</a></li>
<li class="toc-entry toc-h2"><a href="#tabs-with-dropdown">Tabs with dropdown</a></li>
<li class="toc-entry toc-h2"><a href="#full-width-tabs">Full-width tabs</a></li>
<li class="toc-entry toc-h2"><a href="#alternate-style">Alternate style</a></li>
</ul>
</div>
<div class="row g-5">
<div class="d-none d-lg-block col-lg-3">
<ul class="nav nav-pills nav-vertical">
<li class="nav-item">
<a href="#menu-base" class="nav-link" data-toggle="collapse" aria-expanded="false">
<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"/><path d="M8 9l3 3l-3 3" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
</span>
Getting started
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-base">
<li class="nav-item">
<a href="../docs/index.html" class="nav-link">
Introduction
</a>
</li>
<li class="nav-item">
<a href="../docs/colors.html" class="nav-link">
Colors
</a>
</li>
<li class="nav-item">
<a href="../docs/typography.html" class="nav-link">
Typography
</a>
</li>
<li class="nav-item">
<a href="../docs/icons.html" class="nav-link">
Icons
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#menu-components" class="nav-link" data-toggle="collapse" aria-expanded="true">
<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"/><path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>
</span>
Components
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse show" id="menu-components">
<li class="nav-item">
<a href="../docs/alerts.html" class="nav-link">
Alerts
</a>
</li>
<li class="nav-item">
<a href="../docs/avatars.html" class="nav-link">
Avatars
</a>
</li>
<li class="nav-item">
<a href="../docs/badges.html" class="nav-link">
Badges
</a>
</li>
<li class="nav-item">
<a href="../docs/breadcrumb.html" class="nav-link">
Breadcrumb
</a>
</li>
<li class="nav-item">
<a href="../docs/buttons.html" class="nav-link">
Buttons
</a>
</li>
<li class="nav-item">
<a href="../docs/cards.html" class="nav-link">
Cards
</a>
</li>
<li class="nav-item">
<a href="../docs/carousel.html" class="nav-link">
Carousel
</a>
</li>
<li class="nav-item">
<a href="../docs/dropdowns.html" class="nav-link">
Dropdowns
</a>
</li>
<li class="nav-item">
<a href="../docs/divider.html" class="nav-link">
Divider
</a>
</li>
<li class="nav-item">
<a href="../docs/empty.html" class="nav-link">
Empty states
</a>
</li>
<li class="nav-item">
<a href="../docs/form-elements.html" class="nav-link">
Form elements
</a>
</li>
<li class="nav-item">
<a href="../docs/form-helpers.html" class="nav-link">
Form helpers
</a>
</li>
<li class="nav-item">
<a href="../docs/modals.html" class="nav-link">
Modals
</a>
</li>
<li class="nav-item">
<a href="../docs/progress.html" class="nav-link">
Progress
</a>
</li>
<li class="nav-item">
<a href="../docs/payments.html" class="nav-link">
Payments
</a>
</li>
<li class="nav-item">
<a href="../docs/range-slider.html" class="nav-link">
Range slider
</a>
</li>
<li class="nav-item">
<a href="../docs/ribbons.html" class="nav-link">
Ribbons
</a>
</li>
<li class="nav-item">
<a href="../docs/skeleton.html" class="nav-link">
Skeleton
</a>
</li>
<li class="nav-item">
<a href="../docs/spinners.html" class="nav-link">
Spinners
</a>
</li>
<li class="nav-item">
<a href="../docs/steps.html" class="nav-link">
Steps
</a>
</li>
<li class="nav-item">
<a href="../docs/switch-icon.html" class="nav-link">
Switch icon
</a>
</li>
<li class="nav-item">
<a href="../docs/tables.html" class="nav-link">
Tables
</a>
</li>
<li class="nav-item">
<a href="../docs/tabs.html" class="nav-link active">
Tabs
</a>
</li>
<li class="nav-item">
<a href="../docs/timelines.html" class="nav-link">
Timelines
</a>
</li>
<li class="nav-item">
<a href="../docs/toasts.html" class="nav-link">
Toasts
</a>
</li>
<li class="nav-item">
<a href="../docs/tooltips.html" class="nav-link">
Tooltips
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#menu-utils" class="nav-link" data-toggle="collapse" aria-expanded="false">
<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"/><path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z" /></svg>
</span>
Utilities
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-utils">
<li class="nav-item">
<a href="../docs/cursors.html" class="nav-link">
Cursors
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#menu-plugins" class="nav-link" data-toggle="collapse" aria-expanded="false">
<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"/><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><rect x="14" y="14" width="6" height="6" rx="1" /><line x1="14" y1="7" x2="20" y2="7" /><line x1="17" y1="4" x2="17" y2="10" /></svg>
</span>
Plugins
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-plugins">
<li class="nav-item">
<a href="../docs/autosize.html" class="nav-link">
Autosize
</a>
</li>
<li class="nav-item">
<a href="../docs/input-mask.html" class="nav-link">
Form input mask
</a>
</li>
<li class="nav-item">
<a href="../docs/flags.html" class="nav-link">
Flags
</a>
</li>
<li class="nav-item">
<a href="../docs/charts.html" class="nav-link">
Charts
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="../changelog.html" class="nav-link">
<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>
</a>
</li>
</ul>
</div>
<div class="col-lg-9">
<div class="card card-lg">
<div class="card-body">
<div class="markdown">
<div class="d-flex">
<h1 class="h2 mt-0 mb-3">Tabs</h1>
<p class="ml-auto">
<a href="https://getbootstrap.com/docs/4.4/components/navs/" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" class="icon pr-1 text-blue" 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="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" /><line x1="10" y1="14" x2="20" y2="4" /><polyline points="15 4 20 4 20 9" /></svg>
Bootstrap documentation
</a>
</p>
<div class="mb-5">
<div class="d-flex mb-3">
<h1 class="mt-0">Tabs</h1>
<p class="ml-auto">
<a href="https://getbootstrap.com/docs/4.4/components/navs/" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" class="icon pr-1 text-blue" 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="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" /><line x1="10" y1="14" x2="20" y2="4" /><polyline points="15 4 20 4 20 9" /></svg>
Bootstrap documentation
</a>
</p>
</div>
<p>Tabs allow users to alternate between equally important views within the same context. By dividing content into meaningful sections, they improve its organization and make it easy for users to navigate.</p>
</div>
<p>Tabs allow users to alternate between equally important views within the same context. By dividing content into meaningful sections, they improve its organization and make it easy for users to navigate.</p>
<h2 id="default-markup">Default markup</h2>
<p>Use tabs to let users access different sections within one context quickly and with ease. In the default design, the current tab is highlighted, which makes the interface clear and user-friendly.</p>
<div class="example no_toc_section example-bg">
@@ -691,11 +736,11 @@
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">&gt;</span>
<span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"nav nav-tabs"</span> <span class="na">data-toggle=</span><span class="s">"tabs"</span><span class="nt">&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#tabs-home-ex2"</span> <span class="na">class=</span><span class="s">"nav-link active"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span><span class="nt">&gt;</span><span class="c">&lt;!-- SVG icon code --&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#tabs-home-ex2"</span> <span class="na">class=</span><span class="s">"nav-link active"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span><span class="nt">&gt;</span><span class="c">&lt;!-- SVG icon code with class="mr-2" --&gt;</span>
Home<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#tabs-profile-ex2"</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span><span class="nt">&gt;</span><span class="c">&lt;!-- SVG icon code --&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#tabs-profile-ex2"</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span><span class="nt">&gt;</span><span class="c">&lt;!-- SVG icon code with class="mr-2" --&gt;</span>
Profile<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item ml-auto"</span><span class="nt">&gt;</span>
@@ -803,12 +848,12 @@
<a href="#tabs-profile-ex4" class="nav-link" data-toggle="tab">Profile</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="javascript:void()" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">
<a class="dropdown-item" href="javascript:void()">
Action
</a>
<a class="dropdown-item" href="#">
<a class="dropdown-item" href="javascript:void()">
Another action
</a>
</div>
@@ -975,11 +1020,11 @@
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">&gt;</span>
<span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"nav nav-tabs nav-tabs-alt"</span> <span class="na">data-toggle=</span><span class="s">"tabs"</span><span class="nt">&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#tabs-home-ex6"</span> <span class="na">class=</span><span class="s">"nav-link active"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span><span class="nt">&gt;</span><span class="c">&lt;!-- SVG icon code --&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#tabs-home-ex6"</span> <span class="na">class=</span><span class="s">"nav-link active"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span><span class="nt">&gt;</span><span class="c">&lt;!-- SVG icon code with class="mr-2" --&gt;</span>
Home<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#tabs-profile-ex6"</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span><span class="nt">&gt;</span><span class="c">&lt;!-- SVG icon code --&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#tabs-profile-ex6"</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span><span class="nt">&gt;</span><span class="c">&lt;!-- SVG icon code with class="mr-2" --&gt;</span>
Profile<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item ml-auto"</span><span class="nt">&gt;</span>
@@ -1027,7 +1072,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="https://github.com/tabler/tabler/releases" target="_blank" class="link-secondary">v1.0.0-alpha.10</a>
<a href="../changelog.html" class="link-secondary">v1.0.0-alpha.11</a>
</li>
</ul>
</div>

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.10
* @version 1.0.0-alpha.11
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -362,181 +362,14 @@
</li>
</ul>
</li>
<li class="nav-item active dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
<li class="nav-item active">
<a class="nav-link" href="../docs/index.html" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><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="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
</span>
<span class="nav-link-title">
Docs
Documentation
</span>
</a>
<ul class="dropdown-menu dropdown-menu-columns dropdown-menu-columns-3">
<li >
<a class="dropdown-item" href="../docs/index.html" >
Introduction
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/alerts.html" >
Alerts
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/autosize.html" >
Autosize
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/avatars.html" >
Avatars
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/badges.html" >
Badges
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/breadcrumb.html" >
Breadcrumb
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/buttons.html" >
Buttons
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/cards.html" >
Cards
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/carousel.html" >
Carousel
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/colors.html" >
Colors
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/cursors.html" >
Cursors
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/charts.html" >
Charts
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/dropdowns.html" >
Dropdowns
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/divider.html" >
Divider
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/empty.html" >
Empty states
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/flags.html" >
Flags
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/form-elements.html" >
Form elements
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/form-helpers.html" >
Form helpers
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/input-mask.html" >
Form input mask
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/modals.html" >
Modals
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/progress.html" >
Progress
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/payments.html" >
Payments
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/range-slider.html" >
Range slider
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/ribbons.html" >
Ribbons
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/skeleton.html" >
Skeleton
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/spinners.html" >
Spinners
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/steps.html" >
Steps
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/tables.html" >
Tables
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/tabs.html" >
Tabs
</a>
</li>
<li >
<a class="dropdown-item active" href="../docs/timelines.html" >
Timelines
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/toasts.html" >
Toasts
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/tooltips.html" >
Tooltips
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/typography.html" >
Typography
</a>
</li>
</ul>
</li>
</ul>
<div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
@@ -565,28 +398,244 @@
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="d-none d-lg-block col-lg-3 order-lg-1 mb-4">
<div class="sticky-top lh-lg py-4">
<a href="https://github.com/tabler/tabler" class="btn btn-white mb-6 btn-block" target="_blank" rel="noreferrer">
<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>
Browse source code
</a>
<h5 class="subheader">On this page</h5>
<ul class="list-unstyled">
<li class="toc-entry toc-h2"><a href="#timeline">Timeline</a></li>
<li class="toc-entry toc-h2"><a href="#simple-timeline">Simple timeline</a></li>
</ul>
</div>
<div class="row g-5">
<div class="d-none d-lg-block col-lg-3">
<ul class="nav nav-pills nav-vertical">
<li class="nav-item">
<a href="#menu-base" class="nav-link" data-toggle="collapse" aria-expanded="false">
<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"/><path d="M8 9l3 3l-3 3" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
</span>
Getting started
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-base">
<li class="nav-item">
<a href="../docs/index.html" class="nav-link">
Introduction
</a>
</li>
<li class="nav-item">
<a href="../docs/colors.html" class="nav-link">
Colors
</a>
</li>
<li class="nav-item">
<a href="../docs/typography.html" class="nav-link">
Typography
</a>
</li>
<li class="nav-item">
<a href="../docs/icons.html" class="nav-link">
Icons
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#menu-components" class="nav-link" data-toggle="collapse" aria-expanded="true">
<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"/><path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>
</span>
Components
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse show" id="menu-components">
<li class="nav-item">
<a href="../docs/alerts.html" class="nav-link">
Alerts
</a>
</li>
<li class="nav-item">
<a href="../docs/avatars.html" class="nav-link">
Avatars
</a>
</li>
<li class="nav-item">
<a href="../docs/badges.html" class="nav-link">
Badges
</a>
</li>
<li class="nav-item">
<a href="../docs/breadcrumb.html" class="nav-link">
Breadcrumb
</a>
</li>
<li class="nav-item">
<a href="../docs/buttons.html" class="nav-link">
Buttons
</a>
</li>
<li class="nav-item">
<a href="../docs/cards.html" class="nav-link">
Cards
</a>
</li>
<li class="nav-item">
<a href="../docs/carousel.html" class="nav-link">
Carousel
</a>
</li>
<li class="nav-item">
<a href="../docs/dropdowns.html" class="nav-link">
Dropdowns
</a>
</li>
<li class="nav-item">
<a href="../docs/divider.html" class="nav-link">
Divider
</a>
</li>
<li class="nav-item">
<a href="../docs/empty.html" class="nav-link">
Empty states
</a>
</li>
<li class="nav-item">
<a href="../docs/form-elements.html" class="nav-link">
Form elements
</a>
</li>
<li class="nav-item">
<a href="../docs/form-helpers.html" class="nav-link">
Form helpers
</a>
</li>
<li class="nav-item">
<a href="../docs/modals.html" class="nav-link">
Modals
</a>
</li>
<li class="nav-item">
<a href="../docs/progress.html" class="nav-link">
Progress
</a>
</li>
<li class="nav-item">
<a href="../docs/payments.html" class="nav-link">
Payments
</a>
</li>
<li class="nav-item">
<a href="../docs/range-slider.html" class="nav-link">
Range slider
</a>
</li>
<li class="nav-item">
<a href="../docs/ribbons.html" class="nav-link">
Ribbons
</a>
</li>
<li class="nav-item">
<a href="../docs/skeleton.html" class="nav-link">
Skeleton
</a>
</li>
<li class="nav-item">
<a href="../docs/spinners.html" class="nav-link">
Spinners
</a>
</li>
<li class="nav-item">
<a href="../docs/steps.html" class="nav-link">
Steps
</a>
</li>
<li class="nav-item">
<a href="../docs/switch-icon.html" class="nav-link">
Switch icon
</a>
</li>
<li class="nav-item">
<a href="../docs/tables.html" class="nav-link">
Tables
</a>
</li>
<li class="nav-item">
<a href="../docs/tabs.html" class="nav-link">
Tabs
</a>
</li>
<li class="nav-item">
<a href="../docs/timelines.html" class="nav-link active">
Timelines
</a>
</li>
<li class="nav-item">
<a href="../docs/toasts.html" class="nav-link">
Toasts
</a>
</li>
<li class="nav-item">
<a href="../docs/tooltips.html" class="nav-link">
Tooltips
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#menu-utils" class="nav-link" data-toggle="collapse" aria-expanded="false">
<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"/><path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z" /></svg>
</span>
Utilities
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-utils">
<li class="nav-item">
<a href="../docs/cursors.html" class="nav-link">
Cursors
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#menu-plugins" class="nav-link" data-toggle="collapse" aria-expanded="false">
<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"/><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><rect x="14" y="14" width="6" height="6" rx="1" /><line x1="14" y1="7" x2="20" y2="7" /><line x1="17" y1="4" x2="17" y2="10" /></svg>
</span>
Plugins
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-plugins">
<li class="nav-item">
<a href="../docs/autosize.html" class="nav-link">
Autosize
</a>
</li>
<li class="nav-item">
<a href="../docs/input-mask.html" class="nav-link">
Form input mask
</a>
</li>
<li class="nav-item">
<a href="../docs/flags.html" class="nav-link">
Flags
</a>
</li>
<li class="nav-item">
<a href="../docs/charts.html" class="nav-link">
Charts
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="../changelog.html" class="nav-link">
<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>
</a>
</li>
</ul>
</div>
<div class="col-lg-9">
<div class="card card-lg">
<div class="card-body">
<div class="markdown">
<div class="d-flex">
<h1 class="h2 mt-0 mb-3">Timelines</h1>
<div class="mb-5">
<div class="d-flex mb-3">
<h1 class="mt-0">Timelines</h1>
</div>
<p>A timeline is a perfect way to visualize processes and projects, as it's easy to read and attractive for users. You can use it to give an overview of events, present an agenda or point out important points in time.</p>
</div>
<p>A timeline is a perfect way to visualize processes and projects, as it's easy to read and attractive for users. You can use it to give an overview of events, present an agenda or point out important points in time.</p>
<h2 id="timeline">Timeline</h2>
<p>The available timeline design is comprised of many components that will help you visualize a process or show an outline of events. Thanks to the possibility of adding icons, avatars and links and the way of presenting the elements of content, your timeline will be clear for users and will make yor website or app more attractive.</p>
<div class="example no_toc_section">
@@ -621,7 +670,7 @@
<div class="list-timeline-content">
<div class="list-timeline-time">1 day ago</div>
<p class="list-timeline-title">Database backup completed!</p>
<p class="text-muted">Download the <a href="#">latest backup</a>.</p>
<p class="text-muted">Download the <a href="javascript:void()">latest backup</a>.</p>
</div>
</li>
<li>
@@ -679,7 +728,7 @@
<div class="list-timeline-content">
<div class="list-timeline-time">2 weeks ago</div>
<p class="list-timeline-title">System updated to v2.02</p>
<p class="text-muted">Check the complete changelog at the <a href="#">activity
<p class="text-muted">Check the complete changelog at the <a href="javascript:void()">activity
page</a>.</p>
</div>
</li>
@@ -819,7 +868,7 @@
<div class="list-timeline-content">
<div class="list-timeline-time">1 day ago</div>
<p class="list-timeline-title">Database backup completed!</p>
<p class="text-muted">Download the <a href="#">latest backup</a>.</p>
<p class="text-muted">Download the <a href="javascript:void()">latest backup</a>.</p>
</div>
</li>
<li>
@@ -877,7 +926,7 @@
<div class="list-timeline-content">
<div class="list-timeline-time">2 weeks ago</div>
<p class="list-timeline-title">System updated to v2.02</p>
<p class="text-muted">Check the complete changelog at the <a href="#">activity
<p class="text-muted">Check the complete changelog at the <a href="javascript:void()">activity
page</a>.</p>
</div>
</li>
@@ -1007,7 +1056,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="https://github.com/tabler/tabler/releases" target="_blank" class="link-secondary">v1.0.0-alpha.10</a>
<a href="../changelog.html" class="link-secondary">v1.0.0-alpha.11</a>
</li>
</ul>
</div>

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.10
* @version 1.0.0-alpha.11
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -362,181 +362,14 @@
</li>
</ul>
</li>
<li class="nav-item active dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
<li class="nav-item active">
<a class="nav-link" href="../docs/index.html" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><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="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
</span>
<span class="nav-link-title">
Docs
Documentation
</span>
</a>
<ul class="dropdown-menu dropdown-menu-columns dropdown-menu-columns-3">
<li >
<a class="dropdown-item" href="../docs/index.html" >
Introduction
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/alerts.html" >
Alerts
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/autosize.html" >
Autosize
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/avatars.html" >
Avatars
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/badges.html" >
Badges
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/breadcrumb.html" >
Breadcrumb
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/buttons.html" >
Buttons
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/cards.html" >
Cards
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/carousel.html" >
Carousel
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/colors.html" >
Colors
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/cursors.html" >
Cursors
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/charts.html" >
Charts
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/dropdowns.html" >
Dropdowns
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/divider.html" >
Divider
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/empty.html" >
Empty states
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/flags.html" >
Flags
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/form-elements.html" >
Form elements
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/form-helpers.html" >
Form helpers
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/input-mask.html" >
Form input mask
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/modals.html" >
Modals
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/progress.html" >
Progress
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/payments.html" >
Payments
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/range-slider.html" >
Range slider
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/ribbons.html" >
Ribbons
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/skeleton.html" >
Skeleton
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/spinners.html" >
Spinners
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/steps.html" >
Steps
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/tables.html" >
Tables
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/tabs.html" >
Tabs
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/timelines.html" >
Timelines
</a>
</li>
<li >
<a class="dropdown-item active" href="../docs/toasts.html" >
Toasts
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/tooltips.html" >
Tooltips
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/typography.html" >
Typography
</a>
</li>
</ul>
</li>
</ul>
<div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
@@ -565,35 +398,250 @@
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="d-none d-lg-block col-lg-3 order-lg-1 mb-4">
<div class="sticky-top lh-lg py-4">
<a href="https://github.com/tabler/tabler" class="btn btn-white mb-6 btn-block" target="_blank" rel="noreferrer">
<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>
Browse source code
</a>
<h5 class="subheader">On this page</h5>
<ul class="list-unstyled">
<li class="toc-entry toc-h2"><a href="#default-markup">Default markup</a></li>
<li class="toc-entry toc-h2"><a href="#translucent">Translucent</a></li>
<li class="toc-entry toc-h2"><a href="#stacking-toasts">Stacking toasts</a></li>
</ul>
</div>
<div class="row g-5">
<div class="d-none d-lg-block col-lg-3">
<ul class="nav nav-pills nav-vertical">
<li class="nav-item">
<a href="#menu-base" class="nav-link" data-toggle="collapse" aria-expanded="false">
<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"/><path d="M8 9l3 3l-3 3" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
</span>
Getting started
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-base">
<li class="nav-item">
<a href="../docs/index.html" class="nav-link">
Introduction
</a>
</li>
<li class="nav-item">
<a href="../docs/colors.html" class="nav-link">
Colors
</a>
</li>
<li class="nav-item">
<a href="../docs/typography.html" class="nav-link">
Typography
</a>
</li>
<li class="nav-item">
<a href="../docs/icons.html" class="nav-link">
Icons
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#menu-components" class="nav-link" data-toggle="collapse" aria-expanded="true">
<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"/><path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>
</span>
Components
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse show" id="menu-components">
<li class="nav-item">
<a href="../docs/alerts.html" class="nav-link">
Alerts
</a>
</li>
<li class="nav-item">
<a href="../docs/avatars.html" class="nav-link">
Avatars
</a>
</li>
<li class="nav-item">
<a href="../docs/badges.html" class="nav-link">
Badges
</a>
</li>
<li class="nav-item">
<a href="../docs/breadcrumb.html" class="nav-link">
Breadcrumb
</a>
</li>
<li class="nav-item">
<a href="../docs/buttons.html" class="nav-link">
Buttons
</a>
</li>
<li class="nav-item">
<a href="../docs/cards.html" class="nav-link">
Cards
</a>
</li>
<li class="nav-item">
<a href="../docs/carousel.html" class="nav-link">
Carousel
</a>
</li>
<li class="nav-item">
<a href="../docs/dropdowns.html" class="nav-link">
Dropdowns
</a>
</li>
<li class="nav-item">
<a href="../docs/divider.html" class="nav-link">
Divider
</a>
</li>
<li class="nav-item">
<a href="../docs/empty.html" class="nav-link">
Empty states
</a>
</li>
<li class="nav-item">
<a href="../docs/form-elements.html" class="nav-link">
Form elements
</a>
</li>
<li class="nav-item">
<a href="../docs/form-helpers.html" class="nav-link">
Form helpers
</a>
</li>
<li class="nav-item">
<a href="../docs/modals.html" class="nav-link">
Modals
</a>
</li>
<li class="nav-item">
<a href="../docs/progress.html" class="nav-link">
Progress
</a>
</li>
<li class="nav-item">
<a href="../docs/payments.html" class="nav-link">
Payments
</a>
</li>
<li class="nav-item">
<a href="../docs/range-slider.html" class="nav-link">
Range slider
</a>
</li>
<li class="nav-item">
<a href="../docs/ribbons.html" class="nav-link">
Ribbons
</a>
</li>
<li class="nav-item">
<a href="../docs/skeleton.html" class="nav-link">
Skeleton
</a>
</li>
<li class="nav-item">
<a href="../docs/spinners.html" class="nav-link">
Spinners
</a>
</li>
<li class="nav-item">
<a href="../docs/steps.html" class="nav-link">
Steps
</a>
</li>
<li class="nav-item">
<a href="../docs/switch-icon.html" class="nav-link">
Switch icon
</a>
</li>
<li class="nav-item">
<a href="../docs/tables.html" class="nav-link">
Tables
</a>
</li>
<li class="nav-item">
<a href="../docs/tabs.html" class="nav-link">
Tabs
</a>
</li>
<li class="nav-item">
<a href="../docs/timelines.html" class="nav-link">
Timelines
</a>
</li>
<li class="nav-item">
<a href="../docs/toasts.html" class="nav-link active">
Toasts
</a>
</li>
<li class="nav-item">
<a href="../docs/tooltips.html" class="nav-link">
Tooltips
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#menu-utils" class="nav-link" data-toggle="collapse" aria-expanded="false">
<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"/><path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z" /></svg>
</span>
Utilities
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-utils">
<li class="nav-item">
<a href="../docs/cursors.html" class="nav-link">
Cursors
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#menu-plugins" class="nav-link" data-toggle="collapse" aria-expanded="false">
<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"/><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><rect x="14" y="14" width="6" height="6" rx="1" /><line x1="14" y1="7" x2="20" y2="7" /><line x1="17" y1="4" x2="17" y2="10" /></svg>
</span>
Plugins
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-plugins">
<li class="nav-item">
<a href="../docs/autosize.html" class="nav-link">
Autosize
</a>
</li>
<li class="nav-item">
<a href="../docs/input-mask.html" class="nav-link">
Form input mask
</a>
</li>
<li class="nav-item">
<a href="../docs/flags.html" class="nav-link">
Flags
</a>
</li>
<li class="nav-item">
<a href="../docs/charts.html" class="nav-link">
Charts
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="../changelog.html" class="nav-link">
<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>
</a>
</li>
</ul>
</div>
<div class="col-lg-9">
<div class="card card-lg">
<div class="card-body">
<div class="markdown">
<div class="d-flex">
<h1 class="h2 mt-0 mb-3">Toasts</h1>
<p class="ml-auto">
<a href="https://getbootstrap.com/docs/4.4/components/toasts/" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" class="icon pr-1 text-blue" 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="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" /><line x1="10" y1="14" x2="20" y2="4" /><polyline points="15 4 20 4 20 9" /></svg>
Bootstrap documentation
</a>
</p>
<div class="mb-5">
<div class="d-flex mb-3">
<h1 class="mt-0">Toasts</h1>
<p class="ml-auto">
<a href="https://getbootstrap.com/docs/4.4/components/toasts/" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" class="icon pr-1 text-blue" 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="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" /><line x1="10" y1="14" x2="20" y2="4" /><polyline points="15 4 20 4 20 9" /></svg>
Bootstrap documentation
</a>
</p>
</div>
<p>Toasts are lightweight alert boxes which display for a few seconds after a user has taken an action, to inform them of the state or outcome. They can be used when a user clicks a button or submits a form and their aim is to provide feedback, rather than encourage to take action.</p>
</div>
<p>Toasts are lightweight alert boxes which display for a few seconds after a user has taken an action, to inform them of the state or outcome. They can be used when a user clicks a button or submits a form and their aim is to provide feedback, rather than encourage to take action.</p>
<h2 id="default-markup">Default markup</h2>
<p>Use the default toast message to inform users of the outcome of their action and provide additional information. It contains an <code class="language-plaintext highlighter-rouge">x</code> close button to make it possible for users to close the toast if they wish.</p>
<div class="example no_toc_section">
@@ -736,7 +784,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="https://github.com/tabler/tabler/releases" target="_blank" class="link-secondary">v1.0.0-alpha.10</a>
<a href="../changelog.html" class="link-secondary">v1.0.0-alpha.11</a>
</li>
</ul>
</div>

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.10
* @version 1.0.0-alpha.11
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -362,181 +362,14 @@
</li>
</ul>
</li>
<li class="nav-item active dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
<li class="nav-item active">
<a class="nav-link" href="../docs/index.html" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><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="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
</span>
<span class="nav-link-title">
Docs
Documentation
</span>
</a>
<ul class="dropdown-menu dropdown-menu-columns dropdown-menu-columns-3">
<li >
<a class="dropdown-item" href="../docs/index.html" >
Introduction
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/alerts.html" >
Alerts
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/autosize.html" >
Autosize
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/avatars.html" >
Avatars
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/badges.html" >
Badges
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/breadcrumb.html" >
Breadcrumb
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/buttons.html" >
Buttons
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/cards.html" >
Cards
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/carousel.html" >
Carousel
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/colors.html" >
Colors
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/cursors.html" >
Cursors
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/charts.html" >
Charts
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/dropdowns.html" >
Dropdowns
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/divider.html" >
Divider
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/empty.html" >
Empty states
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/flags.html" >
Flags
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/form-elements.html" >
Form elements
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/form-helpers.html" >
Form helpers
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/input-mask.html" >
Form input mask
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/modals.html" >
Modals
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/progress.html" >
Progress
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/payments.html" >
Payments
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/range-slider.html" >
Range slider
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/ribbons.html" >
Ribbons
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/skeleton.html" >
Skeleton
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/spinners.html" >
Spinners
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/steps.html" >
Steps
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/tables.html" >
Tables
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/tabs.html" >
Tabs
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/timelines.html" >
Timelines
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/toasts.html" >
Toasts
</a>
</li>
<li >
<a class="dropdown-item active" href="../docs/tooltips.html" >
Tooltips
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/typography.html" >
Typography
</a>
</li>
</ul>
</li>
</ul>
<div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
@@ -565,34 +398,250 @@
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="d-none d-lg-block col-lg-3 order-lg-1 mb-4">
<div class="sticky-top lh-lg py-4">
<a href="https://github.com/tabler/tabler" class="btn btn-white mb-6 btn-block" target="_blank" rel="noreferrer">
<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>
Browse source code
</a>
<h5 class="subheader">On this page</h5>
<ul class="list-unstyled">
<li class="toc-entry toc-h2"><a href="#default-markup">Default markup</a></li>
<li class="toc-entry toc-h2"><a href="#tooltip-with-html">Tooltip with HTML</a></li>
</ul>
</div>
<div class="row g-5">
<div class="d-none d-lg-block col-lg-3">
<ul class="nav nav-pills nav-vertical">
<li class="nav-item">
<a href="#menu-base" class="nav-link" data-toggle="collapse" aria-expanded="false">
<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"/><path d="M8 9l3 3l-3 3" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
</span>
Getting started
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-base">
<li class="nav-item">
<a href="../docs/index.html" class="nav-link">
Introduction
</a>
</li>
<li class="nav-item">
<a href="../docs/colors.html" class="nav-link">
Colors
</a>
</li>
<li class="nav-item">
<a href="../docs/typography.html" class="nav-link">
Typography
</a>
</li>
<li class="nav-item">
<a href="../docs/icons.html" class="nav-link">
Icons
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#menu-components" class="nav-link" data-toggle="collapse" aria-expanded="true">
<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"/><path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>
</span>
Components
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse show" id="menu-components">
<li class="nav-item">
<a href="../docs/alerts.html" class="nav-link">
Alerts
</a>
</li>
<li class="nav-item">
<a href="../docs/avatars.html" class="nav-link">
Avatars
</a>
</li>
<li class="nav-item">
<a href="../docs/badges.html" class="nav-link">
Badges
</a>
</li>
<li class="nav-item">
<a href="../docs/breadcrumb.html" class="nav-link">
Breadcrumb
</a>
</li>
<li class="nav-item">
<a href="../docs/buttons.html" class="nav-link">
Buttons
</a>
</li>
<li class="nav-item">
<a href="../docs/cards.html" class="nav-link">
Cards
</a>
</li>
<li class="nav-item">
<a href="../docs/carousel.html" class="nav-link">
Carousel
</a>
</li>
<li class="nav-item">
<a href="../docs/dropdowns.html" class="nav-link">
Dropdowns
</a>
</li>
<li class="nav-item">
<a href="../docs/divider.html" class="nav-link">
Divider
</a>
</li>
<li class="nav-item">
<a href="../docs/empty.html" class="nav-link">
Empty states
</a>
</li>
<li class="nav-item">
<a href="../docs/form-elements.html" class="nav-link">
Form elements
</a>
</li>
<li class="nav-item">
<a href="../docs/form-helpers.html" class="nav-link">
Form helpers
</a>
</li>
<li class="nav-item">
<a href="../docs/modals.html" class="nav-link">
Modals
</a>
</li>
<li class="nav-item">
<a href="../docs/progress.html" class="nav-link">
Progress
</a>
</li>
<li class="nav-item">
<a href="../docs/payments.html" class="nav-link">
Payments
</a>
</li>
<li class="nav-item">
<a href="../docs/range-slider.html" class="nav-link">
Range slider
</a>
</li>
<li class="nav-item">
<a href="../docs/ribbons.html" class="nav-link">
Ribbons
</a>
</li>
<li class="nav-item">
<a href="../docs/skeleton.html" class="nav-link">
Skeleton
</a>
</li>
<li class="nav-item">
<a href="../docs/spinners.html" class="nav-link">
Spinners
</a>
</li>
<li class="nav-item">
<a href="../docs/steps.html" class="nav-link">
Steps
</a>
</li>
<li class="nav-item">
<a href="../docs/switch-icon.html" class="nav-link">
Switch icon
</a>
</li>
<li class="nav-item">
<a href="../docs/tables.html" class="nav-link">
Tables
</a>
</li>
<li class="nav-item">
<a href="../docs/tabs.html" class="nav-link">
Tabs
</a>
</li>
<li class="nav-item">
<a href="../docs/timelines.html" class="nav-link">
Timelines
</a>
</li>
<li class="nav-item">
<a href="../docs/toasts.html" class="nav-link">
Toasts
</a>
</li>
<li class="nav-item">
<a href="../docs/tooltips.html" class="nav-link active">
Tooltips
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#menu-utils" class="nav-link" data-toggle="collapse" aria-expanded="false">
<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"/><path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z" /></svg>
</span>
Utilities
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-utils">
<li class="nav-item">
<a href="../docs/cursors.html" class="nav-link">
Cursors
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#menu-plugins" class="nav-link" data-toggle="collapse" aria-expanded="false">
<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"/><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><rect x="14" y="14" width="6" height="6" rx="1" /><line x1="14" y1="7" x2="20" y2="7" /><line x1="17" y1="4" x2="17" y2="10" /></svg>
</span>
Plugins
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-plugins">
<li class="nav-item">
<a href="../docs/autosize.html" class="nav-link">
Autosize
</a>
</li>
<li class="nav-item">
<a href="../docs/input-mask.html" class="nav-link">
Form input mask
</a>
</li>
<li class="nav-item">
<a href="../docs/flags.html" class="nav-link">
Flags
</a>
</li>
<li class="nav-item">
<a href="../docs/charts.html" class="nav-link">
Charts
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="../changelog.html" class="nav-link">
<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>
</a>
</li>
</ul>
</div>
<div class="col-lg-9">
<div class="card card-lg">
<div class="card-body">
<div class="markdown">
<div class="d-flex">
<h1 class="h2 mt-0 mb-3">Tooltips</h1>
<p class="ml-auto">
<a href="https://getbootstrap.com/docs/4.4/components/tooltips/" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" class="icon pr-1 text-blue" 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="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" /><line x1="10" y1="14" x2="20" y2="4" /><polyline points="15 4 20 4 20 9" /></svg>
Bootstrap documentation
</a>
</p>
<div class="mb-5">
<div class="d-flex mb-3">
<h1 class="mt-0">Tooltips</h1>
<p class="ml-auto">
<a href="https://getbootstrap.com/docs/4.4/components/tooltips/" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" class="icon pr-1 text-blue" 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="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" /><line x1="10" y1="14" x2="20" y2="4" /><polyline points="15 4 20 4 20 9" /></svg>
Bootstrap documentation
</a>
</p>
</div>
<p>Tooltips are text labels which appear when a user hovers over an interface element. They explain the interface elements that may be unclear for users and guide them when they need help. If used properly, tooltips can significantly enhance user experience and add value to your website or software.</p>
</div>
<p>Tooltips are text labels which appear when a user hovers over an interface element. They explain the interface elements that may be unclear for users and guide them when they need help. If used properly, tooltips can significantly enhance user experience and add value to your website or software.</p>
<h2 id="default-markup">Default markup</h2>
<p>Use the default markup to create tooltips that will help users understand particular elements of your interface. You can decide where the text label is to be displayed - at the top, bottom or on either side of the element.</p>
<div class="example no_toc_section">
@@ -667,7 +716,7 @@ Tooltip with HTML
All rights reserved.
</li>
<li class="list-inline-item">
<a href="https://github.com/tabler/tabler/releases" target="_blank" class="link-secondary">v1.0.0-alpha.10</a>
<a href="../changelog.html" class="link-secondary">v1.0.0-alpha.11</a>
</li>
</ul>
</div>

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.10
* @version 1.0.0-alpha.11
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -362,181 +362,14 @@
</li>
</ul>
</li>
<li class="nav-item active dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
<li class="nav-item active">
<a class="nav-link" href="../docs/index.html" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><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="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
</span>
<span class="nav-link-title">
Docs
Documentation
</span>
</a>
<ul class="dropdown-menu dropdown-menu-columns dropdown-menu-columns-3">
<li >
<a class="dropdown-item" href="../docs/index.html" >
Introduction
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/alerts.html" >
Alerts
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/autosize.html" >
Autosize
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/avatars.html" >
Avatars
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/badges.html" >
Badges
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/breadcrumb.html" >
Breadcrumb
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/buttons.html" >
Buttons
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/cards.html" >
Cards
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/carousel.html" >
Carousel
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/colors.html" >
Colors
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/cursors.html" >
Cursors
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/charts.html" >
Charts
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/dropdowns.html" >
Dropdowns
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/divider.html" >
Divider
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/empty.html" >
Empty states
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/flags.html" >
Flags
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/form-elements.html" >
Form elements
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/form-helpers.html" >
Form helpers
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/input-mask.html" >
Form input mask
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/modals.html" >
Modals
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/progress.html" >
Progress
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/payments.html" >
Payments
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/range-slider.html" >
Range slider
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/ribbons.html" >
Ribbons
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/skeleton.html" >
Skeleton
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/spinners.html" >
Spinners
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/steps.html" >
Steps
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/tables.html" >
Tables
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/tabs.html" >
Tabs
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/timelines.html" >
Timelines
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/toasts.html" >
Toasts
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/tooltips.html" >
Tooltips
</a>
</li>
<li >
<a class="dropdown-item active" href="../docs/typography.html" >
Typography
</a>
</li>
</ul>
</li>
</ul>
<div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
@@ -565,43 +398,250 @@
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="d-none d-lg-block col-lg-3 order-lg-1 mb-4">
<div class="sticky-top lh-lg py-4">
<a href="https://github.com/tabler/tabler" class="btn btn-white mb-6 btn-block" target="_blank" rel="noreferrer">
<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>
Browse source code
</a>
<h5 class="subheader">On this page</h5>
<ul class="list-unstyled">
<li class="toc-entry toc-h2"><a href="#headings">Headings</a></li>
<li class="toc-entry toc-h2"><a href="#paragraphs">Paragraphs</a></li>
<li class="toc-entry toc-h2"><a href="#semantic-text-elements">Semantic text elements</a></li>
<li class="toc-entry toc-h2"><a href="#horizontal-rules">Horizontal rules</a></li>
<li class="toc-entry toc-h2"><a href="#horizontal-rules-with-label">Horizontal rules with label</a></li>
<li class="toc-entry toc-h2"><a href="#optimized-for-different-alphabets">Optimized for different alphabets</a></li>
<li class="toc-entry toc-h2"><a href="#text-transform">Text transform</a></li>
<li class="toc-entry toc-h2"><a href="#letter-spacing">Letter spacing</a></li>
<li class="toc-entry toc-h2"><a href="#line-height">Line height</a></li>
<li class="toc-entry toc-h2"><a href="#antialiasing">Antialiasing</a></li>
<li class="toc-entry toc-h2"><a href="#markdown-elements">Markdown elements</a></li>
</ul>
</div>
<div class="row g-5">
<div class="d-none d-lg-block col-lg-3">
<ul class="nav nav-pills nav-vertical">
<li class="nav-item">
<a href="#menu-base" class="nav-link" data-toggle="collapse" aria-expanded="true">
<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"/><path d="M8 9l3 3l-3 3" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
</span>
Getting started
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse show" id="menu-base">
<li class="nav-item">
<a href="../docs/index.html" class="nav-link">
Introduction
</a>
</li>
<li class="nav-item">
<a href="../docs/colors.html" class="nav-link">
Colors
</a>
</li>
<li class="nav-item">
<a href="../docs/typography.html" class="nav-link active">
Typography
</a>
</li>
<li class="nav-item">
<a href="../docs/icons.html" class="nav-link">
Icons
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#menu-components" class="nav-link" data-toggle="collapse" aria-expanded="false">
<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"/><path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>
</span>
Components
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-components">
<li class="nav-item">
<a href="../docs/alerts.html" class="nav-link">
Alerts
</a>
</li>
<li class="nav-item">
<a href="../docs/avatars.html" class="nav-link">
Avatars
</a>
</li>
<li class="nav-item">
<a href="../docs/badges.html" class="nav-link">
Badges
</a>
</li>
<li class="nav-item">
<a href="../docs/breadcrumb.html" class="nav-link">
Breadcrumb
</a>
</li>
<li class="nav-item">
<a href="../docs/buttons.html" class="nav-link">
Buttons
</a>
</li>
<li class="nav-item">
<a href="../docs/cards.html" class="nav-link">
Cards
</a>
</li>
<li class="nav-item">
<a href="../docs/carousel.html" class="nav-link">
Carousel
</a>
</li>
<li class="nav-item">
<a href="../docs/dropdowns.html" class="nav-link">
Dropdowns
</a>
</li>
<li class="nav-item">
<a href="../docs/divider.html" class="nav-link">
Divider
</a>
</li>
<li class="nav-item">
<a href="../docs/empty.html" class="nav-link">
Empty states
</a>
</li>
<li class="nav-item">
<a href="../docs/form-elements.html" class="nav-link">
Form elements
</a>
</li>
<li class="nav-item">
<a href="../docs/form-helpers.html" class="nav-link">
Form helpers
</a>
</li>
<li class="nav-item">
<a href="../docs/modals.html" class="nav-link">
Modals
</a>
</li>
<li class="nav-item">
<a href="../docs/progress.html" class="nav-link">
Progress
</a>
</li>
<li class="nav-item">
<a href="../docs/payments.html" class="nav-link">
Payments
</a>
</li>
<li class="nav-item">
<a href="../docs/range-slider.html" class="nav-link">
Range slider
</a>
</li>
<li class="nav-item">
<a href="../docs/ribbons.html" class="nav-link">
Ribbons
</a>
</li>
<li class="nav-item">
<a href="../docs/skeleton.html" class="nav-link">
Skeleton
</a>
</li>
<li class="nav-item">
<a href="../docs/spinners.html" class="nav-link">
Spinners
</a>
</li>
<li class="nav-item">
<a href="../docs/steps.html" class="nav-link">
Steps
</a>
</li>
<li class="nav-item">
<a href="../docs/switch-icon.html" class="nav-link">
Switch icon
</a>
</li>
<li class="nav-item">
<a href="../docs/tables.html" class="nav-link">
Tables
</a>
</li>
<li class="nav-item">
<a href="../docs/tabs.html" class="nav-link">
Tabs
</a>
</li>
<li class="nav-item">
<a href="../docs/timelines.html" class="nav-link">
Timelines
</a>
</li>
<li class="nav-item">
<a href="../docs/toasts.html" class="nav-link">
Toasts
</a>
</li>
<li class="nav-item">
<a href="../docs/tooltips.html" class="nav-link">
Tooltips
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#menu-utils" class="nav-link" data-toggle="collapse" aria-expanded="false">
<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"/><path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z" /></svg>
</span>
Utilities
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-utils">
<li class="nav-item">
<a href="../docs/cursors.html" class="nav-link">
Cursors
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#menu-plugins" class="nav-link" data-toggle="collapse" aria-expanded="false">
<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"/><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><rect x="14" y="14" width="6" height="6" rx="1" /><line x1="14" y1="7" x2="20" y2="7" /><line x1="17" y1="4" x2="17" y2="10" /></svg>
</span>
Plugins
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-plugins">
<li class="nav-item">
<a href="../docs/autosize.html" class="nav-link">
Autosize
</a>
</li>
<li class="nav-item">
<a href="../docs/input-mask.html" class="nav-link">
Form input mask
</a>
</li>
<li class="nav-item">
<a href="../docs/flags.html" class="nav-link">
Flags
</a>
</li>
<li class="nav-item">
<a href="../docs/charts.html" class="nav-link">
Charts
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="../changelog.html" class="nav-link">
<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>
</a>
</li>
</ul>
</div>
<div class="col-lg-9">
<div class="card card-lg">
<div class="card-body">
<div class="markdown">
<div class="d-flex">
<h1 class="h2 mt-0 mb-3">Typography</h1>
<p class="ml-auto">
<a href="https://getbootstrap.com/docs/4.4/content/typography/" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" class="icon pr-1 text-blue" 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="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" /><line x1="10" y1="14" x2="20" y2="4" /><polyline points="15 4 20 4 20 9" /></svg>
Bootstrap documentation
</a>
</p>
<div class="mb-5">
<div class="d-flex mb-3">
<h1 class="mt-0">Typography</h1>
<p class="ml-auto">
<a href="https://getbootstrap.com/docs/4.4/content/typography/" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" class="icon pr-1 text-blue" 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="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" /><line x1="10" y1="14" x2="20" y2="4" /><polyline points="15 4 20 4 20 9" /></svg>
Bootstrap documentation
</a>
</p>
</div>
<p>Typography plays an important role in creating an attractive and clear interface design. Good typography will make the content easy to follow and improve the usability of your website.</p>
</div>
<p>Typography plays an important role in creating an attractive and clear interface design. Good typography will make the content easy to follow and improve the usability of your website.</p>
<h2 id="headings">Headings</h2>
<p>Use HTML headings to organize content on your website and make the structure clear and user-friendly.</p>
<div class="example no_toc_section">
@@ -927,7 +967,7 @@ Text <span class="nt">&lt;sup&gt;</span>Superscripted<span class="nt">&lt;/sup&g
All rights reserved.
</li>
<li class="list-inline-item">
<a href="https://github.com/tabler/tabler/releases" target="_blank" class="link-secondary">v1.0.0-alpha.10</a>
<a href="../changelog.html" class="link-secondary">v1.0.0-alpha.11</a>
</li>
</ul>
</div>

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.10
* @version 1.0.0-alpha.11
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -361,181 +361,14 @@
</li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
<li class="nav-item">
<a class="nav-link" href="./docs/index.html" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><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="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
</span>
<span class="nav-link-title">
Docs
Documentation
</span>
</a>
<ul class="dropdown-menu dropdown-menu-columns dropdown-menu-columns-3">
<li >
<a class="dropdown-item" href="./docs/index.html" >
Introduction
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/alerts.html" >
Alerts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/autosize.html" >
Autosize
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/avatars.html" >
Avatars
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/badges.html" >
Badges
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/breadcrumb.html" >
Breadcrumb
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/buttons.html" >
Buttons
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/cards.html" >
Cards
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/carousel.html" >
Carousel
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/colors.html" >
Colors
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/cursors.html" >
Cursors
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/charts.html" >
Charts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/dropdowns.html" >
Dropdowns
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/divider.html" >
Divider
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/empty.html" >
Empty states
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/flags.html" >
Flags
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/form-elements.html" >
Form elements
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/form-helpers.html" >
Form helpers
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/input-mask.html" >
Form input mask
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/modals.html" >
Modals
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/progress.html" >
Progress
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/payments.html" >
Payments
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/range-slider.html" >
Range slider
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/ribbons.html" >
Ribbons
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/skeleton.html" >
Skeleton
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/spinners.html" >
Spinners
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/steps.html" >
Steps
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tables.html" >
Tables
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tabs.html" >
Tabs
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/timelines.html" >
Timelines
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/toasts.html" >
Toasts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tooltips.html" >
Tooltips
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/typography.html" >
Typography
</a>
</li>
</ul>
</li>
</ul>
<div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
@@ -812,7 +645,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="https://github.com/tabler/tabler/releases" target="_blank" class="link-secondary">v1.0.0-alpha.10</a>
<a href="./changelog.html" class="link-secondary">v1.0.0-alpha.11</a>
</li>
</ul>
</div>

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.10
* @version 1.0.0-alpha.11
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -361,181 +361,14 @@
</li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
<li class="nav-item">
<a class="nav-link" href="./docs/index.html" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><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="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
</span>
<span class="nav-link-title">
Docs
Documentation
</span>
</a>
<ul class="dropdown-menu dropdown-menu-columns dropdown-menu-columns-3">
<li >
<a class="dropdown-item" href="./docs/index.html" >
Introduction
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/alerts.html" >
Alerts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/autosize.html" >
Autosize
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/avatars.html" >
Avatars
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/badges.html" >
Badges
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/breadcrumb.html" >
Breadcrumb
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/buttons.html" >
Buttons
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/cards.html" >
Cards
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/carousel.html" >
Carousel
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/colors.html" >
Colors
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/cursors.html" >
Cursors
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/charts.html" >
Charts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/dropdowns.html" >
Dropdowns
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/divider.html" >
Divider
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/empty.html" >
Empty states
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/flags.html" >
Flags
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/form-elements.html" >
Form elements
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/form-helpers.html" >
Form helpers
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/input-mask.html" >
Form input mask
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/modals.html" >
Modals
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/progress.html" >
Progress
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/payments.html" >
Payments
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/range-slider.html" >
Range slider
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/ribbons.html" >
Ribbons
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/skeleton.html" >
Skeleton
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/spinners.html" >
Spinners
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/steps.html" >
Steps
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tables.html" >
Tables
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tabs.html" >
Tabs
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/timelines.html" >
Timelines
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/toasts.html" >
Toasts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tooltips.html" >
Tooltips
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/typography.html" >
Typography
</a>
</li>
</ul>
</li>
</ul>
<div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
@@ -584,7 +417,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="https://github.com/tabler/tabler/releases" target="_blank" class="link-secondary">v1.0.0-alpha.10</a>
<a href="./changelog.html" class="link-secondary">v1.0.0-alpha.11</a>
</li>
</ul>
</div>

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.10
* @version 1.0.0-alpha.11
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -39,9 +39,7 @@
<div class="flex-fill d-flex align-items-center justify-content-center">
<div class="container-tight py-6">
<div class="empty">
<div class="empty-icon">
<div class="display-4">404</div>
</div>
<div class="empty-header">404</div>
<p class="empty-title">Oops… You just found an error page</p>
<p class="empty-subtitle text-muted">
We are sorry but the page you are looking for was not found

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.10
* @version 1.0.0-alpha.11
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -39,9 +39,7 @@
<div class="flex-fill d-flex align-items-center justify-content-center">
<div class="container-tight py-6">
<div class="empty">
<div class="empty-icon">
<div class="display-4">500</div>
</div>
<div class="empty-header">500</div>
<p class="empty-title">Oops… You just found an error page</p>
<p class="empty-subtitle text-muted">
We are sorry but our server encountered an internal error

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.10
* @version 1.0.0-alpha.11
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -39,8 +39,7 @@
<div class="flex-fill d-flex align-items-center justify-content-center">
<div class="container-tight py-6">
<div class="empty">
<div class="empty-icon">
<img src="./static/illustrations/undraw_quitting_time_dm8t.svg" height="128" class="mb-4" alt="">
<div class="empty-img"><img src="./static/illustrations/undraw_quitting_time_dm8t.svg" height="128" alt="">
</div>
<p class="empty-title">Temporarily down for maintenance</p>
<p class="empty-subtitle text-muted">

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.10
* @version 1.0.0-alpha.11
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -38,8 +38,8 @@
<body class="antialiased border-top-wide border-primary d-flex flex-column">
<div class="flex-fill d-flex flex-column justify-content-center">
<div class="container-tight py-6">
<div class="text-center mb-4">
<img src="./static/logo.svg" height="36" alt="">
<div class="text-center mb-5">
<a href="."><img src="./static/logo.svg" height="36" alt=""></a>
</div>
<form class="card card-md" action="." method="get">
<div class="card-body">
@@ -54,7 +54,7 @@
</div>
</div>
</form>
<div class="text-center text-muted">
<div class="text-center text-muted mt">
Forget it, <a href="./sign-in.html">send me back</a> to the sign in screen.
</div>
</div>

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.10
* @version 1.0.0-alpha.11
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -364,181 +364,14 @@
</li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
<li class="nav-item">
<a class="nav-link" href="./docs/index.html" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><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="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
</span>
<span class="nav-link-title">
Docs
Documentation
</span>
</a>
<ul class="dropdown-menu dropdown-menu-columns dropdown-menu-columns-3">
<li >
<a class="dropdown-item" href="./docs/index.html" >
Introduction
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/alerts.html" >
Alerts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/autosize.html" >
Autosize
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/avatars.html" >
Avatars
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/badges.html" >
Badges
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/breadcrumb.html" >
Breadcrumb
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/buttons.html" >
Buttons
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/cards.html" >
Cards
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/carousel.html" >
Carousel
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/colors.html" >
Colors
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/cursors.html" >
Cursors
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/charts.html" >
Charts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/dropdowns.html" >
Dropdowns
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/divider.html" >
Divider
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/empty.html" >
Empty states
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/flags.html" >
Flags
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/form-elements.html" >
Form elements
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/form-helpers.html" >
Form helpers
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/input-mask.html" >
Form input mask
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/modals.html" >
Modals
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/progress.html" >
Progress
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/payments.html" >
Payments
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/range-slider.html" >
Range slider
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/ribbons.html" >
Ribbons
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/skeleton.html" >
Skeleton
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/spinners.html" >
Spinners
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/steps.html" >
Steps
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tables.html" >
Tables
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tabs.html" >
Tabs
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/timelines.html" >
Timelines
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/toasts.html" >
Toasts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tooltips.html" >
Tooltips
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/typography.html" >
Typography
</a>
</li>
</ul>
</li>
</ul>
<div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
@@ -1182,7 +1015,7 @@
<span class="form-selectgroup-check"></span>
</div>
<div>
<span class="payment payment-provider-visa payment-sm mr-2"></span>
<span class="payment payment-provider-visa payment-xs mr-2"></span>
ending in <strong>7998</strong>
</div>
</div>
@@ -1194,7 +1027,7 @@
<span class="form-selectgroup-check"></span>
</div>
<div>
<span class="payment payment-provider-mastercard payment-sm mr-2"></span>
<span class="payment payment-provider-mastercard payment-xs mr-2"></span>
ending in <strong>2807</strong>
</div>
</div>
@@ -1206,7 +1039,7 @@
<span class="form-selectgroup-check"></span>
</div>
<div>
<span class="payment payment-provider-paypal payment-sm mr-2"></span>
<span class="payment payment-provider-paypal payment-xs mr-2"></span>
</div>
</div>
</label>
@@ -1431,29 +1264,29 @@
</div>
<div class="mb-3">
<label class="form-label">Checkboxes with description</label>
<label class="form-check form-check-highlight mb-2">
<label class="form-check mb-2">
<input class="form-check-input" type="checkbox">
<div class="form-check-label">
<span class="form-check-label">
Default checkbox
</div>
<div class="form-check-description">
</span>
<span class="form-check-description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
</span>
</label>
<label class="form-check form-check-highlight mb-2">
<label class="form-check mb-2">
<input class="form-check-input" type="checkbox">
<div class="form-check-label">
<span class="form-check-label">
Longer checkbox item that wraps on to two separate lines
</div>
<div class="form-check-description">
</span>
<span class="form-check-description">
Ab alias aut, consequuntur cumque esse eveniet incidunt laborum minus molestiae.
</div>
</span>
</label>
<label class="form-check form-check-highlight">
<label class="form-check">
<input class="form-check-input" type="checkbox">
<div class="form-check-label">
<span class="form-check-label">
Default checkbox without description
</div>
</span>
</label>
</div>
<div class="mb-3">
@@ -1956,7 +1789,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="https://github.com/tabler/tabler/releases" target="_blank" class="link-secondary">v1.0.0-alpha.10</a>
<a href="./changelog.html" class="link-secondary">v1.0.0-alpha.11</a>
</li>
</ul>
</div>

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.10
* @version 1.0.0-alpha.11
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -361,181 +361,14 @@
</li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
<li class="nav-item">
<a class="nav-link" href="./docs/index.html" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><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="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
</span>
<span class="nav-link-title">
Docs
Documentation
</span>
</a>
<ul class="dropdown-menu dropdown-menu-columns dropdown-menu-columns-3">
<li >
<a class="dropdown-item" href="./docs/index.html" >
Introduction
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/alerts.html" >
Alerts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/autosize.html" >
Autosize
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/avatars.html" >
Avatars
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/badges.html" >
Badges
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/breadcrumb.html" >
Breadcrumb
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/buttons.html" >
Buttons
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/cards.html" >
Cards
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/carousel.html" >
Carousel
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/colors.html" >
Colors
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/cursors.html" >
Cursors
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/charts.html" >
Charts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/dropdowns.html" >
Dropdowns
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/divider.html" >
Divider
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/empty.html" >
Empty states
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/flags.html" >
Flags
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/form-elements.html" >
Form elements
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/form-helpers.html" >
Form helpers
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/input-mask.html" >
Form input mask
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/modals.html" >
Modals
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/progress.html" >
Progress
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/payments.html" >
Payments
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/range-slider.html" >
Range slider
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/ribbons.html" >
Ribbons
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/skeleton.html" >
Skeleton
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/spinners.html" >
Spinners
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/steps.html" >
Steps
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tables.html" >
Tables
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tabs.html" >
Tabs
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/timelines.html" >
Timelines
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/toasts.html" >
Toasts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tooltips.html" >
Tooltips
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/typography.html" >
Typography
</a>
</li>
</ul>
</li>
</ul>
<div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
@@ -911,7 +744,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="https://github.com/tabler/tabler/releases" target="_blank" class="link-secondary">v1.0.0-alpha.10</a>
<a href="./changelog.html" class="link-secondary">v1.0.0-alpha.11</a>
</li>
</ul>
</div>

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.10
* @version 1.0.0-alpha.11
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -361,181 +361,14 @@
</li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
<li class="nav-item">
<a class="nav-link" href="./docs/index.html" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><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="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
</span>
<span class="nav-link-title">
Docs
Documentation
</span>
</a>
<ul class="dropdown-menu dropdown-menu-columns dropdown-menu-columns-3">
<li >
<a class="dropdown-item" href="./docs/index.html" >
Introduction
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/alerts.html" >
Alerts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/autosize.html" >
Autosize
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/avatars.html" >
Avatars
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/badges.html" >
Badges
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/breadcrumb.html" >
Breadcrumb
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/buttons.html" >
Buttons
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/cards.html" >
Cards
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/carousel.html" >
Carousel
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/colors.html" >
Colors
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/cursors.html" >
Cursors
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/charts.html" >
Charts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/dropdowns.html" >
Dropdowns
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/divider.html" >
Divider
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/empty.html" >
Empty states
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/flags.html" >
Flags
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/form-elements.html" >
Form elements
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/form-helpers.html" >
Form helpers
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/input-mask.html" >
Form input mask
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/modals.html" >
Modals
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/progress.html" >
Progress
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/payments.html" >
Payments
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/range-slider.html" >
Range slider
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/ribbons.html" >
Ribbons
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/skeleton.html" >
Skeleton
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/spinners.html" >
Spinners
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/steps.html" >
Steps
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tables.html" >
Tables
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tabs.html" >
Tabs
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/timelines.html" >
Timelines
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/toasts.html" >
Toasts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tooltips.html" >
Tooltips
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/typography.html" >
Typography
</a>
</li>
</ul>
</li>
</ul>
<div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
@@ -5499,7 +5332,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="https://github.com/tabler/tabler/releases" target="_blank" class="link-secondary">v1.0.0-alpha.10</a>
<a href="./changelog.html" class="link-secondary">v1.0.0-alpha.11</a>
</li>
</ul>
</div>

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.10
* @version 1.0.0-alpha.11
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -362,181 +362,14 @@
</li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
<li class="nav-item">
<a class="nav-link" href="./docs/index.html" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><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="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
</span>
<span class="nav-link-title">
Docs
Documentation
</span>
</a>
<ul class="dropdown-menu dropdown-menu-columns dropdown-menu-columns-3">
<li >
<a class="dropdown-item" href="./docs/index.html" >
Introduction
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/alerts.html" >
Alerts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/autosize.html" >
Autosize
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/avatars.html" >
Avatars
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/badges.html" >
Badges
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/breadcrumb.html" >
Breadcrumb
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/buttons.html" >
Buttons
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/cards.html" >
Cards
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/carousel.html" >
Carousel
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/colors.html" >
Colors
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/cursors.html" >
Cursors
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/charts.html" >
Charts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/dropdowns.html" >
Dropdowns
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/divider.html" >
Divider
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/empty.html" >
Empty states
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/flags.html" >
Flags
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/form-elements.html" >
Form elements
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/form-helpers.html" >
Form helpers
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/input-mask.html" >
Form input mask
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/modals.html" >
Modals
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/progress.html" >
Progress
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/payments.html" >
Payments
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/range-slider.html" >
Range slider
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/ribbons.html" >
Ribbons
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/skeleton.html" >
Skeleton
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/spinners.html" >
Spinners
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/steps.html" >
Steps
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tables.html" >
Tables
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tabs.html" >
Tabs
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/timelines.html" >
Timelines
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/toasts.html" >
Toasts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tooltips.html" >
Tooltips
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/typography.html" >
Typography
</a>
</li>
</ul>
</li>
</ul>
<div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
@@ -1668,7 +1501,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="https://github.com/tabler/tabler/releases" target="_blank" class="link-secondary">v1.0.0-alpha.10</a>
<a href="./changelog.html" class="link-secondary">v1.0.0-alpha.11</a>
</li>
</ul>
</div>

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.10
* @version 1.0.0-alpha.11
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -361,181 +361,14 @@
</li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
<li class="nav-item">
<a class="nav-link" href="./docs/index.html" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><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="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
</span>
<span class="nav-link-title">
Docs
Documentation
</span>
</a>
<ul class="dropdown-menu dropdown-menu-columns dropdown-menu-columns-3">
<li >
<a class="dropdown-item" href="./docs/index.html" >
Introduction
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/alerts.html" >
Alerts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/autosize.html" >
Autosize
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/avatars.html" >
Avatars
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/badges.html" >
Badges
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/breadcrumb.html" >
Breadcrumb
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/buttons.html" >
Buttons
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/cards.html" >
Cards
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/carousel.html" >
Carousel
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/colors.html" >
Colors
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/cursors.html" >
Cursors
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/charts.html" >
Charts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/dropdowns.html" >
Dropdowns
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/divider.html" >
Divider
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/empty.html" >
Empty states
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/flags.html" >
Flags
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/form-elements.html" >
Form elements
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/form-helpers.html" >
Form helpers
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/input-mask.html" >
Form input mask
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/modals.html" >
Modals
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/progress.html" >
Progress
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/payments.html" >
Payments
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/range-slider.html" >
Range slider
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/ribbons.html" >
Ribbons
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/skeleton.html" >
Skeleton
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/spinners.html" >
Spinners
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/steps.html" >
Steps
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tables.html" >
Tables
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tabs.html" >
Tabs
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/timelines.html" >
Timelines
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/toasts.html" >
Toasts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tooltips.html" >
Tooltips
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/typography.html" >
Typography
</a>
</li>
</ul>
</li>
</ul>
<div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
@@ -675,7 +508,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="https://github.com/tabler/tabler/releases" target="_blank" class="link-secondary">v1.0.0-alpha.10</a>
<a href="./changelog.html" class="link-secondary">v1.0.0-alpha.11</a>
</li>
</ul>
</div>

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.10
* @version 1.0.0-alpha.11
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -356,181 +356,14 @@
</li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
<li class="nav-item">
<a class="nav-link" href="./docs/index.html" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><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="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
</span>
<span class="nav-link-title">
Docs
Documentation
</span>
</a>
<ul class="dropdown-menu dropdown-menu-columns dropdown-menu-columns-3">
<li >
<a class="dropdown-item" href="./docs/index.html" >
Introduction
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/alerts.html" >
Alerts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/autosize.html" >
Autosize
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/avatars.html" >
Avatars
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/badges.html" >
Badges
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/breadcrumb.html" >
Breadcrumb
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/buttons.html" >
Buttons
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/cards.html" >
Cards
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/carousel.html" >
Carousel
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/colors.html" >
Colors
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/cursors.html" >
Cursors
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/charts.html" >
Charts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/dropdowns.html" >
Dropdowns
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/divider.html" >
Divider
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/empty.html" >
Empty states
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/flags.html" >
Flags
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/form-elements.html" >
Form elements
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/form-helpers.html" >
Form helpers
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/input-mask.html" >
Form input mask
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/modals.html" >
Modals
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/progress.html" >
Progress
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/payments.html" >
Payments
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/range-slider.html" >
Range slider
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/ribbons.html" >
Ribbons
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/skeleton.html" >
Skeleton
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/spinners.html" >
Spinners
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/steps.html" >
Steps
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tables.html" >
Tables
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tabs.html" >
Tabs
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/timelines.html" >
Timelines
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/toasts.html" >
Toasts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tooltips.html" >
Tooltips
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/typography.html" >
Typography
</a>
</li>
</ul>
</li>
</ul>
</div>
@@ -1703,7 +1536,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="https://github.com/tabler/tabler/releases" target="_blank" class="link-secondary">v1.0.0-alpha.10</a>
<a href="./changelog.html" class="link-secondary">v1.0.0-alpha.11</a>
</li>
</ul>
</div>

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.10
* @version 1.0.0-alpha.11
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -358,181 +358,14 @@
</li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
<li class="nav-item">
<a class="nav-link" href="./docs/index.html" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><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="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
</span>
<span class="nav-link-title">
Docs
Documentation
</span>
</a>
<ul class="dropdown-menu dropdown-menu-columns dropdown-menu-columns-3">
<li >
<a class="dropdown-item" href="./docs/index.html" >
Introduction
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/alerts.html" >
Alerts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/autosize.html" >
Autosize
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/avatars.html" >
Avatars
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/badges.html" >
Badges
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/breadcrumb.html" >
Breadcrumb
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/buttons.html" >
Buttons
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/cards.html" >
Cards
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/carousel.html" >
Carousel
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/colors.html" >
Colors
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/cursors.html" >
Cursors
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/charts.html" >
Charts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/dropdowns.html" >
Dropdowns
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/divider.html" >
Divider
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/empty.html" >
Empty states
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/flags.html" >
Flags
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/form-elements.html" >
Form elements
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/form-helpers.html" >
Form helpers
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/input-mask.html" >
Form input mask
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/modals.html" >
Modals
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/progress.html" >
Progress
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/payments.html" >
Payments
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/range-slider.html" >
Range slider
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/ribbons.html" >
Ribbons
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/skeleton.html" >
Skeleton
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/spinners.html" >
Spinners
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/steps.html" >
Steps
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tables.html" >
Tables
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tabs.html" >
Tabs
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/timelines.html" >
Timelines
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/toasts.html" >
Toasts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tooltips.html" >
Tooltips
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/typography.html" >
Typography
</a>
</li>
</ul>
</li>
</ul>
<div class="ml-md-auto pl-md-4 py-2 py-md-0 mr-md-4 order-first order-md-last flex-grow-1 flex-md-grow-0">
@@ -1664,7 +1497,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="https://github.com/tabler/tabler/releases" target="_blank" class="link-secondary">v1.0.0-alpha.10</a>
<a href="./changelog.html" class="link-secondary">v1.0.0-alpha.11</a>
</li>
</ul>
</div>

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.10
* @version 1.0.0-alpha.11
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -358,181 +358,14 @@
</li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
<li class="nav-item">
<a class="nav-link" href="./docs/index.html" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><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="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
</span>
<span class="nav-link-title">
Docs
Documentation
</span>
</a>
<ul class="dropdown-menu dropdown-menu-columns dropdown-menu-columns-3">
<li >
<a class="dropdown-item" href="./docs/index.html" >
Introduction
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/alerts.html" >
Alerts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/autosize.html" >
Autosize
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/avatars.html" >
Avatars
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/badges.html" >
Badges
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/breadcrumb.html" >
Breadcrumb
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/buttons.html" >
Buttons
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/cards.html" >
Cards
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/carousel.html" >
Carousel
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/colors.html" >
Colors
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/cursors.html" >
Cursors
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/charts.html" >
Charts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/dropdowns.html" >
Dropdowns
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/divider.html" >
Divider
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/empty.html" >
Empty states
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/flags.html" >
Flags
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/form-elements.html" >
Form elements
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/form-helpers.html" >
Form helpers
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/input-mask.html" >
Form input mask
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/modals.html" >
Modals
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/progress.html" >
Progress
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/payments.html" >
Payments
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/range-slider.html" >
Range slider
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/ribbons.html" >
Ribbons
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/skeleton.html" >
Skeleton
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/spinners.html" >
Spinners
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/steps.html" >
Steps
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tables.html" >
Tables
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tabs.html" >
Tabs
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/timelines.html" >
Timelines
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/toasts.html" >
Toasts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tooltips.html" >
Tooltips
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/typography.html" >
Typography
</a>
</li>
</ul>
</li>
</ul>
<div class="ml-md-auto pl-md-4 py-2 py-md-0 mr-md-4 order-first order-md-last flex-grow-1 flex-md-grow-0">
@@ -1664,7 +1497,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="https://github.com/tabler/tabler/releases" target="_blank" class="link-secondary">v1.0.0-alpha.10</a>
<a href="./changelog.html" class="link-secondary">v1.0.0-alpha.11</a>
</li>
</ul>
</div>

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.10
* @version 1.0.0-alpha.11
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -362,181 +362,14 @@
</li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
<li class="nav-item">
<a class="nav-link" href="./docs/index.html" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><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="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
</span>
<span class="nav-link-title">
Docs
Documentation
</span>
</a>
<ul class="dropdown-menu dropdown-menu-columns dropdown-menu-columns-3">
<li >
<a class="dropdown-item" href="./docs/index.html" >
Introduction
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/alerts.html" >
Alerts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/autosize.html" >
Autosize
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/avatars.html" >
Avatars
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/badges.html" >
Badges
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/breadcrumb.html" >
Breadcrumb
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/buttons.html" >
Buttons
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/cards.html" >
Cards
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/carousel.html" >
Carousel
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/colors.html" >
Colors
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/cursors.html" >
Cursors
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/charts.html" >
Charts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/dropdowns.html" >
Dropdowns
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/divider.html" >
Divider
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/empty.html" >
Empty states
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/flags.html" >
Flags
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/form-elements.html" >
Form elements
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/form-helpers.html" >
Form helpers
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/input-mask.html" >
Form input mask
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/modals.html" >
Modals
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/progress.html" >
Progress
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/payments.html" >
Payments
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/range-slider.html" >
Range slider
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/ribbons.html" >
Ribbons
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/skeleton.html" >
Skeleton
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/spinners.html" >
Spinners
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/steps.html" >
Steps
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tables.html" >
Tables
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tabs.html" >
Tabs
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/timelines.html" >
Timelines
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/toasts.html" >
Toasts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tooltips.html" >
Tooltips
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/typography.html" >
Typography
</a>
</li>
</ul>
</li>
</ul>
<div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
@@ -1668,7 +1501,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="https://github.com/tabler/tabler/releases" target="_blank" class="link-secondary">v1.0.0-alpha.10</a>
<a href="./changelog.html" class="link-secondary">v1.0.0-alpha.11</a>
</li>
</ul>
</div>

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.10
* @version 1.0.0-alpha.11
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -356,181 +356,14 @@
</li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
<li class="nav-item">
<a class="nav-link" href="./docs/index.html" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><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="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
</span>
<span class="nav-link-title">
Docs
Documentation
</span>
</a>
<ul class="dropdown-menu dropdown-menu-columns dropdown-menu-columns-3">
<li >
<a class="dropdown-item" href="./docs/index.html" >
Introduction
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/alerts.html" >
Alerts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/autosize.html" >
Autosize
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/avatars.html" >
Avatars
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/badges.html" >
Badges
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/breadcrumb.html" >
Breadcrumb
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/buttons.html" >
Buttons
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/cards.html" >
Cards
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/carousel.html" >
Carousel
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/colors.html" >
Colors
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/cursors.html" >
Cursors
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/charts.html" >
Charts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/dropdowns.html" >
Dropdowns
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/divider.html" >
Divider
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/empty.html" >
Empty states
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/flags.html" >
Flags
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/form-elements.html" >
Form elements
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/form-helpers.html" >
Form helpers
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/input-mask.html" >
Form input mask
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/modals.html" >
Modals
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/progress.html" >
Progress
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/payments.html" >
Payments
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/range-slider.html" >
Range slider
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/ribbons.html" >
Ribbons
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/skeleton.html" >
Skeleton
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/spinners.html" >
Spinners
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/steps.html" >
Steps
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tables.html" >
Tables
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tabs.html" >
Tabs
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/timelines.html" >
Timelines
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/toasts.html" >
Toasts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tooltips.html" >
Tooltips
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/typography.html" >
Typography
</a>
</li>
</ul>
</li>
</ul>
</div>
@@ -1652,7 +1485,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="https://github.com/tabler/tabler/releases" target="_blank" class="link-secondary">v1.0.0-alpha.10</a>
<a href="./changelog.html" class="link-secondary">v1.0.0-alpha.11</a>
</li>
</ul>
</div>

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.10
* @version 1.0.0-alpha.11
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -362,181 +362,14 @@
</li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
<li class="nav-item">
<a class="nav-link" href="./docs/index.html" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><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="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
</span>
<span class="nav-link-title">
Docs
Documentation
</span>
</a>
<ul class="dropdown-menu dropdown-menu-columns dropdown-menu-columns-3">
<li >
<a class="dropdown-item" href="./docs/index.html" >
Introduction
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/alerts.html" >
Alerts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/autosize.html" >
Autosize
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/avatars.html" >
Avatars
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/badges.html" >
Badges
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/breadcrumb.html" >
Breadcrumb
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/buttons.html" >
Buttons
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/cards.html" >
Cards
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/carousel.html" >
Carousel
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/colors.html" >
Colors
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/cursors.html" >
Cursors
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/charts.html" >
Charts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/dropdowns.html" >
Dropdowns
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/divider.html" >
Divider
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/empty.html" >
Empty states
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/flags.html" >
Flags
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/form-elements.html" >
Form elements
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/form-helpers.html" >
Form helpers
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/input-mask.html" >
Form input mask
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/modals.html" >
Modals
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/progress.html" >
Progress
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/payments.html" >
Payments
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/range-slider.html" >
Range slider
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/ribbons.html" >
Ribbons
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/skeleton.html" >
Skeleton
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/spinners.html" >
Spinners
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/steps.html" >
Steps
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tables.html" >
Tables
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tabs.html" >
Tabs
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/timelines.html" >
Timelines
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/toasts.html" >
Toasts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tooltips.html" >
Tooltips
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/typography.html" >
Typography
</a>
</li>
</ul>
</li>
</ul>
<div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
@@ -1668,7 +1501,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="https://github.com/tabler/tabler/releases" target="_blank" class="link-secondary">v1.0.0-alpha.10</a>
<a href="./changelog.html" class="link-secondary">v1.0.0-alpha.11</a>
</li>
</ul>
</div>

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.10
* @version 1.0.0-alpha.11
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -362,181 +362,14 @@
</li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
<li class="nav-item">
<a class="nav-link" href="./docs/index.html" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><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="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
</span>
<span class="nav-link-title">
Docs
Documentation
</span>
</a>
<ul class="dropdown-menu dropdown-menu-columns dropdown-menu-columns-3">
<li >
<a class="dropdown-item" href="./docs/index.html" >
Introduction
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/alerts.html" >
Alerts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/autosize.html" >
Autosize
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/avatars.html" >
Avatars
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/badges.html" >
Badges
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/breadcrumb.html" >
Breadcrumb
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/buttons.html" >
Buttons
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/cards.html" >
Cards
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/carousel.html" >
Carousel
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/colors.html" >
Colors
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/cursors.html" >
Cursors
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/charts.html" >
Charts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/dropdowns.html" >
Dropdowns
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/divider.html" >
Divider
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/empty.html" >
Empty states
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/flags.html" >
Flags
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/form-elements.html" >
Form elements
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/form-helpers.html" >
Form helpers
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/input-mask.html" >
Form input mask
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/modals.html" >
Modals
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/progress.html" >
Progress
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/payments.html" >
Payments
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/range-slider.html" >
Range slider
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/ribbons.html" >
Ribbons
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/skeleton.html" >
Skeleton
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/spinners.html" >
Spinners
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/steps.html" >
Steps
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tables.html" >
Tables
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tabs.html" >
Tabs
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/timelines.html" >
Timelines
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/toasts.html" >
Toasts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tooltips.html" >
Tooltips
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/typography.html" >
Typography
</a>
</li>
</ul>
</li>
</ul>
<div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
@@ -1668,7 +1501,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="https://github.com/tabler/tabler/releases" target="_blank" class="link-secondary">v1.0.0-alpha.10</a>
<a href="./changelog.html" class="link-secondary">v1.0.0-alpha.11</a>
</li>
</ul>
</div>

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.10
* @version 1.0.0-alpha.11
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -362,181 +362,14 @@
</li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
<li class="nav-item">
<a class="nav-link" href="./docs/index.html" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><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="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
</span>
<span class="nav-link-title">
Docs
Documentation
</span>
</a>
<ul class="dropdown-menu dropdown-menu-columns dropdown-menu-columns-3">
<li >
<a class="dropdown-item" href="./docs/index.html" >
Introduction
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/alerts.html" >
Alerts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/autosize.html" >
Autosize
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/avatars.html" >
Avatars
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/badges.html" >
Badges
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/breadcrumb.html" >
Breadcrumb
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/buttons.html" >
Buttons
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/cards.html" >
Cards
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/carousel.html" >
Carousel
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/colors.html" >
Colors
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/cursors.html" >
Cursors
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/charts.html" >
Charts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/dropdowns.html" >
Dropdowns
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/divider.html" >
Divider
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/empty.html" >
Empty states
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/flags.html" >
Flags
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/form-elements.html" >
Form elements
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/form-helpers.html" >
Form helpers
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/input-mask.html" >
Form input mask
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/modals.html" >
Modals
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/progress.html" >
Progress
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/payments.html" >
Payments
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/range-slider.html" >
Range slider
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/ribbons.html" >
Ribbons
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/skeleton.html" >
Skeleton
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/spinners.html" >
Spinners
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/steps.html" >
Steps
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tables.html" >
Tables
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tabs.html" >
Tabs
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/timelines.html" >
Timelines
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/toasts.html" >
Toasts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tooltips.html" >
Tooltips
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/typography.html" >
Typography
</a>
</li>
</ul>
</li>
</ul>
<div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
@@ -1668,7 +1501,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="https://github.com/tabler/tabler/releases" target="_blank" class="link-secondary">v1.0.0-alpha.10</a>
<a href="./changelog.html" class="link-secondary">v1.0.0-alpha.11</a>
</li>
</ul>
</div>

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.10
* @version 1.0.0-alpha.11
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -358,181 +358,14 @@
</li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
<li class="nav-item">
<a class="nav-link" href="./docs/index.html" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><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="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
</span>
<span class="nav-link-title">
Docs
Documentation
</span>
</a>
<ul class="dropdown-menu dropdown-menu-columns dropdown-menu-columns-3">
<li >
<a class="dropdown-item" href="./docs/index.html" >
Introduction
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/alerts.html" >
Alerts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/autosize.html" >
Autosize
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/avatars.html" >
Avatars
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/badges.html" >
Badges
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/breadcrumb.html" >
Breadcrumb
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/buttons.html" >
Buttons
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/cards.html" >
Cards
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/carousel.html" >
Carousel
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/colors.html" >
Colors
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/cursors.html" >
Cursors
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/charts.html" >
Charts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/dropdowns.html" >
Dropdowns
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/divider.html" >
Divider
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/empty.html" >
Empty states
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/flags.html" >
Flags
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/form-elements.html" >
Form elements
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/form-helpers.html" >
Form helpers
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/input-mask.html" >
Form input mask
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/modals.html" >
Modals
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/progress.html" >
Progress
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/payments.html" >
Payments
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/range-slider.html" >
Range slider
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/ribbons.html" >
Ribbons
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/skeleton.html" >
Skeleton
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/spinners.html" >
Spinners
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/steps.html" >
Steps
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tables.html" >
Tables
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tabs.html" >
Tabs
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/timelines.html" >
Timelines
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/toasts.html" >
Toasts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tooltips.html" >
Tooltips
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/typography.html" >
Typography
</a>
</li>
</ul>
</li>
</ul>
<div class="ml-md-auto pl-md-4 py-2 py-md-0 mr-md-4 order-first order-md-last flex-grow-1 flex-md-grow-0">
@@ -1664,7 +1497,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="https://github.com/tabler/tabler/releases" target="_blank" class="link-secondary">v1.0.0-alpha.10</a>
<a href="./changelog.html" class="link-secondary">v1.0.0-alpha.11</a>
</li>
</ul>
</div>

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.10
* @version 1.0.0-alpha.11
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -362,181 +362,14 @@
</li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
<li class="nav-item">
<a class="nav-link" href="./docs/index.html" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><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="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
</span>
<span class="nav-link-title">
Docs
Documentation
</span>
</a>
<ul class="dropdown-menu dropdown-menu-columns dropdown-menu-columns-3">
<li >
<a class="dropdown-item" href="./docs/index.html" >
Introduction
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/alerts.html" >
Alerts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/autosize.html" >
Autosize
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/avatars.html" >
Avatars
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/badges.html" >
Badges
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/breadcrumb.html" >
Breadcrumb
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/buttons.html" >
Buttons
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/cards.html" >
Cards
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/carousel.html" >
Carousel
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/colors.html" >
Colors
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/cursors.html" >
Cursors
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/charts.html" >
Charts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/dropdowns.html" >
Dropdowns
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/divider.html" >
Divider
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/empty.html" >
Empty states
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/flags.html" >
Flags
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/form-elements.html" >
Form elements
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/form-helpers.html" >
Form helpers
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/input-mask.html" >
Form input mask
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/modals.html" >
Modals
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/progress.html" >
Progress
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/payments.html" >
Payments
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/range-slider.html" >
Range slider
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/ribbons.html" >
Ribbons
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/skeleton.html" >
Skeleton
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/spinners.html" >
Spinners
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/steps.html" >
Steps
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tables.html" >
Tables
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tabs.html" >
Tabs
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/timelines.html" >
Timelines
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/toasts.html" >
Toasts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tooltips.html" >
Tooltips
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/typography.html" >
Typography
</a>
</li>
</ul>
</li>
</ul>
<div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
@@ -1668,7 +1501,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="https://github.com/tabler/tabler/releases" target="_blank" class="link-secondary">v1.0.0-alpha.10</a>
<a href="./changelog.html" class="link-secondary">v1.0.0-alpha.11</a>
</li>
</ul>
</div>

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.10
* @version 1.0.0-alpha.11
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -356,181 +356,14 @@
</li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
<li class="nav-item">
<a class="nav-link" href="./docs/index.html" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><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="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
</span>
<span class="nav-link-title">
Docs
Documentation
</span>
</a>
<ul class="dropdown-menu dropdown-menu-columns dropdown-menu-columns-3">
<li >
<a class="dropdown-item" href="./docs/index.html" >
Introduction
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/alerts.html" >
Alerts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/autosize.html" >
Autosize
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/avatars.html" >
Avatars
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/badges.html" >
Badges
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/breadcrumb.html" >
Breadcrumb
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/buttons.html" >
Buttons
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/cards.html" >
Cards
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/carousel.html" >
Carousel
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/colors.html" >
Colors
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/cursors.html" >
Cursors
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/charts.html" >
Charts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/dropdowns.html" >
Dropdowns
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/divider.html" >
Divider
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/empty.html" >
Empty states
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/flags.html" >
Flags
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/form-elements.html" >
Form elements
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/form-helpers.html" >
Form helpers
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/input-mask.html" >
Form input mask
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/modals.html" >
Modals
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/progress.html" >
Progress
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/payments.html" >
Payments
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/range-slider.html" >
Range slider
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/ribbons.html" >
Ribbons
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/skeleton.html" >
Skeleton
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/spinners.html" >
Spinners
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/steps.html" >
Steps
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tables.html" >
Tables
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tabs.html" >
Tabs
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/timelines.html" >
Timelines
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/toasts.html" >
Toasts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tooltips.html" >
Tooltips
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/typography.html" >
Typography
</a>
</li>
</ul>
</li>
</ul>
</div>
@@ -1652,7 +1485,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="https://github.com/tabler/tabler/releases" target="_blank" class="link-secondary">v1.0.0-alpha.10</a>
<a href="./changelog.html" class="link-secondary">v1.0.0-alpha.11</a>
</li>
</ul>
</div>

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.10
* @version 1.0.0-alpha.11
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -356,181 +356,14 @@
</li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
<li class="nav-item">
<a class="nav-link" href="./docs/index.html" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><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="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
</span>
<span class="nav-link-title">
Docs
Documentation
</span>
</a>
<ul class="dropdown-menu dropdown-menu-columns dropdown-menu-columns-3">
<li >
<a class="dropdown-item" href="./docs/index.html" >
Introduction
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/alerts.html" >
Alerts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/autosize.html" >
Autosize
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/avatars.html" >
Avatars
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/badges.html" >
Badges
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/breadcrumb.html" >
Breadcrumb
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/buttons.html" >
Buttons
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/cards.html" >
Cards
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/carousel.html" >
Carousel
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/colors.html" >
Colors
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/cursors.html" >
Cursors
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/charts.html" >
Charts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/dropdowns.html" >
Dropdowns
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/divider.html" >
Divider
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/empty.html" >
Empty states
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/flags.html" >
Flags
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/form-elements.html" >
Form elements
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/form-helpers.html" >
Form helpers
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/input-mask.html" >
Form input mask
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/modals.html" >
Modals
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/progress.html" >
Progress
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/payments.html" >
Payments
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/range-slider.html" >
Range slider
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/ribbons.html" >
Ribbons
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/skeleton.html" >
Skeleton
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/spinners.html" >
Spinners
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/steps.html" >
Steps
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tables.html" >
Tables
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tabs.html" >
Tabs
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/timelines.html" >
Timelines
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/toasts.html" >
Toasts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tooltips.html" >
Tooltips
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/typography.html" >
Typography
</a>
</li>
</ul>
</li>
</ul>
</div>
@@ -1652,7 +1485,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="https://github.com/tabler/tabler/releases" target="_blank" class="link-secondary">v1.0.0-alpha.10</a>
<a href="./changelog.html" class="link-secondary">v1.0.0-alpha.11</a>
</li>
</ul>
</div>

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.10
* @version 1.0.0-alpha.11
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -361,181 +361,14 @@
</li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
<li class="nav-item">
<a class="nav-link" href="./docs/index.html" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><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="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
</span>
<span class="nav-link-title">
Docs
Documentation
</span>
</a>
<ul class="dropdown-menu dropdown-menu-columns dropdown-menu-columns-3">
<li >
<a class="dropdown-item" href="./docs/index.html" >
Introduction
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/alerts.html" >
Alerts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/autosize.html" >
Autosize
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/avatars.html" >
Avatars
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/badges.html" >
Badges
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/breadcrumb.html" >
Breadcrumb
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/buttons.html" >
Buttons
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/cards.html" >
Cards
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/carousel.html" >
Carousel
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/colors.html" >
Colors
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/cursors.html" >
Cursors
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/charts.html" >
Charts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/dropdowns.html" >
Dropdowns
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/divider.html" >
Divider
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/empty.html" >
Empty states
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/flags.html" >
Flags
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/form-elements.html" >
Form elements
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/form-helpers.html" >
Form helpers
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/input-mask.html" >
Form input mask
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/modals.html" >
Modals
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/progress.html" >
Progress
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/payments.html" >
Payments
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/range-slider.html" >
Range slider
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/ribbons.html" >
Ribbons
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/skeleton.html" >
Skeleton
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/spinners.html" >
Spinners
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/steps.html" >
Steps
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tables.html" >
Tables
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tabs.html" >
Tabs
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/timelines.html" >
Timelines
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/toasts.html" >
Toasts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tooltips.html" >
Tooltips
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/typography.html" >
Typography
</a>
</li>
</ul>
</li>
</ul>
<div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
@@ -887,7 +720,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="https://github.com/tabler/tabler/releases" target="_blank" class="link-secondary">v1.0.0-alpha.10</a>
<a href="./changelog.html" class="link-secondary">v1.0.0-alpha.11</a>
</li>
</ul>
</div>

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.10
* @version 1.0.0-alpha.11
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -362,181 +362,14 @@
</li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
<li class="nav-item">
<a class="nav-link" href="./docs/index.html" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><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="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
</span>
<span class="nav-link-title">
Docs
Documentation
</span>
</a>
<ul class="dropdown-menu dropdown-menu-columns dropdown-menu-columns-3">
<li >
<a class="dropdown-item" href="./docs/index.html" >
Introduction
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/alerts.html" >
Alerts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/autosize.html" >
Autosize
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/avatars.html" >
Avatars
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/badges.html" >
Badges
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/breadcrumb.html" >
Breadcrumb
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/buttons.html" >
Buttons
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/cards.html" >
Cards
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/carousel.html" >
Carousel
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/colors.html" >
Colors
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/cursors.html" >
Cursors
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/charts.html" >
Charts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/dropdowns.html" >
Dropdowns
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/divider.html" >
Divider
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/empty.html" >
Empty states
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/flags.html" >
Flags
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/form-elements.html" >
Form elements
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/form-helpers.html" >
Form helpers
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/input-mask.html" >
Form input mask
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/modals.html" >
Modals
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/progress.html" >
Progress
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/payments.html" >
Payments
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/range-slider.html" >
Range slider
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/ribbons.html" >
Ribbons
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/skeleton.html" >
Skeleton
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/spinners.html" >
Spinners
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/steps.html" >
Steps
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tables.html" >
Tables
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tabs.html" >
Tabs
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/timelines.html" >
Timelines
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/toasts.html" >
Toasts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tooltips.html" >
Tooltips
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/typography.html" >
Typography
</a>
</li>
</ul>
</li>
</ul>
<div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
@@ -622,7 +455,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="https://github.com/tabler/tabler/releases" target="_blank" class="link-secondary">v1.0.0-alpha.10</a>
<a href="./changelog.html" class="link-secondary">v1.0.0-alpha.11</a>
</li>
</ul>
</div>

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.10
* @version 1.0.0-alpha.11
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -362,181 +362,14 @@
</li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
<li class="nav-item">
<a class="nav-link" href="./docs/index.html" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><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="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
</span>
<span class="nav-link-title">
Docs
Documentation
</span>
</a>
<ul class="dropdown-menu dropdown-menu-columns dropdown-menu-columns-3">
<li >
<a class="dropdown-item" href="./docs/index.html" >
Introduction
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/alerts.html" >
Alerts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/autosize.html" >
Autosize
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/avatars.html" >
Avatars
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/badges.html" >
Badges
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/breadcrumb.html" >
Breadcrumb
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/buttons.html" >
Buttons
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/cards.html" >
Cards
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/carousel.html" >
Carousel
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/colors.html" >
Colors
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/cursors.html" >
Cursors
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/charts.html" >
Charts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/dropdowns.html" >
Dropdowns
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/divider.html" >
Divider
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/empty.html" >
Empty states
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/flags.html" >
Flags
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/form-elements.html" >
Form elements
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/form-helpers.html" >
Form helpers
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/input-mask.html" >
Form input mask
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/modals.html" >
Modals
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/progress.html" >
Progress
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/payments.html" >
Payments
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/range-slider.html" >
Range slider
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/ribbons.html" >
Ribbons
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/skeleton.html" >
Skeleton
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/spinners.html" >
Spinners
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/steps.html" >
Steps
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tables.html" >
Tables
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tabs.html" >
Tabs
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/timelines.html" >
Timelines
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/toasts.html" >
Toasts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tooltips.html" >
Tooltips
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/typography.html" >
Typography
</a>
</li>
</ul>
</li>
</ul>
<div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
@@ -628,7 +461,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="https://github.com/tabler/tabler/releases" target="_blank" class="link-secondary">v1.0.0-alpha.10</a>
<a href="./changelog.html" class="link-secondary">v1.0.0-alpha.11</a>
</li>
</ul>
</div>

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.10
* @version 1.0.0-alpha.11
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -361,181 +361,14 @@
</li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
<li class="nav-item">
<a class="nav-link" href="./docs/index.html" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><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="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
</span>
<span class="nav-link-title">
Docs
Documentation
</span>
</a>
<ul class="dropdown-menu dropdown-menu-columns dropdown-menu-columns-3">
<li >
<a class="dropdown-item" href="./docs/index.html" >
Introduction
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/alerts.html" >
Alerts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/autosize.html" >
Autosize
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/avatars.html" >
Avatars
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/badges.html" >
Badges
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/breadcrumb.html" >
Breadcrumb
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/buttons.html" >
Buttons
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/cards.html" >
Cards
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/carousel.html" >
Carousel
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/colors.html" >
Colors
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/cursors.html" >
Cursors
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/charts.html" >
Charts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/dropdowns.html" >
Dropdowns
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/divider.html" >
Divider
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/empty.html" >
Empty states
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/flags.html" >
Flags
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/form-elements.html" >
Form elements
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/form-helpers.html" >
Form helpers
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/input-mask.html" >
Form input mask
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/modals.html" >
Modals
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/progress.html" >
Progress
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/payments.html" >
Payments
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/range-slider.html" >
Range slider
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/ribbons.html" >
Ribbons
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/skeleton.html" >
Skeleton
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/spinners.html" >
Spinners
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/steps.html" >
Steps
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tables.html" >
Tables
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tabs.html" >
Tabs
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/timelines.html" >
Timelines
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/toasts.html" >
Toasts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tooltips.html" >
Tooltips
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/typography.html" >
Typography
</a>
</li>
</ul>
</li>
</ul>
<div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
@@ -651,7 +484,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="https://github.com/tabler/tabler/releases" target="_blank" class="link-secondary">v1.0.0-alpha.10</a>
<a href="./changelog.html" class="link-secondary">v1.0.0-alpha.11</a>
</li>
</ul>
</div>

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.10
* @version 1.0.0-alpha.11
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -361,181 +361,14 @@
</li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
<li class="nav-item">
<a class="nav-link" href="./docs/index.html" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><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="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
</span>
<span class="nav-link-title">
Docs
Documentation
</span>
</a>
<ul class="dropdown-menu dropdown-menu-columns dropdown-menu-columns-3">
<li >
<a class="dropdown-item" href="./docs/index.html" >
Introduction
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/alerts.html" >
Alerts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/autosize.html" >
Autosize
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/avatars.html" >
Avatars
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/badges.html" >
Badges
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/breadcrumb.html" >
Breadcrumb
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/buttons.html" >
Buttons
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/cards.html" >
Cards
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/carousel.html" >
Carousel
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/colors.html" >
Colors
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/cursors.html" >
Cursors
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/charts.html" >
Charts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/dropdowns.html" >
Dropdowns
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/divider.html" >
Divider
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/empty.html" >
Empty states
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/flags.html" >
Flags
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/form-elements.html" >
Form elements
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/form-helpers.html" >
Form helpers
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/input-mask.html" >
Form input mask
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/modals.html" >
Modals
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/progress.html" >
Progress
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/payments.html" >
Payments
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/range-slider.html" >
Range slider
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/ribbons.html" >
Ribbons
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/skeleton.html" >
Skeleton
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/spinners.html" >
Spinners
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/steps.html" >
Steps
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tables.html" >
Tables
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tabs.html" >
Tabs
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/timelines.html" >
Timelines
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/toasts.html" >
Toasts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tooltips.html" >
Tooltips
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/typography.html" >
Typography
</a>
</li>
</ul>
</li>
</ul>
<div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
@@ -613,7 +446,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="https://github.com/tabler/tabler/releases" target="_blank" class="link-secondary">v1.0.0-alpha.10</a>
<a href="./changelog.html" class="link-secondary">v1.0.0-alpha.11</a>
</li>
</ul>
</div>

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.10
* @version 1.0.0-alpha.11
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -361,181 +361,14 @@
</li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
<li class="nav-item">
<a class="nav-link" href="./docs/index.html" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><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="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
</span>
<span class="nav-link-title">
Docs
Documentation
</span>
</a>
<ul class="dropdown-menu dropdown-menu-columns dropdown-menu-columns-3">
<li >
<a class="dropdown-item" href="./docs/index.html" >
Introduction
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/alerts.html" >
Alerts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/autosize.html" >
Autosize
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/avatars.html" >
Avatars
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/badges.html" >
Badges
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/breadcrumb.html" >
Breadcrumb
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/buttons.html" >
Buttons
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/cards.html" >
Cards
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/carousel.html" >
Carousel
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/colors.html" >
Colors
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/cursors.html" >
Cursors
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/charts.html" >
Charts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/dropdowns.html" >
Dropdowns
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/divider.html" >
Divider
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/empty.html" >
Empty states
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/flags.html" >
Flags
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/form-elements.html" >
Form elements
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/form-helpers.html" >
Form helpers
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/input-mask.html" >
Form input mask
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/modals.html" >
Modals
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/progress.html" >
Progress
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/payments.html" >
Payments
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/range-slider.html" >
Range slider
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/ribbons.html" >
Ribbons
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/skeleton.html" >
Skeleton
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/spinners.html" >
Spinners
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/steps.html" >
Steps
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tables.html" >
Tables
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tabs.html" >
Tabs
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/timelines.html" >
Timelines
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/toasts.html" >
Toasts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tooltips.html" >
Tooltips
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/typography.html" >
Typography
</a>
</li>
</ul>
</li>
</ul>
<div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
@@ -1150,7 +983,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="https://github.com/tabler/tabler/releases" target="_blank" class="link-secondary">v1.0.0-alpha.10</a>
<a href="./changelog.html" class="link-secondary">v1.0.0-alpha.11</a>
</li>
</ul>
</div>

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.10
* @version 1.0.0-alpha.11
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -361,181 +361,14 @@
</li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
<li class="nav-item">
<a class="nav-link" href="./docs/index.html" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><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="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
</span>
<span class="nav-link-title">
Docs
Documentation
</span>
</a>
<ul class="dropdown-menu dropdown-menu-columns dropdown-menu-columns-3">
<li >
<a class="dropdown-item" href="./docs/index.html" >
Introduction
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/alerts.html" >
Alerts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/autosize.html" >
Autosize
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/avatars.html" >
Avatars
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/badges.html" >
Badges
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/breadcrumb.html" >
Breadcrumb
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/buttons.html" >
Buttons
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/cards.html" >
Cards
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/carousel.html" >
Carousel
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/colors.html" >
Colors
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/cursors.html" >
Cursors
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/charts.html" >
Charts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/dropdowns.html" >
Dropdowns
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/divider.html" >
Divider
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/empty.html" >
Empty states
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/flags.html" >
Flags
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/form-elements.html" >
Form elements
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/form-helpers.html" >
Form helpers
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/input-mask.html" >
Form input mask
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/modals.html" >
Modals
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/progress.html" >
Progress
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/payments.html" >
Payments
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/range-slider.html" >
Range slider
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/ribbons.html" >
Ribbons
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/skeleton.html" >
Skeleton
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/spinners.html" >
Spinners
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/steps.html" >
Steps
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tables.html" >
Tables
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tabs.html" >
Tabs
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/timelines.html" >
Timelines
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/toasts.html" >
Toasts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tooltips.html" >
Tooltips
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/typography.html" >
Typography
</a>
</li>
</ul>
</li>
</ul>
<div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
@@ -1353,7 +1186,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="https://github.com/tabler/tabler/releases" target="_blank" class="link-secondary">v1.0.0-alpha.10</a>
<a href="./changelog.html" class="link-secondary">v1.0.0-alpha.11</a>
</li>
</ul>
</div>

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.10
* @version 1.0.0-alpha.11
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -361,181 +361,14 @@
</li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
<li class="nav-item">
<a class="nav-link" href="./docs/index.html" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><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="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
</span>
<span class="nav-link-title">
Docs
Documentation
</span>
</a>
<ul class="dropdown-menu dropdown-menu-columns dropdown-menu-columns-3">
<li >
<a class="dropdown-item" href="./docs/index.html" >
Introduction
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/alerts.html" >
Alerts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/autosize.html" >
Autosize
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/avatars.html" >
Avatars
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/badges.html" >
Badges
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/breadcrumb.html" >
Breadcrumb
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/buttons.html" >
Buttons
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/cards.html" >
Cards
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/carousel.html" >
Carousel
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/colors.html" >
Colors
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/cursors.html" >
Cursors
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/charts.html" >
Charts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/dropdowns.html" >
Dropdowns
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/divider.html" >
Divider
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/empty.html" >
Empty states
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/flags.html" >
Flags
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/form-elements.html" >
Form elements
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/form-helpers.html" >
Form helpers
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/input-mask.html" >
Form input mask
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/modals.html" >
Modals
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/progress.html" >
Progress
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/payments.html" >
Payments
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/range-slider.html" >
Range slider
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/ribbons.html" >
Ribbons
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/skeleton.html" >
Skeleton
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/spinners.html" >
Spinners
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/steps.html" >
Steps
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tables.html" >
Tables
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tabs.html" >
Tabs
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/timelines.html" >
Timelines
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/toasts.html" >
Toasts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tooltips.html" >
Tooltips
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/typography.html" >
Typography
</a>
</li>
</ul>
</li>
</ul>
<div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
@@ -659,7 +492,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="https://github.com/tabler/tabler/releases" target="_blank" class="link-secondary">v1.0.0-alpha.10</a>
<a href="./changelog.html" class="link-secondary">v1.0.0-alpha.11</a>
</li>
</ul>
</div>

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.10
* @version 1.0.0-alpha.11
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -361,181 +361,14 @@
</li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
<li class="nav-item">
<a class="nav-link" href="./docs/index.html" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><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="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
</span>
<span class="nav-link-title">
Docs
Documentation
</span>
</a>
<ul class="dropdown-menu dropdown-menu-columns dropdown-menu-columns-3">
<li >
<a class="dropdown-item" href="./docs/index.html" >
Introduction
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/alerts.html" >
Alerts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/autosize.html" >
Autosize
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/avatars.html" >
Avatars
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/badges.html" >
Badges
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/breadcrumb.html" >
Breadcrumb
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/buttons.html" >
Buttons
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/cards.html" >
Cards
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/carousel.html" >
Carousel
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/colors.html" >
Colors
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/cursors.html" >
Cursors
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/charts.html" >
Charts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/dropdowns.html" >
Dropdowns
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/divider.html" >
Divider
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/empty.html" >
Empty states
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/flags.html" >
Flags
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/form-elements.html" >
Form elements
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/form-helpers.html" >
Form helpers
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/input-mask.html" >
Form input mask
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/modals.html" >
Modals
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/progress.html" >
Progress
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/payments.html" >
Payments
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/range-slider.html" >
Range slider
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/ribbons.html" >
Ribbons
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/skeleton.html" >
Skeleton
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/spinners.html" >
Spinners
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/steps.html" >
Steps
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tables.html" >
Tables
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tabs.html" >
Tabs
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/timelines.html" >
Timelines
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/toasts.html" >
Toasts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tooltips.html" >
Tooltips
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/typography.html" >
Typography
</a>
</li>
</ul>
</li>
</ul>
<div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
@@ -707,7 +540,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="https://github.com/tabler/tabler/releases" target="_blank" class="link-secondary">v1.0.0-alpha.10</a>
<a href="./changelog.html" class="link-secondary">v1.0.0-alpha.11</a>
</li>
</ul>
</div>

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.10
* @version 1.0.0-alpha.11
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -361,181 +361,14 @@
</li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
<li class="nav-item">
<a class="nav-link" href="./docs/index.html" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><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="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
</span>
<span class="nav-link-title">
Docs
Documentation
</span>
</a>
<ul class="dropdown-menu dropdown-menu-columns dropdown-menu-columns-3">
<li >
<a class="dropdown-item" href="./docs/index.html" >
Introduction
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/alerts.html" >
Alerts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/autosize.html" >
Autosize
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/avatars.html" >
Avatars
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/badges.html" >
Badges
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/breadcrumb.html" >
Breadcrumb
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/buttons.html" >
Buttons
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/cards.html" >
Cards
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/carousel.html" >
Carousel
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/colors.html" >
Colors
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/cursors.html" >
Cursors
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/charts.html" >
Charts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/dropdowns.html" >
Dropdowns
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/divider.html" >
Divider
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/empty.html" >
Empty states
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/flags.html" >
Flags
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/form-elements.html" >
Form elements
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/form-helpers.html" >
Form helpers
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/input-mask.html" >
Form input mask
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/modals.html" >
Modals
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/progress.html" >
Progress
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/payments.html" >
Payments
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/range-slider.html" >
Range slider
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/ribbons.html" >
Ribbons
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/skeleton.html" >
Skeleton
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/spinners.html" >
Spinners
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/steps.html" >
Steps
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tables.html" >
Tables
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tabs.html" >
Tabs
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/timelines.html" >
Timelines
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/toasts.html" >
Toasts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tooltips.html" >
Tooltips
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/typography.html" >
Typography
</a>
</li>
</ul>
</li>
</ul>
<div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
@@ -1179,7 +1012,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="https://github.com/tabler/tabler/releases" target="_blank" class="link-secondary">v1.0.0-alpha.10</a>
<a href="./changelog.html" class="link-secondary">v1.0.0-alpha.11</a>
</li>
</ul>
</div>

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.10
* @version 1.0.0-alpha.11
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -361,181 +361,14 @@
</li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
<li class="nav-item">
<a class="nav-link" href="./docs/index.html" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><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="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
</span>
<span class="nav-link-title">
Docs
Documentation
</span>
</a>
<ul class="dropdown-menu dropdown-menu-columns dropdown-menu-columns-3">
<li >
<a class="dropdown-item" href="./docs/index.html" >
Introduction
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/alerts.html" >
Alerts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/autosize.html" >
Autosize
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/avatars.html" >
Avatars
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/badges.html" >
Badges
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/breadcrumb.html" >
Breadcrumb
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/buttons.html" >
Buttons
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/cards.html" >
Cards
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/carousel.html" >
Carousel
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/colors.html" >
Colors
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/cursors.html" >
Cursors
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/charts.html" >
Charts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/dropdowns.html" >
Dropdowns
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/divider.html" >
Divider
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/empty.html" >
Empty states
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/flags.html" >
Flags
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/form-elements.html" >
Form elements
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/form-helpers.html" >
Form helpers
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/input-mask.html" >
Form input mask
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/modals.html" >
Modals
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/progress.html" >
Progress
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/payments.html" >
Payments
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/range-slider.html" >
Range slider
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/ribbons.html" >
Ribbons
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/skeleton.html" >
Skeleton
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/spinners.html" >
Spinners
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/steps.html" >
Steps
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tables.html" >
Tables
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tabs.html" >
Tabs
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/timelines.html" >
Timelines
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/toasts.html" >
Toasts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tooltips.html" >
Tooltips
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/typography.html" >
Typography
</a>
</li>
</ul>
</li>
</ul>
<div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
@@ -775,7 +608,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="https://github.com/tabler/tabler/releases" target="_blank" class="link-secondary">v1.0.0-alpha.10</a>
<a href="./changelog.html" class="link-secondary">v1.0.0-alpha.11</a>
</li>
</ul>
</div>

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.10
* @version 1.0.0-alpha.11
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -38,8 +38,8 @@
<body class="antialiased border-top-wide border-primary d-flex flex-column">
<div class="flex-fill d-flex flex-column justify-content-center">
<div class="container-tight py-6">
<div class="text-center mb-4">
<img src="./static/logo.svg" height="36" alt="">
<div class="text-center mb-5">
<a href="."><img src="./static/logo.svg" height="36" alt=""></a>
</div>
<form class="card card-md" action="." method="get">
<div class="card-body">
@@ -87,7 +87,7 @@
</div>
</div>
</form>
<div class="text-center text-muted">
<div class="text-center text-muted mt">
Don't have account yet? <a href="./sign-up.html" tabindex="-1">Sign up</a>
</div>
</div>

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.10
* @version 1.0.0-alpha.11
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -38,8 +38,8 @@
<body class="antialiased border-top-wide border-primary d-flex flex-column">
<div class="flex-fill d-flex flex-column justify-content-center">
<div class="container-tight py-6">
<div class="text-center mb-4">
<img src="./static/logo.svg" height="36" alt="">
<div class="text-center mb-5">
<a href="."><img src="./static/logo.svg" height="36" alt=""></a>
</div>
<form class="card card-md" action="." method="get">
<div class="card-body">
@@ -73,7 +73,7 @@
</div>
</div>
</form>
<div class="text-center text-muted">
<div class="text-center text-muted mt">
Already have account? <a href="./sign-in.html" tabindex="-1">Sign in</a>
</div>
</div>

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.10
* @version 1.0.0-alpha.11
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -361,181 +361,14 @@
</li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
<li class="nav-item">
<a class="nav-link" href="./docs/index.html" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><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="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
</span>
<span class="nav-link-title">
Docs
Documentation
</span>
</a>
<ul class="dropdown-menu dropdown-menu-columns dropdown-menu-columns-3">
<li >
<a class="dropdown-item" href="./docs/index.html" >
Introduction
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/alerts.html" >
Alerts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/autosize.html" >
Autosize
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/avatars.html" >
Avatars
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/badges.html" >
Badges
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/breadcrumb.html" >
Breadcrumb
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/buttons.html" >
Buttons
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/cards.html" >
Cards
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/carousel.html" >
Carousel
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/colors.html" >
Colors
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/cursors.html" >
Cursors
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/charts.html" >
Charts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/dropdowns.html" >
Dropdowns
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/divider.html" >
Divider
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/empty.html" >
Empty states
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/flags.html" >
Flags
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/form-elements.html" >
Form elements
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/form-helpers.html" >
Form helpers
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/input-mask.html" >
Form input mask
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/modals.html" >
Modals
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/progress.html" >
Progress
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/payments.html" >
Payments
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/range-slider.html" >
Range slider
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/ribbons.html" >
Ribbons
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/skeleton.html" >
Skeleton
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/spinners.html" >
Spinners
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/steps.html" >
Steps
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tables.html" >
Tables
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tabs.html" >
Tabs
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/timelines.html" >
Timelines
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/toasts.html" >
Toasts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tooltips.html" >
Tooltips
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/typography.html" >
Typography
</a>
</li>
</ul>
</li>
</ul>
<div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
@@ -781,7 +614,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="https://github.com/tabler/tabler/releases" target="_blank" class="link-secondary">v1.0.0-alpha.10</a>
<a href="./changelog.html" class="link-secondary">v1.0.0-alpha.11</a>
</li>
</ul>
</div>

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.10
* @version 1.0.0-alpha.11
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -361,181 +361,14 @@
</li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
<li class="nav-item">
<a class="nav-link" href="./docs/index.html" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><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="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
</span>
<span class="nav-link-title">
Docs
Documentation
</span>
</a>
<ul class="dropdown-menu dropdown-menu-columns dropdown-menu-columns-3">
<li >
<a class="dropdown-item" href="./docs/index.html" >
Introduction
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/alerts.html" >
Alerts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/autosize.html" >
Autosize
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/avatars.html" >
Avatars
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/badges.html" >
Badges
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/breadcrumb.html" >
Breadcrumb
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/buttons.html" >
Buttons
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/cards.html" >
Cards
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/carousel.html" >
Carousel
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/colors.html" >
Colors
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/cursors.html" >
Cursors
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/charts.html" >
Charts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/dropdowns.html" >
Dropdowns
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/divider.html" >
Divider
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/empty.html" >
Empty states
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/flags.html" >
Flags
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/form-elements.html" >
Form elements
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/form-helpers.html" >
Form helpers
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/input-mask.html" >
Form input mask
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/modals.html" >
Modals
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/progress.html" >
Progress
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/payments.html" >
Payments
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/range-slider.html" >
Range slider
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/ribbons.html" >
Ribbons
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/skeleton.html" >
Skeleton
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/spinners.html" >
Spinners
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/steps.html" >
Steps
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tables.html" >
Tables
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tabs.html" >
Tabs
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/timelines.html" >
Timelines
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/toasts.html" >
Toasts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tooltips.html" >
Tooltips
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/typography.html" >
Typography
</a>
</li>
</ul>
</li>
</ul>
<div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
@@ -1246,7 +1079,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="https://github.com/tabler/tabler/releases" target="_blank" class="link-secondary">v1.0.0-alpha.10</a>
<a href="./changelog.html" class="link-secondary">v1.0.0-alpha.11</a>
</li>
</ul>
</div>

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.10
* @version 1.0.0-alpha.11
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -361,181 +361,14 @@
</li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
<li class="nav-item">
<a class="nav-link" href="./docs/index.html" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><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="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
</span>
<span class="nav-link-title">
Docs
Documentation
</span>
</a>
<ul class="dropdown-menu dropdown-menu-columns dropdown-menu-columns-3">
<li >
<a class="dropdown-item" href="./docs/index.html" >
Introduction
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/alerts.html" >
Alerts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/autosize.html" >
Autosize
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/avatars.html" >
Avatars
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/badges.html" >
Badges
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/breadcrumb.html" >
Breadcrumb
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/buttons.html" >
Buttons
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/cards.html" >
Cards
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/carousel.html" >
Carousel
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/colors.html" >
Colors
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/cursors.html" >
Cursors
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/charts.html" >
Charts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/dropdowns.html" >
Dropdowns
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/divider.html" >
Divider
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/empty.html" >
Empty states
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/flags.html" >
Flags
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/form-elements.html" >
Form elements
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/form-helpers.html" >
Form helpers
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/input-mask.html" >
Form input mask
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/modals.html" >
Modals
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/progress.html" >
Progress
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/payments.html" >
Payments
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/range-slider.html" >
Range slider
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/ribbons.html" >
Ribbons
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/skeleton.html" >
Skeleton
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/spinners.html" >
Spinners
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/steps.html" >
Steps
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tables.html" >
Tables
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tabs.html" >
Tabs
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/timelines.html" >
Timelines
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/toasts.html" >
Toasts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tooltips.html" >
Tooltips
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/typography.html" >
Typography
</a>
</li>
</ul>
</li>
</ul>
<div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
@@ -602,7 +435,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="https://github.com/tabler/tabler/releases" target="_blank" class="link-secondary">v1.0.0-alpha.10</a>
<a href="./changelog.html" class="link-secondary">v1.0.0-alpha.11</a>
</li>
</ul>
</div>

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.10
* @version 1.0.0-alpha.11
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -361,181 +361,14 @@
</li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
<li class="nav-item">
<a class="nav-link" href="./docs/index.html" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><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="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
</span>
<span class="nav-link-title">
Docs
Documentation
</span>
</a>
<ul class="dropdown-menu dropdown-menu-columns dropdown-menu-columns-3">
<li >
<a class="dropdown-item" href="./docs/index.html" >
Introduction
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/alerts.html" >
Alerts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/autosize.html" >
Autosize
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/avatars.html" >
Avatars
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/badges.html" >
Badges
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/breadcrumb.html" >
Breadcrumb
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/buttons.html" >
Buttons
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/cards.html" >
Cards
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/carousel.html" >
Carousel
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/colors.html" >
Colors
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/cursors.html" >
Cursors
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/charts.html" >
Charts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/dropdowns.html" >
Dropdowns
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/divider.html" >
Divider
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/empty.html" >
Empty states
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/flags.html" >
Flags
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/form-elements.html" >
Form elements
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/form-helpers.html" >
Form helpers
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/input-mask.html" >
Form input mask
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/modals.html" >
Modals
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/progress.html" >
Progress
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/payments.html" >
Payments
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/range-slider.html" >
Range slider
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/ribbons.html" >
Ribbons
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/skeleton.html" >
Skeleton
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/spinners.html" >
Spinners
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/steps.html" >
Steps
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tables.html" >
Tables
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tabs.html" >
Tabs
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/timelines.html" >
Timelines
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/toasts.html" >
Toasts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tooltips.html" >
Tooltips
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/typography.html" >
Typography
</a>
</li>
</ul>
</li>
</ul>
<div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
@@ -1409,7 +1242,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="https://github.com/tabler/tabler/releases" target="_blank" class="link-secondary">v1.0.0-alpha.10</a>
<a href="./changelog.html" class="link-secondary">v1.0.0-alpha.11</a>
</li>
</ul>
</div>

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.10
* @version 1.0.0-alpha.11
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -361,181 +361,14 @@
</li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
<li class="nav-item">
<a class="nav-link" href="./docs/index.html" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><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="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
</span>
<span class="nav-link-title">
Docs
Documentation
</span>
</a>
<ul class="dropdown-menu dropdown-menu-columns dropdown-menu-columns-3">
<li >
<a class="dropdown-item" href="./docs/index.html" >
Introduction
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/alerts.html" >
Alerts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/autosize.html" >
Autosize
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/avatars.html" >
Avatars
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/badges.html" >
Badges
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/breadcrumb.html" >
Breadcrumb
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/buttons.html" >
Buttons
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/cards.html" >
Cards
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/carousel.html" >
Carousel
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/colors.html" >
Colors
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/cursors.html" >
Cursors
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/charts.html" >
Charts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/dropdowns.html" >
Dropdowns
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/divider.html" >
Divider
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/empty.html" >
Empty states
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/flags.html" >
Flags
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/form-elements.html" >
Form elements
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/form-helpers.html" >
Form helpers
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/input-mask.html" >
Form input mask
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/modals.html" >
Modals
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/progress.html" >
Progress
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/payments.html" >
Payments
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/range-slider.html" >
Range slider
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/ribbons.html" >
Ribbons
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/skeleton.html" >
Skeleton
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/spinners.html" >
Spinners
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/steps.html" >
Steps
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tables.html" >
Tables
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tabs.html" >
Tabs
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/timelines.html" >
Timelines
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/toasts.html" >
Toasts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tooltips.html" >
Tooltips
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/typography.html" >
Typography
</a>
</li>
</ul>
</li>
</ul>
<div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
@@ -894,7 +727,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="https://github.com/tabler/tabler/releases" target="_blank" class="link-secondary">v1.0.0-alpha.10</a>
<a href="./changelog.html" class="link-secondary">v1.0.0-alpha.11</a>
</li>
</ul>
</div>

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.10
* @version 1.0.0-alpha.11
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -361,181 +361,14 @@
</li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
<li class="nav-item">
<a class="nav-link" href="./docs/index.html" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><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="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
</span>
<span class="nav-link-title">
Docs
Documentation
</span>
</a>
<ul class="dropdown-menu dropdown-menu-columns dropdown-menu-columns-3">
<li >
<a class="dropdown-item" href="./docs/index.html" >
Introduction
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/alerts.html" >
Alerts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/autosize.html" >
Autosize
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/avatars.html" >
Avatars
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/badges.html" >
Badges
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/breadcrumb.html" >
Breadcrumb
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/buttons.html" >
Buttons
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/cards.html" >
Cards
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/carousel.html" >
Carousel
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/colors.html" >
Colors
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/cursors.html" >
Cursors
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/charts.html" >
Charts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/dropdowns.html" >
Dropdowns
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/divider.html" >
Divider
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/empty.html" >
Empty states
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/flags.html" >
Flags
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/form-elements.html" >
Form elements
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/form-helpers.html" >
Form helpers
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/input-mask.html" >
Form input mask
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/modals.html" >
Modals
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/progress.html" >
Progress
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/payments.html" >
Payments
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/range-slider.html" >
Range slider
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/ribbons.html" >
Ribbons
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/skeleton.html" >
Skeleton
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/spinners.html" >
Spinners
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/steps.html" >
Steps
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tables.html" >
Tables
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tabs.html" >
Tabs
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/timelines.html" >
Timelines
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/toasts.html" >
Toasts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tooltips.html" >
Tooltips
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/typography.html" >
Typography
</a>
</li>
</ul>
</li>
</ul>
<div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
@@ -846,7 +679,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="https://github.com/tabler/tabler/releases" target="_blank" class="link-secondary">v1.0.0-alpha.10</a>
<a href="./changelog.html" class="link-secondary">v1.0.0-alpha.11</a>
</li>
</ul>
</div>

Some files were not shown because too many files have changed in this diff Show More