1
0
mirror of https://github.com/tabler/tabler.git synced 2025-12-26 11:16:12 +04:00

build, demo, editorconfig fixes, flat fallback

This commit is contained in:
codecalm
2019-12-18 21:45:53 +01:00
parent 06bd29b3dd
commit 60d22b56a1
772 changed files with 53656 additions and 77889 deletions

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-alpha
* @version v1.0.0-alpha
* @link https://github.com/tabler/tabler
* Copyright 2018-2019 The Tabler Authors
* Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -26,407 +26,528 @@
<title>Autosize - Documentation - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
<meta name="description" content="A small, stand-alone script to automatically adjust textarea height."/>
<!-- Libs CSS -->
<link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1576401968" rel="stylesheet"/>
<link href="../dist/libs/selectize/dist/css/selectize.css?1576401968" rel="stylesheet"/>
<link href="../dist/libs/fullcalendar/core/main.min.css?1576401968" rel="stylesheet"/>
<link href="../dist/libs/fullcalendar/daygrid/main.min.css?1576401968" rel="stylesheet"/>
<link href="../dist/libs/fullcalendar/timegrid/main.min.css?1576401968" rel="stylesheet"/>
<link href="../dist/libs/fullcalendar/list/main.min.css?1576401968" rel="stylesheet"/>
<link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1576701882" rel="stylesheet"/>
<link href="../dist/libs/selectize/dist/css/selectize.css?1576701882" rel="stylesheet"/>
<link href="../dist/libs/fullcalendar/core/main.min.css?1576701882" rel="stylesheet"/>
<link href="../dist/libs/fullcalendar/daygrid/main.min.css?1576701882" rel="stylesheet"/>
<link href="../dist/libs/fullcalendar/timegrid/main.min.css?1576701882" rel="stylesheet"/>
<link href="../dist/libs/fullcalendar/list/main.min.css?1576701882" rel="stylesheet"/>
<!-- Tabler Core -->
<link href="../dist/css/tabler.min.css?1576401968" rel="stylesheet"/>
<link href="../dist/css/tabler.min.css?1576701882" rel="stylesheet"/>
<!-- Tabler Plugins -->
<link href="../dist/css/tabler-flags.min.css?1576401968" rel="stylesheet"/>
<link href="../dist/css/tabler-charts.min.css?1576401968" rel="stylesheet"/>
<link href="../dist/css/tabler-flags.min.css?1576701882" rel="stylesheet"/>
<link href="../dist/css/tabler-charts.min.css?1576701882" rel="stylesheet"/>
<style>
body { display: none; }
</style>
</head>
<body class="antialiased ">
<div class="layout">
<header class="layout-area-topnav navbar navbar-expand-lg navbar-light">
<div class="container">
<a class="layout-toggler" data-toggle="menubar">
<span class="layout-toggler-icon"></span>
</a>
<a href=".." class="navbar-brand text-reset mr-md-3">
<img src="../img/logo.svg" alt="Tabler" class="d-none d-md-block navbar-brand-logo">
<img src="../img/logo-small.svg" alt="Tabler" class="d-md-none navbar-brand-logo">
</a>
<ul class="nav navbar-menu align-items-center order-1 order-lg-2">
<li class="nav-item dropdown mr-3">
<a class="nav-link text-reset px-2" data-toggle="dropdown">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
<span class="badge badge-pill badge-up bg-primary">4</span>
<body class="antialiased">
<div class="wrapper">
<div class="content">
<header class="topnav topbar">
<div class="container">
<div class="navbar navbar-expand-lg navbar-light">
<a href=".." class="navbar-brand mr-4">
<img src="../img/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-lg">
<img src="../img/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-sm">
</a>
<div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right mt-3 p-0">
<div class="scrollable">
<div class="list list-row">
</div>
</div>
<div class="d-flex px-3 py-2 b-t">
<div class="flex">
<span>6 Notifications</span>
</div>
<a href="#">See all <i class="fa fa-angle-right text-muted"></i></a>
</div>
</div>
</li>
<li class="nav-item d-none d-lg-flex mr-3">
<a href="https://github.com/tabler/tabler" class="btn btn-sm btn-success" target="_blank">Source code</a>
</li>
<li class="nav-item dropdown">
<a href="#" data-toggle="dropdown"
<ul class="nav navbar-menu align-items-center ml-auto">
<li class="nav-item d-none d-lg-flex mr-3">
<a href="https://github.com/tabler/tabler" class="btn btn-sm btn-success" target="_blank">Source code</a>
</li>
<li class="nav-item dropdown">
<a href="#" data-toggle="dropdown"
class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
<span class="avatar" style="background-image: url(../img/avatars/000m.jpg)"></span>
<span class="ml-2 d-none d-lg-block leading-none">
Paweł Kuna
<span class="text-muted d-block mt-1 text-h6">Administrator</span>
</span>
</a>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
Profile
</a>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
Settings
</a>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
Inbox
<span class="badge bg-primary ml-auto">6</span>
</a>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
Message
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
Need help?
</a>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
Sign out
</a>
</div>
</li>
</ul>
</div>
</header>
<div class="layout-area-menu navbar navbar-expand-lg navbar-light">
<div class="container">
<ul class="navbar-nav flex-wrap">
<li class="nav-item">
<a class="nav-link" href="../index.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
</span>
<span class="nav-text">
Dashboard
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../form-elements.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
</span>
<span class="nav-text">
Form elements
</span>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
<span class="avatar" style="background-image: url(../img/avatars/004f.jpg)"></span>
<span class="ml-2 d-none d-lg-block leading-none">
Leesa Beaty
<span class="text-muted d-block mt-1 text-h6">Administrator</span>
</span>
</a>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
Profile
</a>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
Settings
</a>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
Inbox
<span class="badge bg-primary ml-auto">6</span>
</a>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
Message
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
Need help?
</a>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
Sign out
</a>
</div>
</li>
</ul>
</div>
</div>
</header>
<header class="topnav topbar">
<div class="navbar navbar-expand-lg navbar-light">
<div class="container">
<ul class="navbar-nav flex-wrap">
<li class="nav-item">
<a class="nav-link" href="../index.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
</span>
<span class="nav-text">
Dashboard
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../form-elements.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
</span>
<span class="nav-text">
Form elements
</span>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-error" data-toggle="dropdown" role="button"
aria-expanded="false" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
</span>
<span class="nav-text">
Base
</span>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="../buttons.html" >
<span class="nav-text">
Buttons
</span>
</a>
<a class="dropdown-item" href="../cards.html" >
<span class="nav-text">
Cards
</span>
</a>
<a class="dropdown-item" href="../c.html" >
<span class="nav-text">
C
</span>
</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="../charts.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
</span>
<span class="nav-text">
Charts
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../calendar.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
</span>
<span class="nav-text">
Calendar
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../users.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
</span>
<span class="nav-text">
Users
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../gallery.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
</span>
<span class="nav-text">
Gallery
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../layouts.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
</span>
<span class="nav-text">
Layouts
</span>
</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="../docs/index.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
</span>
<span class="nav-text">
Documentation
</span>
</a>
</li>
</ul>
</div>
</div>
<div class="layout-area-menu-backdrop" data-toggle="menubar"></div>
<div class="layout-area-main">
<main class="container my-4 flex-fill">
<!-- Page title -->
<div class="page-title-box">
<div class="row align-items-center">
<div class="col-auto">
<h2 class="page-title">
Documentation
</h2>
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="9" y1="15" x2="15" y2="15"></line></svg>
</span>
<span class="nav-text">
Error pages
</span>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="../400.html" >
<span class="nav-text">
400 page
</span>
</a>
<a class="dropdown-item" href="../401.html" >
<span class="nav-text">
401 page
</span>
</a>
<a class="dropdown-item" href="../403.html" >
<span class="nav-text">
403 page
</span>
</a>
<a class="dropdown-item" href="../404.html" >
<span class="nav-text">
404 page
</span>
</a>
<a class="dropdown-item" href="../500.html" >
<span class="nav-text">
500 page
</span>
</a>
<a class="dropdown-item" href="../503.html" >
<span class="nav-text">
503 page
</span>
</a>
<a class="dropdown-item" href="../maintenance.html" >
<span class="nav-text">
Maintenance page
</span>
</a>
</div>
</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-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
</span>
<span class="nav-text">
Base
</span>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="../buttons.html" >
<span class="nav-text">
Buttons
</span>
</a>
<a class="dropdown-item" href="../cards.html" >
<span class="nav-text">
Cards
</span>
</a>
<a class="dropdown-item" href="../calendar.html" >
<span class="nav-text">
Calendar
</span>
</a>
<a class="dropdown-item" href="../users.html" >
<span class="nav-text">
Users
</span>
</a>
<a class="dropdown-item" href="../gallery.html" >
<span class="nav-text">
Gallery
</span>
</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="../charts.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
</span>
<span class="nav-text">
Charts
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../layouts.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
</span>
<span class="nav-text">
Layouts
</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-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
</span>
<span class="nav-text">
Extra
</span>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="../invoice.html" >
<span class="nav-text">
Invoice
</span>
</a>
</div>
</li>
<li class="nav-item active dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
aria-expanded="true" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
</span>
<span class="nav-text">
Documentation
</span>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="../docs/index.html" >
<span class="nav-text">
index
</span>
</a>
<a class="dropdown-item" href="../docs/alerts.html" >
<span class="nav-text">
Alerts
</span>
</a>
<a class="dropdown-item" href="../docs/autosize.html" >
<span class="nav-text">
Autosize
</span>
</a>
<a class="dropdown-item" href="../docs/avatars.html" >
<span class="nav-text">
Avatars
</span>
</a>
<a class="dropdown-item" href="../docs/badges.html" >
<span class="nav-text">
Badges
</span>
</a>
<a class="dropdown-item" href="../docs/breadcrumb.html" >
<span class="nav-text">
Breadcrumb
</span>
</a>
<a class="dropdown-item" href="../docs/buttons.html" >
<span class="nav-text">
Buttons
</span>
</a>
<a class="dropdown-item" href="../docs/cards.html" >
<span class="nav-text">
Cards
</span>
</a>
<a class="dropdown-item" href="../docs/carousel.html" >
<span class="nav-text">
Carousel
</span>
</a>
<a class="dropdown-item" href="../docs/colors.html" >
<span class="nav-text">
Colors
</span>
</a>
<a class="dropdown-item" href="../docs/cursors.html" >
<span class="nav-text">
Cursors
</span>
</a>
<a class="dropdown-item" href="../docs/charts.html" >
<span class="nav-text">
Charts
</span>
</a>
<a class="dropdown-item" href="../docs/divider.html" >
<span class="nav-text">
Divider
</span>
</a>
<a class="dropdown-item" href="../docs/empty.html" >
<span class="nav-text">
Empty states
</span>
</a>
<a class="dropdown-item" href="../docs/flags.html" >
<span class="nav-text">
Flags
</span>
</a>
<a class="dropdown-item" href="../docs/form-elements.html" >
<span class="nav-text">
Form elements
</span>
</a>
<a class="dropdown-item" href="../docs/form-helpers.html" >
<span class="nav-text">
Form helpers
</span>
</a>
<a class="dropdown-item" href="../docs/input-mask.html" >
<span class="nav-text">
Form input mask
</span>
</a>
<a class="dropdown-item" href="../docs/progress.html" >
<span class="nav-text">
Progress
</span>
</a>
<a class="dropdown-item" href="../docs/ribbons.html" >
<span class="nav-text">
Ribbons
</span>
</a>
<a class="dropdown-item" href="../docs/spinners.html" >
<span class="nav-text">
Spinners
</span>
</a>
<a class="dropdown-item" href="../docs/steps.html" >
<span class="nav-text">
Steps
</span>
</a>
<a class="dropdown-item" href="../docs/tables.html" >
<span class="nav-text">
Tables
</span>
</a>
<a class="dropdown-item" href="../docs/tabs.html" >
<span class="nav-text">
Tabs
</span>
</a>
<a class="dropdown-item" href="../docs/timelines.html" >
<span class="nav-text">
Timelines
</span>
</a>
<a class="dropdown-item" href="../docs/toasts.html" >
<span class="nav-text">
Toasts
</span>
</a>
<a class="dropdown-item" href="../docs/tooltips.html" >
<span class="nav-text">
Tooltips
</span>
</a>
<a class="dropdown-item" href="../docs/typography.html" >
<span class="nav-text">
Typography
</span>
</a>
</div>
</li>
</ul>
<div class="navbar-search d-none d-lg-block">
<form action="." method="get">
<div class="input-icon">
<span class="input-icon-addon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
</span>
<input type="text" class="form-control form-control-light" placeholder="Search for&hellip;">
</div>
</form>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-lg-3 order-lg-1 mb-4">
<a href="https://github.com/tabler/tabler" class="btn btn-block btn-primary mb-4" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon mr-2"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>
Browse source code
</a>
<div class="list-group list-group-transparent mb-0">
<a href="../docs/index.html"
class="list-group-item list-group-item-action">
Introduction
</a>
<a href="../docs/alerts.html"
class="list-group-item list-group-item-action">
Alerts <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
</a>
<a href="../docs/autosize.html"
class="list-group-item list-group-item-action active">
Autosize <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
</a>
<a href="../docs/avatars.html"
class="list-group-item list-group-item-action">
Avatars <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
</a>
<a href="../docs/badges.html"
class="list-group-item list-group-item-action">
Badges <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
</a>
<a href="../docs/breadcrumb.html"
class="list-group-item list-group-item-action">
Breadcrumb <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
</a>
<a href="../docs/buttons.html"
class="list-group-item list-group-item-action">
Buttons <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
</a>
<a href="../docs/cards.html"
class="list-group-item list-group-item-action">
Cards <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
</a>
<a href="../docs/carousel.html"
class="list-group-item list-group-item-action">
Carousel
</a>
<a href="../docs/colors.html"
class="list-group-item list-group-item-action">
Colors <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
</a>
<a href="../docs/cursors.html"
class="list-group-item list-group-item-action">
Cursors
</a>
<a href="../docs/charts.html"
class="list-group-item list-group-item-action">
Charts
</a>
<a href="../docs/divider.html"
class="list-group-item list-group-item-action">
Divider <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
</a>
<a href="../docs/empty.html"
class="list-group-item list-group-item-action">
Empty states
</a>
<a href="../docs/flags.html"
class="list-group-item list-group-item-action">
Flags <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
</a>
<a href="../docs/form-elements.html"
class="list-group-item list-group-item-action">
Form Elements
</a>
<a href="../docs/form-helpers.html"
class="list-group-item list-group-item-action">
Form helpers
</a>
<a href="../docs/input-mask.html"
class="list-group-item list-group-item-action">
Input mask
</a>
<a href="../docs/progress.html"
class="list-group-item list-group-item-action">
Progress
</a>
<a href="../docs/ribbons.html"
class="list-group-item list-group-item-action">
Ribbons
</a>
<a href="../docs/spinners.html"
class="list-group-item list-group-item-action">
Spinners <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
</a>
<a href="../docs/steps.html"
class="list-group-item list-group-item-action">
Steps
</a>
<a href="../docs/tables.html"
class="list-group-item list-group-item-action">
Tables
</a>
<a href="../docs/tabs.html"
class="list-group-item list-group-item-action">
Tabs
</a>
<a href="../docs/timelines.html"
class="list-group-item list-group-item-action">
Timelines
</a>
<a href="../docs/toasts.html"
class="list-group-item list-group-item-action">
Toasts
</a>
<a href="../docs/tooltips.html"
class="list-group-item list-group-item-action">
Tooltips
</a>
<a href="../docs/typography.html"
class="list-group-item list-group-item-action">
Typography
</a>
</header>
<div class="content-page">
<main class="container my-4 flex-fill">
<!-- Page title -->
<div class="page-title-box">
<div class="row align-items-center">
<div class="col-auto">
<h2 class="page-title">
Documentation
</h2>
</div>
</div>
</div>
<div class="col-lg-9">
<div class="card">
<div class="card-body p-md-6 p-xl-7">
<div class="markdown">
<h2 class="h1 mt-0 mb-3">Autosize
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
</h2>
<p>A small, stand-alone script to automatically adjust textarea height.</p>
<h3 id="default-markup">Default markup</h3>
<div class="example">
<label class="form-label">Autosize example</label>
<textarea class="form-control" data-toggle="autosize" placeholder="Typing something&hellip;"></textarea>
</div>
<div class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">&gt;</span>Autosize example<span class="nt">&lt;/label&gt;</span>
<div class="row justify-content-center">
<div class="col-lg-3 order-lg-1 mb-4">
<a href="https://github.com/tabler/tabler" class="btn btn-block btn-primary mb-4" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon mr-2"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>
Browse source code
</a>
<div class="list-group list-group-transparent mb-0">
<a href="../docs/index.html" class="list-group-item list-group-item-action">
index
</a>
<a href="../docs/alerts.html" class="list-group-item list-group-item-action">
Alerts
</a>
<a href="../docs/autosize.html" class="list-group-item list-group-item-action active">
Autosize
</a>
<a href="../docs/avatars.html" class="list-group-item list-group-item-action">
Avatars
</a>
<a href="../docs/badges.html" class="list-group-item list-group-item-action">
Badges
</a>
<a href="../docs/breadcrumb.html" class="list-group-item list-group-item-action">
Breadcrumb
</a>
<a href="../docs/buttons.html" class="list-group-item list-group-item-action">
Buttons
</a>
<a href="../docs/cards.html" class="list-group-item list-group-item-action">
Cards
</a>
<a href="../docs/carousel.html" class="list-group-item list-group-item-action">
Carousel
</a>
<a href="../docs/colors.html" class="list-group-item list-group-item-action">
Colors
</a>
<a href="../docs/cursors.html" class="list-group-item list-group-item-action">
Cursors
</a>
<a href="../docs/charts.html" class="list-group-item list-group-item-action">
Charts
</a>
<a href="../docs/divider.html" class="list-group-item list-group-item-action">
Divider
</a>
<a href="../docs/empty.html" class="list-group-item list-group-item-action">
Empty states
</a>
<a href="../docs/flags.html" class="list-group-item list-group-item-action">
Flags
</a>
<a href="../docs/form-elements.html" class="list-group-item list-group-item-action">
Form elements
</a>
<a href="../docs/form-helpers.html" class="list-group-item list-group-item-action">
Form helpers
</a>
<a href="../docs/input-mask.html" class="list-group-item list-group-item-action">
Form input mask
</a>
<a href="../docs/progress.html" class="list-group-item list-group-item-action">
Progress
</a>
<a href="../docs/ribbons.html" class="list-group-item list-group-item-action">
Ribbons
<span class="badge bg-green ml-auto">New</span>
</a>
<a href="../docs/spinners.html" class="list-group-item list-group-item-action">
Spinners
</a>
<a href="../docs/steps.html" class="list-group-item list-group-item-action">
Steps
</a>
<a href="../docs/tables.html" class="list-group-item list-group-item-action">
Tables
</a>
<a href="../docs/tabs.html" class="list-group-item list-group-item-action">
Tabs
</a>
<a href="../docs/timelines.html" class="list-group-item list-group-item-action">
Timelines
</a>
<a href="../docs/toasts.html" class="list-group-item list-group-item-action">
Toasts
</a>
<a href="../docs/tooltips.html" class="list-group-item list-group-item-action">
Tooltips
</a>
<a href="../docs/typography.html" class="list-group-item list-group-item-action">
Typography
</a>
</div>
</div>
<div class="col-lg-9">
<div class="card">
<div class="card-body p-md-6 p-xl-7">
<div class="markdown">
<h2 class="h1 mt-0 mb-3">Autosize
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
</h2>
<p>A small, stand-alone script to automatically adjust textarea height.</p>
<h3 id="default-markup">Default markup</h3>
<div class="example">
<label class="form-label">Autosize example</label>
<textarea class="form-control" data-toggle="autosize" placeholder="Typing something&hellip;"></textarea>
</div>
<div class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">&gt;</span>Autosize example<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;textarea</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">data-toggle=</span><span class="s">"autosize"</span> <span class="na">placeholder=</span><span class="s">"Typing something&amp;hellip;"</span><span class="nt">&gt;&lt;/textarea&gt;</span></code></pre>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
</main>
</div>
</div>
</div>
<script>
window.tabler_colors = {
'blue': '#206bc4',
'azure': '#45aaf2',
'indigo': '#6574cd',
'purple': '#a55eea',
'pink': '#f66d9b',
'red': '#fa4654',
'orange': '#fd9644',
'yellow': '#f1c40f',
'lime': '#7bd235',
'green': '#5eba00',
'teal': '#2bcbba',
'cyan': '#17a2b8',
'gray': '#868e96',
};
</script>
<!-- Libs JS -->
<script src="../dist/libs/jquery/dist/jquery.min.js?1576401968"></script>
<script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1576401968"></script>
<script src="../dist/libs/autosize/dist/autosize.min.js?1576401968"></script>
<script src="../dist/libs/imask/dist/imask.min.js?1576401968"></script>
<script src="../dist/libs/selectize/dist/js/standalone/selectize.min.js?1576401968"></script>
<script src="../dist/libs/apexcharts/dist/apexcharts.min.js?1576401968"></script>
<script src="../dist/libs/jqvmap/dist/jquery.vmap.min.js?1576401968"></script>
<script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.world.js?1576401968"></script>
<script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.usa.js?1576401968"></script>
<script src="../dist/libs/jqvmap/dist/maps/continents/jquery.vmap.europe.js?1576401968"></script>
<script src="../dist/libs/peity/jquery.peity.min.js?1576401968"></script>
<script src="../dist/libs/selectize/dist/js/selectize.min.js?1576401968"></script>
<script src="../dist/libs/fullcalendar/core/main.min.js?1576401968"></script>
<script src="../dist/libs/fullcalendar/daygrid/main.min.js?1576401968"></script>
<script src="../dist/libs/fullcalendar/interaction/main.min.js?1576401968"></script>
<script src="../dist/libs/fullcalendar/timegrid/main.min.js?1576401968"></script>
<script src="../dist/libs/fullcalendar/list/main.min.js?1576401968"></script>
<!-- Tabler Core -->
<script src="../dist/js/tabler.min.js?1576401968"></script>
<script src="../dist/js/tabler.min.js?1576701882"></script>
<!-- Tabler Plugins -->
<script src="../dist/js/tabler-charts.min.js?1576401968"></script>
<script src="../dist/js/tabler-charts.min.js?1576701882"></script>
<script>
document.body.style.display = 'block';
</script>

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

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-alpha
* @version v1.0.0-alpha
* @link https://github.com/tabler/tabler
* Copyright 2018-2019 The Tabler Authors
* Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -26,396 +26,551 @@
<title>Carousel - Documentation - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
<meta name="description" content="The Carousel is a slideshow for cycling through elements."/>
<!-- Libs CSS -->
<link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1576401968" rel="stylesheet"/>
<link href="../dist/libs/selectize/dist/css/selectize.css?1576401968" rel="stylesheet"/>
<link href="../dist/libs/fullcalendar/core/main.min.css?1576401968" rel="stylesheet"/>
<link href="../dist/libs/fullcalendar/daygrid/main.min.css?1576401968" rel="stylesheet"/>
<link href="../dist/libs/fullcalendar/timegrid/main.min.css?1576401968" rel="stylesheet"/>
<link href="../dist/libs/fullcalendar/list/main.min.css?1576401968" rel="stylesheet"/>
<link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1576701882" rel="stylesheet"/>
<link href="../dist/libs/selectize/dist/css/selectize.css?1576701882" rel="stylesheet"/>
<link href="../dist/libs/fullcalendar/core/main.min.css?1576701882" rel="stylesheet"/>
<link href="../dist/libs/fullcalendar/daygrid/main.min.css?1576701882" rel="stylesheet"/>
<link href="../dist/libs/fullcalendar/timegrid/main.min.css?1576701882" rel="stylesheet"/>
<link href="../dist/libs/fullcalendar/list/main.min.css?1576701882" rel="stylesheet"/>
<!-- Tabler Core -->
<link href="../dist/css/tabler.min.css?1576401968" rel="stylesheet"/>
<link href="../dist/css/tabler.min.css?1576701882" rel="stylesheet"/>
<!-- Tabler Plugins -->
<link href="../dist/css/tabler-flags.min.css?1576401968" rel="stylesheet"/>
<link href="../dist/css/tabler-charts.min.css?1576401968" rel="stylesheet"/>
<link href="../dist/css/tabler-flags.min.css?1576701882" rel="stylesheet"/>
<link href="../dist/css/tabler-charts.min.css?1576701882" rel="stylesheet"/>
<style>
body { display: none; }
</style>
</head>
<body class="antialiased ">
<div class="layout">
<header class="layout-area-topnav navbar navbar-expand-lg navbar-light">
<div class="container">
<a class="layout-toggler" data-toggle="menubar">
<span class="layout-toggler-icon"></span>
</a>
<a href=".." class="navbar-brand text-reset mr-md-3">
<img src="../img/logo.svg" alt="Tabler" class="d-none d-md-block navbar-brand-logo">
<img src="../img/logo-small.svg" alt="Tabler" class="d-md-none navbar-brand-logo">
</a>
<ul class="nav navbar-menu align-items-center order-1 order-lg-2">
<li class="nav-item dropdown mr-3">
<a class="nav-link text-reset px-2" data-toggle="dropdown">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
<span class="badge badge-pill badge-up bg-primary">4</span>
<body class="antialiased">
<div class="wrapper">
<div class="content">
<header class="topnav topbar">
<div class="container">
<div class="navbar navbar-expand-lg navbar-light">
<a href=".." class="navbar-brand mr-4">
<img src="../img/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-lg">
<img src="../img/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-sm">
</a>
<div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right mt-3 p-0">
<div class="scrollable">
<div class="list list-row">
</div>
</div>
<div class="d-flex px-3 py-2 b-t">
<div class="flex">
<span>6 Notifications</span>
</div>
<a href="#">See all <i class="fa fa-angle-right text-muted"></i></a>
</div>
</div>
</li>
<li class="nav-item d-none d-lg-flex mr-3">
<a href="https://github.com/tabler/tabler" class="btn btn-sm btn-success" target="_blank">Source code</a>
</li>
<li class="nav-item dropdown">
<a href="#" data-toggle="dropdown"
<ul class="nav navbar-menu align-items-center ml-auto">
<li class="nav-item d-none d-lg-flex mr-3">
<a href="https://github.com/tabler/tabler" class="btn btn-sm btn-success" target="_blank">Source code</a>
</li>
<li class="nav-item dropdown">
<a href="#" data-toggle="dropdown"
class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
<span class="avatar" style="background-image: url(../img/avatars/000m.jpg)"></span>
<span class="ml-2 d-none d-lg-block leading-none">
Paweł Kuna
<span class="text-muted d-block mt-1 text-h6">Administrator</span>
</span>
</a>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
Profile
</a>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
Settings
</a>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
Inbox
<span class="badge bg-primary ml-auto">6</span>
</a>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
Message
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
Need help?
</a>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
Sign out
</a>
</div>
</li>
</ul>
</div>
</header>
<div class="layout-area-menu navbar navbar-expand-lg navbar-light">
<div class="container">
<ul class="navbar-nav flex-wrap">
<li class="nav-item">
<a class="nav-link" href="../index.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
</span>
<span class="nav-text">
Dashboard
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../form-elements.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
</span>
<span class="nav-text">
Form elements
</span>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
<span class="avatar" style="background-image: url(../img/avatars/004f.jpg)"></span>
<span class="ml-2 d-none d-lg-block leading-none">
Leesa Beaty
<span class="text-muted d-block mt-1 text-h6">Administrator</span>
</span>
</a>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
Profile
</a>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
Settings
</a>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
Inbox
<span class="badge bg-primary ml-auto">6</span>
</a>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
Message
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
Need help?
</a>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
Sign out
</a>
</div>
</li>
</ul>
</div>
</div>
</header>
<header class="topnav topbar">
<div class="navbar navbar-expand-lg navbar-light">
<div class="container">
<ul class="navbar-nav flex-wrap">
<li class="nav-item">
<a class="nav-link" href="../index.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
</span>
<span class="nav-text">
Dashboard
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../form-elements.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
</span>
<span class="nav-text">
Form elements
</span>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-error" data-toggle="dropdown" role="button"
aria-expanded="false" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
</span>
<span class="nav-text">
Base
</span>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="../buttons.html" >
<span class="nav-text">
Buttons
</span>
</a>
<a class="dropdown-item" href="../cards.html" >
<span class="nav-text">
Cards
</span>
</a>
<a class="dropdown-item" href="../c.html" >
<span class="nav-text">
C
</span>
</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="../charts.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
</span>
<span class="nav-text">
Charts
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../calendar.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
</span>
<span class="nav-text">
Calendar
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../users.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
</span>
<span class="nav-text">
Users
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../gallery.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
</span>
<span class="nav-text">
Gallery
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../layouts.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
</span>
<span class="nav-text">
Layouts
</span>
</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="../docs/index.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
</span>
<span class="nav-text">
Documentation
</span>
</a>
</li>
</ul>
</div>
</div>
<div class="layout-area-menu-backdrop" data-toggle="menubar"></div>
<div class="layout-area-main">
<main class="container my-4 flex-fill">
<!-- Page title -->
<div class="page-title-box">
<div class="row align-items-center">
<div class="col-auto">
<h2 class="page-title">
Documentation
</h2>
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="9" y1="15" x2="15" y2="15"></line></svg>
</span>
<span class="nav-text">
Error pages
</span>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="../400.html" >
<span class="nav-text">
400 page
</span>
</a>
<a class="dropdown-item" href="../401.html" >
<span class="nav-text">
401 page
</span>
</a>
<a class="dropdown-item" href="../403.html" >
<span class="nav-text">
403 page
</span>
</a>
<a class="dropdown-item" href="../404.html" >
<span class="nav-text">
404 page
</span>
</a>
<a class="dropdown-item" href="../500.html" >
<span class="nav-text">
500 page
</span>
</a>
<a class="dropdown-item" href="../503.html" >
<span class="nav-text">
503 page
</span>
</a>
<a class="dropdown-item" href="../maintenance.html" >
<span class="nav-text">
Maintenance page
</span>
</a>
</div>
</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-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
</span>
<span class="nav-text">
Base
</span>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="../buttons.html" >
<span class="nav-text">
Buttons
</span>
</a>
<a class="dropdown-item" href="../cards.html" >
<span class="nav-text">
Cards
</span>
</a>
<a class="dropdown-item" href="../calendar.html" >
<span class="nav-text">
Calendar
</span>
</a>
<a class="dropdown-item" href="../users.html" >
<span class="nav-text">
Users
</span>
</a>
<a class="dropdown-item" href="../gallery.html" >
<span class="nav-text">
Gallery
</span>
</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="../charts.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
</span>
<span class="nav-text">
Charts
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../layouts.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
</span>
<span class="nav-text">
Layouts
</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-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
</span>
<span class="nav-text">
Extra
</span>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="../invoice.html" >
<span class="nav-text">
Invoice
</span>
</a>
</div>
</li>
<li class="nav-item active dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
aria-expanded="true" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
</span>
<span class="nav-text">
Documentation
</span>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="../docs/index.html" >
<span class="nav-text">
index
</span>
</a>
<a class="dropdown-item" href="../docs/alerts.html" >
<span class="nav-text">
Alerts
</span>
</a>
<a class="dropdown-item" href="../docs/autosize.html" >
<span class="nav-text">
Autosize
</span>
</a>
<a class="dropdown-item" href="../docs/avatars.html" >
<span class="nav-text">
Avatars
</span>
</a>
<a class="dropdown-item" href="../docs/badges.html" >
<span class="nav-text">
Badges
</span>
</a>
<a class="dropdown-item" href="../docs/breadcrumb.html" >
<span class="nav-text">
Breadcrumb
</span>
</a>
<a class="dropdown-item" href="../docs/buttons.html" >
<span class="nav-text">
Buttons
</span>
</a>
<a class="dropdown-item" href="../docs/cards.html" >
<span class="nav-text">
Cards
</span>
</a>
<a class="dropdown-item" href="../docs/carousel.html" >
<span class="nav-text">
Carousel
</span>
</a>
<a class="dropdown-item" href="../docs/colors.html" >
<span class="nav-text">
Colors
</span>
</a>
<a class="dropdown-item" href="../docs/cursors.html" >
<span class="nav-text">
Cursors
</span>
</a>
<a class="dropdown-item" href="../docs/charts.html" >
<span class="nav-text">
Charts
</span>
</a>
<a class="dropdown-item" href="../docs/divider.html" >
<span class="nav-text">
Divider
</span>
</a>
<a class="dropdown-item" href="../docs/empty.html" >
<span class="nav-text">
Empty states
</span>
</a>
<a class="dropdown-item" href="../docs/flags.html" >
<span class="nav-text">
Flags
</span>
</a>
<a class="dropdown-item" href="../docs/form-elements.html" >
<span class="nav-text">
Form elements
</span>
</a>
<a class="dropdown-item" href="../docs/form-helpers.html" >
<span class="nav-text">
Form helpers
</span>
</a>
<a class="dropdown-item" href="../docs/input-mask.html" >
<span class="nav-text">
Form input mask
</span>
</a>
<a class="dropdown-item" href="../docs/progress.html" >
<span class="nav-text">
Progress
</span>
</a>
<a class="dropdown-item" href="../docs/ribbons.html" >
<span class="nav-text">
Ribbons
</span>
</a>
<a class="dropdown-item" href="../docs/spinners.html" >
<span class="nav-text">
Spinners
</span>
</a>
<a class="dropdown-item" href="../docs/steps.html" >
<span class="nav-text">
Steps
</span>
</a>
<a class="dropdown-item" href="../docs/tables.html" >
<span class="nav-text">
Tables
</span>
</a>
<a class="dropdown-item" href="../docs/tabs.html" >
<span class="nav-text">
Tabs
</span>
</a>
<a class="dropdown-item" href="../docs/timelines.html" >
<span class="nav-text">
Timelines
</span>
</a>
<a class="dropdown-item" href="../docs/toasts.html" >
<span class="nav-text">
Toasts
</span>
</a>
<a class="dropdown-item" href="../docs/tooltips.html" >
<span class="nav-text">
Tooltips
</span>
</a>
<a class="dropdown-item" href="../docs/typography.html" >
<span class="nav-text">
Typography
</span>
</a>
</div>
</li>
</ul>
<div class="navbar-search d-none d-lg-block">
<form action="." method="get">
<div class="input-icon">
<span class="input-icon-addon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
</span>
<input type="text" class="form-control form-control-light" placeholder="Search for&hellip;">
</div>
</form>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-lg-3 order-lg-1 mb-4">
<a href="https://github.com/tabler/tabler" class="btn btn-block btn-primary mb-4" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon mr-2"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>
Browse source code
</a>
<div class="list-group list-group-transparent mb-0">
<a href="../docs/index.html"
class="list-group-item list-group-item-action">
Introduction
</a>
<a href="../docs/alerts.html"
class="list-group-item list-group-item-action">
Alerts <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
</a>
<a href="../docs/autosize.html"
class="list-group-item list-group-item-action">
Autosize <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
</a>
<a href="../docs/avatars.html"
class="list-group-item list-group-item-action">
Avatars <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
</a>
<a href="../docs/badges.html"
class="list-group-item list-group-item-action">
Badges <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
</a>
<a href="../docs/breadcrumb.html"
class="list-group-item list-group-item-action">
Breadcrumb <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
</a>
<a href="../docs/buttons.html"
class="list-group-item list-group-item-action">
Buttons <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
</a>
<a href="../docs/cards.html"
class="list-group-item list-group-item-action">
Cards <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
</a>
<a href="../docs/carousel.html"
class="list-group-item list-group-item-action active">
Carousel
</a>
<a href="../docs/colors.html"
class="list-group-item list-group-item-action">
Colors <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
</a>
<a href="../docs/cursors.html"
class="list-group-item list-group-item-action">
Cursors
</a>
<a href="../docs/charts.html"
class="list-group-item list-group-item-action">
Charts
</a>
<a href="../docs/divider.html"
class="list-group-item list-group-item-action">
Divider <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
</a>
<a href="../docs/empty.html"
class="list-group-item list-group-item-action">
Empty states
</a>
<a href="../docs/flags.html"
class="list-group-item list-group-item-action">
Flags <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
</a>
<a href="../docs/form-elements.html"
class="list-group-item list-group-item-action">
Form Elements
</a>
<a href="../docs/form-helpers.html"
class="list-group-item list-group-item-action">
Form helpers
</a>
<a href="../docs/input-mask.html"
class="list-group-item list-group-item-action">
Input mask
</a>
<a href="../docs/progress.html"
class="list-group-item list-group-item-action">
Progress
</a>
<a href="../docs/ribbons.html"
class="list-group-item list-group-item-action">
Ribbons
</a>
<a href="../docs/spinners.html"
class="list-group-item list-group-item-action">
Spinners <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
</a>
<a href="../docs/steps.html"
class="list-group-item list-group-item-action">
Steps
</a>
<a href="../docs/tables.html"
class="list-group-item list-group-item-action">
Tables
</a>
<a href="../docs/tabs.html"
class="list-group-item list-group-item-action">
Tabs
</a>
<a href="../docs/timelines.html"
class="list-group-item list-group-item-action">
Timelines
</a>
<a href="../docs/toasts.html"
class="list-group-item list-group-item-action">
Toasts
</a>
<a href="../docs/tooltips.html"
class="list-group-item list-group-item-action">
Tooltips
</a>
<a href="../docs/typography.html"
class="list-group-item list-group-item-action">
Typography
</a>
</header>
<div class="content-page">
<main class="container my-4 flex-fill">
<!-- Page title -->
<div class="page-title-box">
<div class="row align-items-center">
<div class="col-auto">
<h2 class="page-title">
Documentation
</h2>
</div>
</div>
</div>
<div class="col-lg-9">
<div class="card">
<div class="card-body p-md-6 p-xl-7">
<div class="markdown">
<p class="mb-4 float-right">
<a href="https://getbootstrap.com/docs/4.4/components/carousel/" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon pr-1 text-blue"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>
Bootstrap documentation
</a>
</p>
<h2 class="h1 mt-0 mb-3">Carousel
</h2>
<p>The Carousel is a slideshow for cycling through elements.</p>
<div class="example example-bg">
<div class="example-column example-column-1">
<div id="carousel-sample" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-sample" data-slide-to="0" class="active"></li>
<li data-target="#carousel-sample" data-slide-to="1" class=""></li>
<li data-target="#carousel-sample" data-slide-to="2" class=""></li>
<li data-target="#carousel-sample" data-slide-to="3" class=""></li>
<li data-target="#carousel-sample" data-slide-to="4" class=""></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" alt="" src="../img/photos/1b73704b282a8ec6.jpg" data-holder-rendered="true" />
</div>
<div class="carousel-item">
<img class="d-block w-100" alt="" src="../img/photos/3d2998219313cd37.jpg" data-holder-rendered="true" />
</div>
<div class="carousel-item">
<img class="d-block w-100" alt="" src="../img/photos/6ab3200b14549f8a.jpg" data-holder-rendered="true" />
</div>
<div class="carousel-item">
<img class="d-block w-100" alt="" src="../img/photos/6d35d9a2bd6c63c2.jpg" data-holder-rendered="true" />
</div>
<div class="carousel-item">
<img class="d-block w-100" alt="" src="../img/photos/8a26974ee6444acd.jpg" data-holder-rendered="true" />
<div class="row justify-content-center">
<div class="col-lg-3 order-lg-1 mb-4">
<a href="https://github.com/tabler/tabler" class="btn btn-block btn-primary mb-4" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon mr-2"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>
Browse source code
</a>
<div class="list-group list-group-transparent mb-0">
<a href="../docs/index.html" class="list-group-item list-group-item-action">
index
</a>
<a href="../docs/alerts.html" class="list-group-item list-group-item-action">
Alerts
</a>
<a href="../docs/autosize.html" class="list-group-item list-group-item-action">
Autosize
</a>
<a href="../docs/avatars.html" class="list-group-item list-group-item-action">
Avatars
</a>
<a href="../docs/badges.html" class="list-group-item list-group-item-action">
Badges
</a>
<a href="../docs/breadcrumb.html" class="list-group-item list-group-item-action">
Breadcrumb
</a>
<a href="../docs/buttons.html" class="list-group-item list-group-item-action">
Buttons
</a>
<a href="../docs/cards.html" class="list-group-item list-group-item-action">
Cards
</a>
<a href="../docs/carousel.html" class="list-group-item list-group-item-action active">
Carousel
</a>
<a href="../docs/colors.html" class="list-group-item list-group-item-action">
Colors
</a>
<a href="../docs/cursors.html" class="list-group-item list-group-item-action">
Cursors
</a>
<a href="../docs/charts.html" class="list-group-item list-group-item-action">
Charts
</a>
<a href="../docs/divider.html" class="list-group-item list-group-item-action">
Divider
</a>
<a href="../docs/empty.html" class="list-group-item list-group-item-action">
Empty states
</a>
<a href="../docs/flags.html" class="list-group-item list-group-item-action">
Flags
</a>
<a href="../docs/form-elements.html" class="list-group-item list-group-item-action">
Form elements
</a>
<a href="../docs/form-helpers.html" class="list-group-item list-group-item-action">
Form helpers
</a>
<a href="../docs/input-mask.html" class="list-group-item list-group-item-action">
Form input mask
</a>
<a href="../docs/progress.html" class="list-group-item list-group-item-action">
Progress
</a>
<a href="../docs/ribbons.html" class="list-group-item list-group-item-action">
Ribbons
<span class="badge bg-green ml-auto">New</span>
</a>
<a href="../docs/spinners.html" class="list-group-item list-group-item-action">
Spinners
</a>
<a href="../docs/steps.html" class="list-group-item list-group-item-action">
Steps
</a>
<a href="../docs/tables.html" class="list-group-item list-group-item-action">
Tables
</a>
<a href="../docs/tabs.html" class="list-group-item list-group-item-action">
Tabs
</a>
<a href="../docs/timelines.html" class="list-group-item list-group-item-action">
Timelines
</a>
<a href="../docs/toasts.html" class="list-group-item list-group-item-action">
Toasts
</a>
<a href="../docs/tooltips.html" class="list-group-item list-group-item-action">
Tooltips
</a>
<a href="../docs/typography.html" class="list-group-item list-group-item-action">
Typography
</a>
</div>
</div>
<div class="col-lg-9">
<div class="card">
<div class="card-body p-md-6 p-xl-7">
<div class="markdown">
<p class="mb-4 float-right">
<a href="https://getbootstrap.com/docs/4.4/components/carousel/" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon pr-1 text-blue"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>
Bootstrap documentation
</a>
</p>
<h2 class="h1 mt-0 mb-3">Carousel
</h2>
<p>The Carousel is a slideshow for cycling through elements.</p>
<div class="example example-bg">
<div class="example-column example-column-1">
<div id="carousel-sample" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-sample" data-slide-to="0" class="active"></li>
<li data-target="#carousel-sample" data-slide-to="1" class=""></li>
<li data-target="#carousel-sample" data-slide-to="2" class=""></li>
<li data-target="#carousel-sample" data-slide-to="3" class=""></li>
<li data-target="#carousel-sample" data-slide-to="4" class=""></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" alt="" src="../img/photos/1b73704b282a8ec6.jpg" data-holder-rendered="true" />
</div>
<div class="carousel-item">
<img class="d-block w-100" alt="" src="../img/photos/3d2998219313cd37.jpg" data-holder-rendered="true" />
</div>
<div class="carousel-item">
<img class="d-block w-100" alt="" src="../img/photos/6ab3200b14549f8a.jpg" data-holder-rendered="true" />
</div>
<div class="carousel-item">
<img class="d-block w-100" alt="" src="../img/photos/6d35d9a2bd6c63c2.jpg" data-holder-rendered="true" />
</div>
<div class="carousel-item">
<img class="d-block w-100" alt="" src="../img/photos/8a26974ee6444acd.jpg" data-holder-rendered="true" />
</div>
</div>
<a class="carousel-control-prev" href="#carousel-sample" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carousel-sample" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<a class="carousel-control-prev" href="#carousel-sample" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carousel-sample" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
<div class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"carousel-sample"</span> <span class="na">class=</span><span class="s">"carousel slide"</span> <span class="na">data-ride=</span><span class="s">"carousel"</span><span class="nt">&gt;</span>
<div class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"carousel-sample"</span> <span class="na">class=</span><span class="s">"carousel slide"</span> <span class="na">data-ride=</span><span class="s">"carousel"</span><span class="nt">&gt;</span>
<span class="nt">&lt;ol</span> <span class="na">class=</span><span class="s">"carousel-indicators"</span><span class="nt">&gt;</span>
<span class="nt">&lt;li</span> <span class="na">data-target=</span><span class="s">"#carousel-sample"</span> <span class="na">data-slide-to=</span><span class="s">"0"</span> <span class="na">class=</span><span class="s">"active"</span><span class="nt">&gt;&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">data-target=</span><span class="s">"#carousel-sample"</span> <span class="na">data-slide-to=</span><span class="s">"1"</span> <span class="na">class=</span><span class="s">""</span><span class="nt">&gt;&lt;/li&gt;</span>
@@ -449,54 +604,20 @@
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">&gt;</span>Next<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
</main>
</div>
</div>
</div>
<script>
window.tabler_colors = {
'blue': '#206bc4',
'azure': '#45aaf2',
'indigo': '#6574cd',
'purple': '#a55eea',
'pink': '#f66d9b',
'red': '#fa4654',
'orange': '#fd9644',
'yellow': '#f1c40f',
'lime': '#7bd235',
'green': '#5eba00',
'teal': '#2bcbba',
'cyan': '#17a2b8',
'gray': '#868e96',
};
</script>
<!-- Libs JS -->
<script src="../dist/libs/jquery/dist/jquery.min.js?1576401968"></script>
<script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1576401968"></script>
<script src="../dist/libs/autosize/dist/autosize.min.js?1576401968"></script>
<script src="../dist/libs/imask/dist/imask.min.js?1576401968"></script>
<script src="../dist/libs/selectize/dist/js/standalone/selectize.min.js?1576401968"></script>
<script src="../dist/libs/apexcharts/dist/apexcharts.min.js?1576401968"></script>
<script src="../dist/libs/jqvmap/dist/jquery.vmap.min.js?1576401968"></script>
<script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.world.js?1576401968"></script>
<script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.usa.js?1576401968"></script>
<script src="../dist/libs/jqvmap/dist/maps/continents/jquery.vmap.europe.js?1576401968"></script>
<script src="../dist/libs/peity/jquery.peity.min.js?1576401968"></script>
<script src="../dist/libs/selectize/dist/js/selectize.min.js?1576401968"></script>
<script src="../dist/libs/fullcalendar/core/main.min.js?1576401968"></script>
<script src="../dist/libs/fullcalendar/daygrid/main.min.js?1576401968"></script>
<script src="../dist/libs/fullcalendar/interaction/main.min.js?1576401968"></script>
<script src="../dist/libs/fullcalendar/timegrid/main.min.js?1576401968"></script>
<script src="../dist/libs/fullcalendar/list/main.min.js?1576401968"></script>
<!-- Tabler Core -->
<script src="../dist/js/tabler.min.js?1576401968"></script>
<script src="../dist/js/tabler.min.js?1576701882"></script>
<!-- Tabler Plugins -->
<script src="../dist/js/tabler-charts.min.js?1576401968"></script>
<script src="../dist/js/tabler-charts.min.js?1576701882"></script>
<script>
document.body.style.display = 'block';
</script>

View File

@@ -1,7 +1,7 @@
<!doctype html>
<!--
* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
* @version 1.0-alpha
* @version v1.0.0-alpha
* @link https://github.com/tabler/tabler
* Copyright 2018-2019 The Tabler Authors
* Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -25,397 +25,518 @@
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
<title>Charts - Documentation - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
<!-- Libs CSS -->
<link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1576401968" rel="stylesheet"/>
<link href="../dist/libs/selectize/dist/css/selectize.css?1576401968" rel="stylesheet"/>
<link href="../dist/libs/fullcalendar/core/main.min.css?1576401968" rel="stylesheet"/>
<link href="../dist/libs/fullcalendar/daygrid/main.min.css?1576401968" rel="stylesheet"/>
<link href="../dist/libs/fullcalendar/timegrid/main.min.css?1576401968" rel="stylesheet"/>
<link href="../dist/libs/fullcalendar/list/main.min.css?1576401968" rel="stylesheet"/>
<link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1576701882" rel="stylesheet"/>
<link href="../dist/libs/selectize/dist/css/selectize.css?1576701882" rel="stylesheet"/>
<link href="../dist/libs/fullcalendar/core/main.min.css?1576701882" rel="stylesheet"/>
<link href="../dist/libs/fullcalendar/daygrid/main.min.css?1576701882" rel="stylesheet"/>
<link href="../dist/libs/fullcalendar/timegrid/main.min.css?1576701882" rel="stylesheet"/>
<link href="../dist/libs/fullcalendar/list/main.min.css?1576701882" rel="stylesheet"/>
<!-- Tabler Core -->
<link href="../dist/css/tabler.min.css?1576401968" rel="stylesheet"/>
<link href="../dist/css/tabler.min.css?1576701882" rel="stylesheet"/>
<!-- Tabler Plugins -->
<link href="../dist/css/tabler-flags.min.css?1576401968" rel="stylesheet"/>
<link href="../dist/css/tabler-charts.min.css?1576401968" rel="stylesheet"/>
<link href="../dist/css/tabler-flags.min.css?1576701882" rel="stylesheet"/>
<link href="../dist/css/tabler-charts.min.css?1576701882" rel="stylesheet"/>
<style>
body { display: none; }
</style>
</head>
<body class="antialiased ">
<div class="layout">
<header class="layout-area-topnav navbar navbar-expand-lg navbar-light">
<div class="container">
<a class="layout-toggler" data-toggle="menubar">
<span class="layout-toggler-icon"></span>
</a>
<a href=".." class="navbar-brand text-reset mr-md-3">
<img src="../img/logo.svg" alt="Tabler" class="d-none d-md-block navbar-brand-logo">
<img src="../img/logo-small.svg" alt="Tabler" class="d-md-none navbar-brand-logo">
</a>
<ul class="nav navbar-menu align-items-center order-1 order-lg-2">
<li class="nav-item dropdown mr-3">
<a class="nav-link text-reset px-2" data-toggle="dropdown">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
<span class="badge badge-pill badge-up bg-primary">4</span>
<body class="antialiased">
<div class="wrapper">
<div class="content">
<header class="topnav topbar">
<div class="container">
<div class="navbar navbar-expand-lg navbar-light">
<a href=".." class="navbar-brand mr-4">
<img src="../img/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-lg">
<img src="../img/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-sm">
</a>
<div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right mt-3 p-0">
<div class="scrollable">
<div class="list list-row">
</div>
</div>
<div class="d-flex px-3 py-2 b-t">
<div class="flex">
<span>6 Notifications</span>
</div>
<a href="#">See all <i class="fa fa-angle-right text-muted"></i></a>
</div>
</div>
</li>
<li class="nav-item d-none d-lg-flex mr-3">
<a href="https://github.com/tabler/tabler" class="btn btn-sm btn-success" target="_blank">Source code</a>
</li>
<li class="nav-item dropdown">
<a href="#" data-toggle="dropdown"
<ul class="nav navbar-menu align-items-center ml-auto">
<li class="nav-item d-none d-lg-flex mr-3">
<a href="https://github.com/tabler/tabler" class="btn btn-sm btn-success" target="_blank">Source code</a>
</li>
<li class="nav-item dropdown">
<a href="#" data-toggle="dropdown"
class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
<span class="avatar" style="background-image: url(../img/avatars/000m.jpg)"></span>
<span class="ml-2 d-none d-lg-block leading-none">
Paweł Kuna
<span class="text-muted d-block mt-1 text-h6">Administrator</span>
</span>
</a>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
Profile
</a>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
Settings
</a>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
Inbox
<span class="badge bg-primary ml-auto">6</span>
</a>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
Message
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
Need help?
</a>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
Sign out
</a>
</div>
</li>
</ul>
</div>
</header>
<div class="layout-area-menu navbar navbar-expand-lg navbar-light">
<div class="container">
<ul class="navbar-nav flex-wrap">
<li class="nav-item">
<a class="nav-link" href="../index.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
</span>
<span class="nav-text">
Dashboard
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../form-elements.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
</span>
<span class="nav-text">
Form elements
</span>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
<span class="avatar" style="background-image: url(../img/avatars/004f.jpg)"></span>
<span class="ml-2 d-none d-lg-block leading-none">
Leesa Beaty
<span class="text-muted d-block mt-1 text-h6">Administrator</span>
</span>
</a>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
Profile
</a>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
Settings
</a>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
Inbox
<span class="badge bg-primary ml-auto">6</span>
</a>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
Message
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
Need help?
</a>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
Sign out
</a>
</div>
</li>
</ul>
</div>
</div>
</header>
<header class="topnav topbar">
<div class="navbar navbar-expand-lg navbar-light">
<div class="container">
<ul class="navbar-nav flex-wrap">
<li class="nav-item">
<a class="nav-link" href="../index.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
</span>
<span class="nav-text">
Dashboard
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../form-elements.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
</span>
<span class="nav-text">
Form elements
</span>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-error" data-toggle="dropdown" role="button"
aria-expanded="false" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
</span>
<span class="nav-text">
Base
</span>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="../buttons.html" >
<span class="nav-text">
Buttons
</span>
</a>
<a class="dropdown-item" href="../cards.html" >
<span class="nav-text">
Cards
</span>
</a>
<a class="dropdown-item" href="../c.html" >
<span class="nav-text">
C
</span>
</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="../charts.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
</span>
<span class="nav-text">
Charts
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../calendar.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
</span>
<span class="nav-text">
Calendar
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../users.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
</span>
<span class="nav-text">
Users
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../gallery.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
</span>
<span class="nav-text">
Gallery
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../layouts.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
</span>
<span class="nav-text">
Layouts
</span>
</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="../docs/index.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
</span>
<span class="nav-text">
Documentation
</span>
</a>
</li>
</ul>
</div>
</div>
<div class="layout-area-menu-backdrop" data-toggle="menubar"></div>
<div class="layout-area-main">
<main class="container my-4 flex-fill">
<!-- Page title -->
<div class="page-title-box">
<div class="row align-items-center">
<div class="col-auto">
<h2 class="page-title">
Documentation
</h2>
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="9" y1="15" x2="15" y2="15"></line></svg>
</span>
<span class="nav-text">
Error pages
</span>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="../400.html" >
<span class="nav-text">
400 page
</span>
</a>
<a class="dropdown-item" href="../401.html" >
<span class="nav-text">
401 page
</span>
</a>
<a class="dropdown-item" href="../403.html" >
<span class="nav-text">
403 page
</span>
</a>
<a class="dropdown-item" href="../404.html" >
<span class="nav-text">
404 page
</span>
</a>
<a class="dropdown-item" href="../500.html" >
<span class="nav-text">
500 page
</span>
</a>
<a class="dropdown-item" href="../503.html" >
<span class="nav-text">
503 page
</span>
</a>
<a class="dropdown-item" href="../maintenance.html" >
<span class="nav-text">
Maintenance page
</span>
</a>
</div>
</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-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
</span>
<span class="nav-text">
Base
</span>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="../buttons.html" >
<span class="nav-text">
Buttons
</span>
</a>
<a class="dropdown-item" href="../cards.html" >
<span class="nav-text">
Cards
</span>
</a>
<a class="dropdown-item" href="../calendar.html" >
<span class="nav-text">
Calendar
</span>
</a>
<a class="dropdown-item" href="../users.html" >
<span class="nav-text">
Users
</span>
</a>
<a class="dropdown-item" href="../gallery.html" >
<span class="nav-text">
Gallery
</span>
</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="../charts.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
</span>
<span class="nav-text">
Charts
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../layouts.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
</span>
<span class="nav-text">
Layouts
</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-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
</span>
<span class="nav-text">
Extra
</span>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="../invoice.html" >
<span class="nav-text">
Invoice
</span>
</a>
</div>
</li>
<li class="nav-item active dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
aria-expanded="true" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
</span>
<span class="nav-text">
Documentation
</span>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="../docs/index.html" >
<span class="nav-text">
index
</span>
</a>
<a class="dropdown-item" href="../docs/alerts.html" >
<span class="nav-text">
Alerts
</span>
</a>
<a class="dropdown-item" href="../docs/autosize.html" >
<span class="nav-text">
Autosize
</span>
</a>
<a class="dropdown-item" href="../docs/avatars.html" >
<span class="nav-text">
Avatars
</span>
</a>
<a class="dropdown-item" href="../docs/badges.html" >
<span class="nav-text">
Badges
</span>
</a>
<a class="dropdown-item" href="../docs/breadcrumb.html" >
<span class="nav-text">
Breadcrumb
</span>
</a>
<a class="dropdown-item" href="../docs/buttons.html" >
<span class="nav-text">
Buttons
</span>
</a>
<a class="dropdown-item" href="../docs/cards.html" >
<span class="nav-text">
Cards
</span>
</a>
<a class="dropdown-item" href="../docs/carousel.html" >
<span class="nav-text">
Carousel
</span>
</a>
<a class="dropdown-item" href="../docs/colors.html" >
<span class="nav-text">
Colors
</span>
</a>
<a class="dropdown-item" href="../docs/cursors.html" >
<span class="nav-text">
Cursors
</span>
</a>
<a class="dropdown-item" href="../docs/charts.html" >
<span class="nav-text">
Charts
</span>
</a>
<a class="dropdown-item" href="../docs/divider.html" >
<span class="nav-text">
Divider
</span>
</a>
<a class="dropdown-item" href="../docs/empty.html" >
<span class="nav-text">
Empty states
</span>
</a>
<a class="dropdown-item" href="../docs/flags.html" >
<span class="nav-text">
Flags
</span>
</a>
<a class="dropdown-item" href="../docs/form-elements.html" >
<span class="nav-text">
Form elements
</span>
</a>
<a class="dropdown-item" href="../docs/form-helpers.html" >
<span class="nav-text">
Form helpers
</span>
</a>
<a class="dropdown-item" href="../docs/input-mask.html" >
<span class="nav-text">
Form input mask
</span>
</a>
<a class="dropdown-item" href="../docs/progress.html" >
<span class="nav-text">
Progress
</span>
</a>
<a class="dropdown-item" href="../docs/ribbons.html" >
<span class="nav-text">
Ribbons
</span>
</a>
<a class="dropdown-item" href="../docs/spinners.html" >
<span class="nav-text">
Spinners
</span>
</a>
<a class="dropdown-item" href="../docs/steps.html" >
<span class="nav-text">
Steps
</span>
</a>
<a class="dropdown-item" href="../docs/tables.html" >
<span class="nav-text">
Tables
</span>
</a>
<a class="dropdown-item" href="../docs/tabs.html" >
<span class="nav-text">
Tabs
</span>
</a>
<a class="dropdown-item" href="../docs/timelines.html" >
<span class="nav-text">
Timelines
</span>
</a>
<a class="dropdown-item" href="../docs/toasts.html" >
<span class="nav-text">
Toasts
</span>
</a>
<a class="dropdown-item" href="../docs/tooltips.html" >
<span class="nav-text">
Tooltips
</span>
</a>
<a class="dropdown-item" href="../docs/typography.html" >
<span class="nav-text">
Typography
</span>
</a>
</div>
</li>
</ul>
<div class="navbar-search d-none d-lg-block">
<form action="." method="get">
<div class="input-icon">
<span class="input-icon-addon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
</span>
<input type="text" class="form-control form-control-light" placeholder="Search for&hellip;">
</div>
</form>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-lg-3 order-lg-1 mb-4">
<a href="https://github.com/tabler/tabler" class="btn btn-block btn-primary mb-4" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon mr-2"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>
Browse source code
</a>
<div class="list-group list-group-transparent mb-0">
<a href="../docs/index.html"
class="list-group-item list-group-item-action">
Introduction
</a>
<a href="../docs/alerts.html"
class="list-group-item list-group-item-action">
Alerts <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
</a>
<a href="../docs/autosize.html"
class="list-group-item list-group-item-action">
Autosize <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
</a>
<a href="../docs/avatars.html"
class="list-group-item list-group-item-action">
Avatars <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
</a>
<a href="../docs/badges.html"
class="list-group-item list-group-item-action">
Badges <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
</a>
<a href="../docs/breadcrumb.html"
class="list-group-item list-group-item-action">
Breadcrumb <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
</a>
<a href="../docs/buttons.html"
class="list-group-item list-group-item-action">
Buttons <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
</a>
<a href="../docs/cards.html"
class="list-group-item list-group-item-action">
Cards <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
</a>
<a href="../docs/carousel.html"
class="list-group-item list-group-item-action">
Carousel
</a>
<a href="../docs/colors.html"
class="list-group-item list-group-item-action">
Colors <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
</a>
<a href="../docs/cursors.html"
class="list-group-item list-group-item-action">
Cursors
</a>
<a href="../docs/charts.html"
class="list-group-item list-group-item-action active">
Charts
</a>
<a href="../docs/divider.html"
class="list-group-item list-group-item-action">
Divider <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
</a>
<a href="../docs/empty.html"
class="list-group-item list-group-item-action">
Empty states
</a>
<a href="../docs/flags.html"
class="list-group-item list-group-item-action">
Flags <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
</a>
<a href="../docs/form-elements.html"
class="list-group-item list-group-item-action">
Form Elements
</a>
<a href="../docs/form-helpers.html"
class="list-group-item list-group-item-action">
Form helpers
</a>
<a href="../docs/input-mask.html"
class="list-group-item list-group-item-action">
Input mask
</a>
<a href="../docs/progress.html"
class="list-group-item list-group-item-action">
Progress
</a>
<a href="../docs/ribbons.html"
class="list-group-item list-group-item-action">
Ribbons
</a>
<a href="../docs/spinners.html"
class="list-group-item list-group-item-action">
Spinners <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
</a>
<a href="../docs/steps.html"
class="list-group-item list-group-item-action">
Steps
</a>
<a href="../docs/tables.html"
class="list-group-item list-group-item-action">
Tables
</a>
<a href="../docs/tabs.html"
class="list-group-item list-group-item-action">
Tabs
</a>
<a href="../docs/timelines.html"
class="list-group-item list-group-item-action">
Timelines
</a>
<a href="../docs/toasts.html"
class="list-group-item list-group-item-action">
Toasts
</a>
<a href="../docs/tooltips.html"
class="list-group-item list-group-item-action">
Tooltips
</a>
<a href="../docs/typography.html"
class="list-group-item list-group-item-action">
Typography
</a>
</header>
<div class="content-page">
<main class="container my-4 flex-fill">
<!-- Page title -->
<div class="page-title-box">
<div class="row align-items-center">
<div class="col-auto">
<h2 class="page-title">
Documentation
</h2>
</div>
</div>
</div>
<div class="col-lg-9">
<div class="card">
<div class="card-body p-md-6 p-xl-7">
<div class="markdown">
<h2 class="h1 mt-0 mb-3">Charts
</h2>
<h3 id="c3js-charts">c3.js charts</h3>
<div class="row justify-content-center">
<div class="col-lg-3 order-lg-1 mb-4">
<a href="https://github.com/tabler/tabler" class="btn btn-block btn-primary mb-4" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon mr-2"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>
Browse source code
</a>
<div class="list-group list-group-transparent mb-0">
<a href="../docs/index.html" class="list-group-item list-group-item-action">
index
</a>
<a href="../docs/alerts.html" class="list-group-item list-group-item-action">
Alerts
</a>
<a href="../docs/autosize.html" class="list-group-item list-group-item-action">
Autosize
</a>
<a href="../docs/avatars.html" class="list-group-item list-group-item-action">
Avatars
</a>
<a href="../docs/badges.html" class="list-group-item list-group-item-action">
Badges
</a>
<a href="../docs/breadcrumb.html" class="list-group-item list-group-item-action">
Breadcrumb
</a>
<a href="../docs/buttons.html" class="list-group-item list-group-item-action">
Buttons
</a>
<a href="../docs/cards.html" class="list-group-item list-group-item-action">
Cards
</a>
<a href="../docs/carousel.html" class="list-group-item list-group-item-action">
Carousel
</a>
<a href="../docs/colors.html" class="list-group-item list-group-item-action">
Colors
</a>
<a href="../docs/cursors.html" class="list-group-item list-group-item-action">
Cursors
</a>
<a href="../docs/charts.html" class="list-group-item list-group-item-action active">
Charts
</a>
<a href="../docs/divider.html" class="list-group-item list-group-item-action">
Divider
</a>
<a href="../docs/empty.html" class="list-group-item list-group-item-action">
Empty states
</a>
<a href="../docs/flags.html" class="list-group-item list-group-item-action">
Flags
</a>
<a href="../docs/form-elements.html" class="list-group-item list-group-item-action">
Form elements
</a>
<a href="../docs/form-helpers.html" class="list-group-item list-group-item-action">
Form helpers
</a>
<a href="../docs/input-mask.html" class="list-group-item list-group-item-action">
Form input mask
</a>
<a href="../docs/progress.html" class="list-group-item list-group-item-action">
Progress
</a>
<a href="../docs/ribbons.html" class="list-group-item list-group-item-action">
Ribbons
<span class="badge bg-green ml-auto">New</span>
</a>
<a href="../docs/spinners.html" class="list-group-item list-group-item-action">
Spinners
</a>
<a href="../docs/steps.html" class="list-group-item list-group-item-action">
Steps
</a>
<a href="../docs/tables.html" class="list-group-item list-group-item-action">
Tables
</a>
<a href="../docs/tabs.html" class="list-group-item list-group-item-action">
Tabs
</a>
<a href="../docs/timelines.html" class="list-group-item list-group-item-action">
Timelines
</a>
<a href="../docs/toasts.html" class="list-group-item list-group-item-action">
Toasts
</a>
<a href="../docs/tooltips.html" class="list-group-item list-group-item-action">
Tooltips
</a>
<a href="../docs/typography.html" class="list-group-item list-group-item-action">
Typography
</a>
</div>
</div>
<div class="col-lg-9">
<div class="card">
<div class="card-body p-md-6 p-xl-7">
<div class="markdown">
<h2 class="h1 mt-0 mb-3">Charts
</h2>
<h3 id="c3js-charts">c3.js charts</h3>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
</main>
</div>
</div>
</div>
<script>
window.tabler_colors = {
'blue': '#206bc4',
'azure': '#45aaf2',
'indigo': '#6574cd',
'purple': '#a55eea',
'pink': '#f66d9b',
'red': '#fa4654',
'orange': '#fd9644',
'yellow': '#f1c40f',
'lime': '#7bd235',
'green': '#5eba00',
'teal': '#2bcbba',
'cyan': '#17a2b8',
'gray': '#868e96',
};
</script>
<!-- Libs JS -->
<script src="../dist/libs/jquery/dist/jquery.min.js?1576401968"></script>
<script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1576401968"></script>
<script src="../dist/libs/autosize/dist/autosize.min.js?1576401968"></script>
<script src="../dist/libs/imask/dist/imask.min.js?1576401968"></script>
<script src="../dist/libs/selectize/dist/js/standalone/selectize.min.js?1576401968"></script>
<script src="../dist/libs/apexcharts/dist/apexcharts.min.js?1576401968"></script>
<script src="../dist/libs/jqvmap/dist/jquery.vmap.min.js?1576401968"></script>
<script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.world.js?1576401968"></script>
<script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.usa.js?1576401968"></script>
<script src="../dist/libs/jqvmap/dist/maps/continents/jquery.vmap.europe.js?1576401968"></script>
<script src="../dist/libs/peity/jquery.peity.min.js?1576401968"></script>
<script src="../dist/libs/selectize/dist/js/selectize.min.js?1576401968"></script>
<script src="../dist/libs/fullcalendar/core/main.min.js?1576401968"></script>
<script src="../dist/libs/fullcalendar/daygrid/main.min.js?1576401968"></script>
<script src="../dist/libs/fullcalendar/interaction/main.min.js?1576401968"></script>
<script src="../dist/libs/fullcalendar/timegrid/main.min.js?1576401968"></script>
<script src="../dist/libs/fullcalendar/list/main.min.js?1576401968"></script>
<!-- Tabler Core -->
<script src="../dist/js/tabler.min.js?1576401968"></script>
<script src="../dist/js/tabler.min.js?1576701882"></script>
<!-- Tabler Plugins -->
<script src="../dist/js/tabler-charts.min.js?1576401968"></script>
<script src="../dist/js/tabler-charts.min.js?1576701882"></script>
<script>
document.body.style.display = 'block';
</script>

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-alpha
* @version v1.0.0-alpha
* @link https://github.com/tabler/tabler
* Copyright 2018-2019 The Tabler Authors
* Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -25,382 +25,537 @@
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
<title>Cursors - Documentation - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
<!-- Libs CSS -->
<link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1576401968" rel="stylesheet"/>
<link href="../dist/libs/selectize/dist/css/selectize.css?1576401968" rel="stylesheet"/>
<link href="../dist/libs/fullcalendar/core/main.min.css?1576401968" rel="stylesheet"/>
<link href="../dist/libs/fullcalendar/daygrid/main.min.css?1576401968" rel="stylesheet"/>
<link href="../dist/libs/fullcalendar/timegrid/main.min.css?1576401968" rel="stylesheet"/>
<link href="../dist/libs/fullcalendar/list/main.min.css?1576401968" rel="stylesheet"/>
<link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1576701882" rel="stylesheet"/>
<link href="../dist/libs/selectize/dist/css/selectize.css?1576701882" rel="stylesheet"/>
<link href="../dist/libs/fullcalendar/core/main.min.css?1576701882" rel="stylesheet"/>
<link href="../dist/libs/fullcalendar/daygrid/main.min.css?1576701882" rel="stylesheet"/>
<link href="../dist/libs/fullcalendar/timegrid/main.min.css?1576701882" rel="stylesheet"/>
<link href="../dist/libs/fullcalendar/list/main.min.css?1576701882" rel="stylesheet"/>
<!-- Tabler Core -->
<link href="../dist/css/tabler.min.css?1576401968" rel="stylesheet"/>
<link href="../dist/css/tabler.min.css?1576701882" rel="stylesheet"/>
<!-- Tabler Plugins -->
<link href="../dist/css/tabler-flags.min.css?1576401968" rel="stylesheet"/>
<link href="../dist/css/tabler-charts.min.css?1576401968" rel="stylesheet"/>
<link href="../dist/css/tabler-flags.min.css?1576701882" rel="stylesheet"/>
<link href="../dist/css/tabler-charts.min.css?1576701882" rel="stylesheet"/>
<style>
body { display: none; }
</style>
</head>
<body class="antialiased ">
<div class="layout">
<header class="layout-area-topnav navbar navbar-expand-lg navbar-light">
<div class="container">
<a class="layout-toggler" data-toggle="menubar">
<span class="layout-toggler-icon"></span>
</a>
<a href=".." class="navbar-brand text-reset mr-md-3">
<img src="../img/logo.svg" alt="Tabler" class="d-none d-md-block navbar-brand-logo">
<img src="../img/logo-small.svg" alt="Tabler" class="d-md-none navbar-brand-logo">
</a>
<ul class="nav navbar-menu align-items-center order-1 order-lg-2">
<li class="nav-item dropdown mr-3">
<a class="nav-link text-reset px-2" data-toggle="dropdown">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
<span class="badge badge-pill badge-up bg-primary">4</span>
<body class="antialiased">
<div class="wrapper">
<div class="content">
<header class="topnav topbar">
<div class="container">
<div class="navbar navbar-expand-lg navbar-light">
<a href=".." class="navbar-brand mr-4">
<img src="../img/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-lg">
<img src="../img/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-sm">
</a>
<div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right mt-3 p-0">
<div class="scrollable">
<div class="list list-row">
</div>
</div>
<div class="d-flex px-3 py-2 b-t">
<div class="flex">
<span>6 Notifications</span>
</div>
<a href="#">See all <i class="fa fa-angle-right text-muted"></i></a>
</div>
</div>
</li>
<li class="nav-item d-none d-lg-flex mr-3">
<a href="https://github.com/tabler/tabler" class="btn btn-sm btn-success" target="_blank">Source code</a>
</li>
<li class="nav-item dropdown">
<a href="#" data-toggle="dropdown"
<ul class="nav navbar-menu align-items-center ml-auto">
<li class="nav-item d-none d-lg-flex mr-3">
<a href="https://github.com/tabler/tabler" class="btn btn-sm btn-success" target="_blank">Source code</a>
</li>
<li class="nav-item dropdown">
<a href="#" data-toggle="dropdown"
class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
<span class="avatar" style="background-image: url(../img/avatars/000m.jpg)"></span>
<span class="ml-2 d-none d-lg-block leading-none">
Paweł Kuna
<span class="text-muted d-block mt-1 text-h6">Administrator</span>
</span>
</a>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
Profile
</a>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
Settings
</a>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
Inbox
<span class="badge bg-primary ml-auto">6</span>
</a>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
Message
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
Need help?
</a>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
Sign out
</a>
</div>
</li>
</ul>
</div>
</header>
<div class="layout-area-menu navbar navbar-expand-lg navbar-light">
<div class="container">
<ul class="navbar-nav flex-wrap">
<li class="nav-item">
<a class="nav-link" href="../index.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
</span>
<span class="nav-text">
Dashboard
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../form-elements.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
</span>
<span class="nav-text">
Form elements
</span>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
<span class="avatar" style="background-image: url(../img/avatars/004f.jpg)"></span>
<span class="ml-2 d-none d-lg-block leading-none">
Leesa Beaty
<span class="text-muted d-block mt-1 text-h6">Administrator</span>
</span>
</a>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
Profile
</a>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
Settings
</a>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
Inbox
<span class="badge bg-primary ml-auto">6</span>
</a>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
Message
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
Need help?
</a>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
Sign out
</a>
</div>
</li>
</ul>
</div>
</div>
</header>
<header class="topnav topbar">
<div class="navbar navbar-expand-lg navbar-light">
<div class="container">
<ul class="navbar-nav flex-wrap">
<li class="nav-item">
<a class="nav-link" href="../index.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
</span>
<span class="nav-text">
Dashboard
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../form-elements.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
</span>
<span class="nav-text">
Form elements
</span>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-error" data-toggle="dropdown" role="button"
aria-expanded="false" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
</span>
<span class="nav-text">
Base
</span>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="../buttons.html" >
<span class="nav-text">
Buttons
</span>
</a>
<a class="dropdown-item" href="../cards.html" >
<span class="nav-text">
Cards
</span>
</a>
<a class="dropdown-item" href="../c.html" >
<span class="nav-text">
C
</span>
</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="../charts.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
</span>
<span class="nav-text">
Charts
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../calendar.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
</span>
<span class="nav-text">
Calendar
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../users.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
</span>
<span class="nav-text">
Users
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../gallery.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
</span>
<span class="nav-text">
Gallery
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../layouts.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
</span>
<span class="nav-text">
Layouts
</span>
</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="../docs/index.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
</span>
<span class="nav-text">
Documentation
</span>
</a>
</li>
</ul>
</div>
</div>
<div class="layout-area-menu-backdrop" data-toggle="menubar"></div>
<div class="layout-area-main">
<main class="container my-4 flex-fill">
<!-- Page title -->
<div class="page-title-box">
<div class="row align-items-center">
<div class="col-auto">
<h2 class="page-title">
Documentation
</h2>
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="9" y1="15" x2="15" y2="15"></line></svg>
</span>
<span class="nav-text">
Error pages
</span>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="../400.html" >
<span class="nav-text">
400 page
</span>
</a>
<a class="dropdown-item" href="../401.html" >
<span class="nav-text">
401 page
</span>
</a>
<a class="dropdown-item" href="../403.html" >
<span class="nav-text">
403 page
</span>
</a>
<a class="dropdown-item" href="../404.html" >
<span class="nav-text">
404 page
</span>
</a>
<a class="dropdown-item" href="../500.html" >
<span class="nav-text">
500 page
</span>
</a>
<a class="dropdown-item" href="../503.html" >
<span class="nav-text">
503 page
</span>
</a>
<a class="dropdown-item" href="../maintenance.html" >
<span class="nav-text">
Maintenance page
</span>
</a>
</div>
</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-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
</span>
<span class="nav-text">
Base
</span>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="../buttons.html" >
<span class="nav-text">
Buttons
</span>
</a>
<a class="dropdown-item" href="../cards.html" >
<span class="nav-text">
Cards
</span>
</a>
<a class="dropdown-item" href="../calendar.html" >
<span class="nav-text">
Calendar
</span>
</a>
<a class="dropdown-item" href="../users.html" >
<span class="nav-text">
Users
</span>
</a>
<a class="dropdown-item" href="../gallery.html" >
<span class="nav-text">
Gallery
</span>
</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="../charts.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
</span>
<span class="nav-text">
Charts
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../layouts.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
</span>
<span class="nav-text">
Layouts
</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-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
</span>
<span class="nav-text">
Extra
</span>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="../invoice.html" >
<span class="nav-text">
Invoice
</span>
</a>
</div>
</li>
<li class="nav-item active dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
aria-expanded="true" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
</span>
<span class="nav-text">
Documentation
</span>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="../docs/index.html" >
<span class="nav-text">
index
</span>
</a>
<a class="dropdown-item" href="../docs/alerts.html" >
<span class="nav-text">
Alerts
</span>
</a>
<a class="dropdown-item" href="../docs/autosize.html" >
<span class="nav-text">
Autosize
</span>
</a>
<a class="dropdown-item" href="../docs/avatars.html" >
<span class="nav-text">
Avatars
</span>
</a>
<a class="dropdown-item" href="../docs/badges.html" >
<span class="nav-text">
Badges
</span>
</a>
<a class="dropdown-item" href="../docs/breadcrumb.html" >
<span class="nav-text">
Breadcrumb
</span>
</a>
<a class="dropdown-item" href="../docs/buttons.html" >
<span class="nav-text">
Buttons
</span>
</a>
<a class="dropdown-item" href="../docs/cards.html" >
<span class="nav-text">
Cards
</span>
</a>
<a class="dropdown-item" href="../docs/carousel.html" >
<span class="nav-text">
Carousel
</span>
</a>
<a class="dropdown-item" href="../docs/colors.html" >
<span class="nav-text">
Colors
</span>
</a>
<a class="dropdown-item" href="../docs/cursors.html" >
<span class="nav-text">
Cursors
</span>
</a>
<a class="dropdown-item" href="../docs/charts.html" >
<span class="nav-text">
Charts
</span>
</a>
<a class="dropdown-item" href="../docs/divider.html" >
<span class="nav-text">
Divider
</span>
</a>
<a class="dropdown-item" href="../docs/empty.html" >
<span class="nav-text">
Empty states
</span>
</a>
<a class="dropdown-item" href="../docs/flags.html" >
<span class="nav-text">
Flags
</span>
</a>
<a class="dropdown-item" href="../docs/form-elements.html" >
<span class="nav-text">
Form elements
</span>
</a>
<a class="dropdown-item" href="../docs/form-helpers.html" >
<span class="nav-text">
Form helpers
</span>
</a>
<a class="dropdown-item" href="../docs/input-mask.html" >
<span class="nav-text">
Form input mask
</span>
</a>
<a class="dropdown-item" href="../docs/progress.html" >
<span class="nav-text">
Progress
</span>
</a>
<a class="dropdown-item" href="../docs/ribbons.html" >
<span class="nav-text">
Ribbons
</span>
</a>
<a class="dropdown-item" href="../docs/spinners.html" >
<span class="nav-text">
Spinners
</span>
</a>
<a class="dropdown-item" href="../docs/steps.html" >
<span class="nav-text">
Steps
</span>
</a>
<a class="dropdown-item" href="../docs/tables.html" >
<span class="nav-text">
Tables
</span>
</a>
<a class="dropdown-item" href="../docs/tabs.html" >
<span class="nav-text">
Tabs
</span>
</a>
<a class="dropdown-item" href="../docs/timelines.html" >
<span class="nav-text">
Timelines
</span>
</a>
<a class="dropdown-item" href="../docs/toasts.html" >
<span class="nav-text">
Toasts
</span>
</a>
<a class="dropdown-item" href="../docs/tooltips.html" >
<span class="nav-text">
Tooltips
</span>
</a>
<a class="dropdown-item" href="../docs/typography.html" >
<span class="nav-text">
Typography
</span>
</a>
</div>
</li>
</ul>
<div class="navbar-search d-none d-lg-block">
<form action="." method="get">
<div class="input-icon">
<span class="input-icon-addon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
</span>
<input type="text" class="form-control form-control-light" placeholder="Search for&hellip;">
</div>
</form>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-lg-3 order-lg-1 mb-4">
<a href="https://github.com/tabler/tabler" class="btn btn-block btn-primary mb-4" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon mr-2"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>
Browse source code
</a>
<div class="list-group list-group-transparent mb-0">
<a href="../docs/index.html"
class="list-group-item list-group-item-action">
Introduction
</a>
<a href="../docs/alerts.html"
class="list-group-item list-group-item-action">
Alerts <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
</a>
<a href="../docs/autosize.html"
class="list-group-item list-group-item-action">
Autosize <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
</a>
<a href="../docs/avatars.html"
class="list-group-item list-group-item-action">
Avatars <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
</a>
<a href="../docs/badges.html"
class="list-group-item list-group-item-action">
Badges <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
</a>
<a href="../docs/breadcrumb.html"
class="list-group-item list-group-item-action">
Breadcrumb <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
</a>
<a href="../docs/buttons.html"
class="list-group-item list-group-item-action">
Buttons <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
</a>
<a href="../docs/cards.html"
class="list-group-item list-group-item-action">
Cards <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
</a>
<a href="../docs/carousel.html"
class="list-group-item list-group-item-action">
Carousel
</a>
<a href="../docs/colors.html"
class="list-group-item list-group-item-action">
Colors <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
</a>
<a href="../docs/cursors.html"
class="list-group-item list-group-item-action active">
Cursors
</a>
<a href="../docs/charts.html"
class="list-group-item list-group-item-action">
Charts
</a>
<a href="../docs/divider.html"
class="list-group-item list-group-item-action">
Divider <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
</a>
<a href="../docs/empty.html"
class="list-group-item list-group-item-action">
Empty states
</a>
<a href="../docs/flags.html"
class="list-group-item list-group-item-action">
Flags <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
</a>
<a href="../docs/form-elements.html"
class="list-group-item list-group-item-action">
Form Elements
</a>
<a href="../docs/form-helpers.html"
class="list-group-item list-group-item-action">
Form helpers
</a>
<a href="../docs/input-mask.html"
class="list-group-item list-group-item-action">
Input mask
</a>
<a href="../docs/progress.html"
class="list-group-item list-group-item-action">
Progress
</a>
<a href="../docs/ribbons.html"
class="list-group-item list-group-item-action">
Ribbons
</a>
<a href="../docs/spinners.html"
class="list-group-item list-group-item-action">
Spinners <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
</a>
<a href="../docs/steps.html"
class="list-group-item list-group-item-action">
Steps
</a>
<a href="../docs/tables.html"
class="list-group-item list-group-item-action">
Tables
</a>
<a href="../docs/tabs.html"
class="list-group-item list-group-item-action">
Tabs
</a>
<a href="../docs/timelines.html"
class="list-group-item list-group-item-action">
Timelines
</a>
<a href="../docs/toasts.html"
class="list-group-item list-group-item-action">
Toasts
</a>
<a href="../docs/tooltips.html"
class="list-group-item list-group-item-action">
Tooltips
</a>
<a href="../docs/typography.html"
class="list-group-item list-group-item-action">
Typography
</a>
</header>
<div class="content-page">
<main class="container my-4 flex-fill">
<!-- Page title -->
<div class="page-title-box">
<div class="row align-items-center">
<div class="col-auto">
<h2 class="page-title">
Documentation
</h2>
</div>
</div>
</div>
<div class="col-lg-9">
<div class="card">
<div class="card-body p-md-6 p-xl-7">
<div class="markdown">
<h2 class="h1 mt-0 mb-3">Cursors
</h2>
<h3 id="cursor-utilities">Cursor utilities</h3>
<ul>
<li><code class="highlighter-rouge">.cursor-auto</code>- cursor style depends on whats inside element</li>
<li><code class="highlighter-rouge">.cursor-pointer</code> - pointing cursor</li>
<li><code class="highlighter-rouge">.cursor-move</code> - cursor showing that user can move something</li>
<li><code class="highlighter-rouge">.cursor-not-allowed</code> - cursor showing that user is not allowed to do something</li>
<li><code class="highlighter-rouge">.cursor-zoom-in</code> - cursor showing that user can zoom in</li>
<li><code class="highlighter-rouge">.cursor-zoom-out</code> - cursor showing that user can zoom out</li>
</ul>
<div class="example">
<div class="row text-center">
<div class="col-4 mb-3">
<div class="cursor-auto bg-light py-3">Cursor auto</div>
</div>
<div class="col-4 mb-3">
<div class="cursor-pointer bg-light py-3">Cursor pointer</div>
</div>
<div class="col-4 mb-3">
<div class="cursor-move bg-light py-3">Cursor move</div>
</div>
<div class="col-4">
<div class="cursor-not-allowed bg-light py-3">Cursor not allowed</div>
</div>
<div class="col-4">
<div class="cursor-zoom-in bg-light py-3">Cursor zoom in</div>
</div>
<div class="col-4">
<div class="cursor-zoom-out bg-light py-3">Cursor zoom out</div>
<div class="row justify-content-center">
<div class="col-lg-3 order-lg-1 mb-4">
<a href="https://github.com/tabler/tabler" class="btn btn-block btn-primary mb-4" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon mr-2"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>
Browse source code
</a>
<div class="list-group list-group-transparent mb-0">
<a href="../docs/index.html" class="list-group-item list-group-item-action">
index
</a>
<a href="../docs/alerts.html" class="list-group-item list-group-item-action">
Alerts
</a>
<a href="../docs/autosize.html" class="list-group-item list-group-item-action">
Autosize
</a>
<a href="../docs/avatars.html" class="list-group-item list-group-item-action">
Avatars
</a>
<a href="../docs/badges.html" class="list-group-item list-group-item-action">
Badges
</a>
<a href="../docs/breadcrumb.html" class="list-group-item list-group-item-action">
Breadcrumb
</a>
<a href="../docs/buttons.html" class="list-group-item list-group-item-action">
Buttons
</a>
<a href="../docs/cards.html" class="list-group-item list-group-item-action">
Cards
</a>
<a href="../docs/carousel.html" class="list-group-item list-group-item-action">
Carousel
</a>
<a href="../docs/colors.html" class="list-group-item list-group-item-action">
Colors
</a>
<a href="../docs/cursors.html" class="list-group-item list-group-item-action active">
Cursors
</a>
<a href="../docs/charts.html" class="list-group-item list-group-item-action">
Charts
</a>
<a href="../docs/divider.html" class="list-group-item list-group-item-action">
Divider
</a>
<a href="../docs/empty.html" class="list-group-item list-group-item-action">
Empty states
</a>
<a href="../docs/flags.html" class="list-group-item list-group-item-action">
Flags
</a>
<a href="../docs/form-elements.html" class="list-group-item list-group-item-action">
Form elements
</a>
<a href="../docs/form-helpers.html" class="list-group-item list-group-item-action">
Form helpers
</a>
<a href="../docs/input-mask.html" class="list-group-item list-group-item-action">
Form input mask
</a>
<a href="../docs/progress.html" class="list-group-item list-group-item-action">
Progress
</a>
<a href="../docs/ribbons.html" class="list-group-item list-group-item-action">
Ribbons
<span class="badge bg-green ml-auto">New</span>
</a>
<a href="../docs/spinners.html" class="list-group-item list-group-item-action">
Spinners
</a>
<a href="../docs/steps.html" class="list-group-item list-group-item-action">
Steps
</a>
<a href="../docs/tables.html" class="list-group-item list-group-item-action">
Tables
</a>
<a href="../docs/tabs.html" class="list-group-item list-group-item-action">
Tabs
</a>
<a href="../docs/timelines.html" class="list-group-item list-group-item-action">
Timelines
</a>
<a href="../docs/toasts.html" class="list-group-item list-group-item-action">
Toasts
</a>
<a href="../docs/tooltips.html" class="list-group-item list-group-item-action">
Tooltips
</a>
<a href="../docs/typography.html" class="list-group-item list-group-item-action">
Typography
</a>
</div>
</div>
<div class="col-lg-9">
<div class="card">
<div class="card-body p-md-6 p-xl-7">
<div class="markdown">
<h2 class="h1 mt-0 mb-3">Cursors
</h2>
<h3 id="cursor-utilities">Cursor utilities</h3>
<ul>
<li><code class="highlighter-rouge">.cursor-auto</code>- cursor style depends on whats inside element</li>
<li><code class="highlighter-rouge">.cursor-pointer</code> - pointing cursor</li>
<li><code class="highlighter-rouge">.cursor-move</code> - cursor showing that user can move something</li>
<li><code class="highlighter-rouge">.cursor-not-allowed</code> - cursor showing that user is not allowed to do something</li>
<li><code class="highlighter-rouge">.cursor-zoom-in</code> - cursor showing that user can zoom in</li>
<li><code class="highlighter-rouge">.cursor-zoom-out</code> - cursor showing that user can zoom out</li>
</ul>
<div class="example">
<div class="row text-center">
<div class="col-4 mb-3">
<div class="cursor-auto bg-light py-3">Cursor auto</div>
</div>
<div class="col-4 mb-3">
<div class="cursor-pointer bg-light py-3">Cursor pointer</div>
</div>
<div class="col-4 mb-3">
<div class="cursor-move bg-light py-3">Cursor move</div>
</div>
<div class="col-4">
<div class="cursor-not-allowed bg-light py-3">Cursor not allowed</div>
</div>
<div class="col-4">
<div class="cursor-zoom-in bg-light py-3">Cursor zoom in</div>
</div>
<div class="col-4">
<div class="cursor-zoom-out bg-light py-3">Cursor zoom out</div>
</div>
</div>
</div>
</div>
<div class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row text-center"</span><span class="nt">&gt;</span>
<div class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row text-center"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-4 mb-3"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"cursor-auto bg-light py-3"</span><span class="nt">&gt;</span>Cursor auto<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
@@ -420,54 +575,20 @@
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"cursor-zoom-out bg-light py-3"</span><span class="nt">&gt;</span>Cursor zoom out<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
</main>
</div>
</div>
</div>
<script>
window.tabler_colors = {
'blue': '#206bc4',
'azure': '#45aaf2',
'indigo': '#6574cd',
'purple': '#a55eea',
'pink': '#f66d9b',
'red': '#fa4654',
'orange': '#fd9644',
'yellow': '#f1c40f',
'lime': '#7bd235',
'green': '#5eba00',
'teal': '#2bcbba',
'cyan': '#17a2b8',
'gray': '#868e96',
};
</script>
<!-- Libs JS -->
<script src="../dist/libs/jquery/dist/jquery.min.js?1576401968"></script>
<script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1576401968"></script>
<script src="../dist/libs/autosize/dist/autosize.min.js?1576401968"></script>
<script src="../dist/libs/imask/dist/imask.min.js?1576401968"></script>
<script src="../dist/libs/selectize/dist/js/standalone/selectize.min.js?1576401968"></script>
<script src="../dist/libs/apexcharts/dist/apexcharts.min.js?1576401968"></script>
<script src="../dist/libs/jqvmap/dist/jquery.vmap.min.js?1576401968"></script>
<script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.world.js?1576401968"></script>
<script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.usa.js?1576401968"></script>
<script src="../dist/libs/jqvmap/dist/maps/continents/jquery.vmap.europe.js?1576401968"></script>
<script src="../dist/libs/peity/jquery.peity.min.js?1576401968"></script>
<script src="../dist/libs/selectize/dist/js/selectize.min.js?1576401968"></script>
<script src="../dist/libs/fullcalendar/core/main.min.js?1576401968"></script>
<script src="../dist/libs/fullcalendar/daygrid/main.min.js?1576401968"></script>
<script src="../dist/libs/fullcalendar/interaction/main.min.js?1576401968"></script>
<script src="../dist/libs/fullcalendar/timegrid/main.min.js?1576401968"></script>
<script src="../dist/libs/fullcalendar/list/main.min.js?1576401968"></script>
<!-- Tabler Core -->
<script src="../dist/js/tabler.min.js?1576401968"></script>
<script src="../dist/js/tabler.min.js?1576701882"></script>
<!-- Tabler Plugins -->
<script src="../dist/js/tabler-charts.min.js?1576401968"></script>
<script src="../dist/js/tabler-charts.min.js?1576701882"></script>
<script>
document.body.style.display = 'block';
</script>

View File

@@ -1,7 +1,7 @@
<!doctype html>
<!--
* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
* @version 1.0-alpha
* @version v1.0.0-alpha
* @link https://github.com/tabler/tabler
* Copyright 2018-2019 The Tabler Authors
* Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -26,379 +26,534 @@
<title>Divider - Documentation - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
<meta name="description" content="A divider visually segments content into groups"/>
<!-- Libs CSS -->
<link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1576401968" rel="stylesheet"/>
<link href="../dist/libs/selectize/dist/css/selectize.css?1576401968" rel="stylesheet"/>
<link href="../dist/libs/fullcalendar/core/main.min.css?1576401968" rel="stylesheet"/>
<link href="../dist/libs/fullcalendar/daygrid/main.min.css?1576401968" rel="stylesheet"/>
<link href="../dist/libs/fullcalendar/timegrid/main.min.css?1576401968" rel="stylesheet"/>
<link href="../dist/libs/fullcalendar/list/main.min.css?1576401968" rel="stylesheet"/>
<link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1576701882" rel="stylesheet"/>
<link href="../dist/libs/selectize/dist/css/selectize.css?1576701882" rel="stylesheet"/>
<link href="../dist/libs/fullcalendar/core/main.min.css?1576701882" rel="stylesheet"/>
<link href="../dist/libs/fullcalendar/daygrid/main.min.css?1576701882" rel="stylesheet"/>
<link href="../dist/libs/fullcalendar/timegrid/main.min.css?1576701882" rel="stylesheet"/>
<link href="../dist/libs/fullcalendar/list/main.min.css?1576701882" rel="stylesheet"/>
<!-- Tabler Core -->
<link href="../dist/css/tabler.min.css?1576401968" rel="stylesheet"/>
<link href="../dist/css/tabler.min.css?1576701882" rel="stylesheet"/>
<!-- Tabler Plugins -->
<link href="../dist/css/tabler-flags.min.css?1576401968" rel="stylesheet"/>
<link href="../dist/css/tabler-charts.min.css?1576401968" rel="stylesheet"/>
<link href="../dist/css/tabler-flags.min.css?1576701882" rel="stylesheet"/>
<link href="../dist/css/tabler-charts.min.css?1576701882" rel="stylesheet"/>
<style>
body { display: none; }
</style>
</head>
<body class="antialiased ">
<div class="layout">
<header class="layout-area-topnav navbar navbar-expand-lg navbar-light">
<div class="container">
<a class="layout-toggler" data-toggle="menubar">
<span class="layout-toggler-icon"></span>
</a>
<a href=".." class="navbar-brand text-reset mr-md-3">
<img src="../img/logo.svg" alt="Tabler" class="d-none d-md-block navbar-brand-logo">
<img src="../img/logo-small.svg" alt="Tabler" class="d-md-none navbar-brand-logo">
</a>
<ul class="nav navbar-menu align-items-center order-1 order-lg-2">
<li class="nav-item dropdown mr-3">
<a class="nav-link text-reset px-2" data-toggle="dropdown">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
<span class="badge badge-pill badge-up bg-primary">4</span>
<body class="antialiased">
<div class="wrapper">
<div class="content">
<header class="topnav topbar">
<div class="container">
<div class="navbar navbar-expand-lg navbar-light">
<a href=".." class="navbar-brand mr-4">
<img src="../img/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-lg">
<img src="../img/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-sm">
</a>
<div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right mt-3 p-0">
<div class="scrollable">
<div class="list list-row">
</div>
</div>
<div class="d-flex px-3 py-2 b-t">
<div class="flex">
<span>6 Notifications</span>
</div>
<a href="#">See all <i class="fa fa-angle-right text-muted"></i></a>
</div>
</div>
</li>
<li class="nav-item d-none d-lg-flex mr-3">
<a href="https://github.com/tabler/tabler" class="btn btn-sm btn-success" target="_blank">Source code</a>
</li>
<li class="nav-item dropdown">
<a href="#" data-toggle="dropdown"
<ul class="nav navbar-menu align-items-center ml-auto">
<li class="nav-item d-none d-lg-flex mr-3">
<a href="https://github.com/tabler/tabler" class="btn btn-sm btn-success" target="_blank">Source code</a>
</li>
<li class="nav-item dropdown">
<a href="#" data-toggle="dropdown"
class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
<span class="avatar" style="background-image: url(../img/avatars/000m.jpg)"></span>
<span class="ml-2 d-none d-lg-block leading-none">
Paweł Kuna
<span class="text-muted d-block mt-1 text-h6">Administrator</span>
</span>
</a>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
Profile
</a>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
Settings
</a>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
Inbox
<span class="badge bg-primary ml-auto">6</span>
</a>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
Message
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
Need help?
</a>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
Sign out
</a>
</div>
</li>
</ul>
</div>
</header>
<div class="layout-area-menu navbar navbar-expand-lg navbar-light">
<div class="container">
<ul class="navbar-nav flex-wrap">
<li class="nav-item">
<a class="nav-link" href="../index.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
</span>
<span class="nav-text">
Dashboard
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../form-elements.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
</span>
<span class="nav-text">
Form elements
</span>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
<span class="avatar" style="background-image: url(../img/avatars/004f.jpg)"></span>
<span class="ml-2 d-none d-lg-block leading-none">
Leesa Beaty
<span class="text-muted d-block mt-1 text-h6">Administrator</span>
</span>
</a>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
Profile
</a>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
Settings
</a>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
Inbox
<span class="badge bg-primary ml-auto">6</span>
</a>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
Message
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
Need help?
</a>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
Sign out
</a>
</div>
</li>
</ul>
</div>
</div>
</header>
<header class="topnav topbar">
<div class="navbar navbar-expand-lg navbar-light">
<div class="container">
<ul class="navbar-nav flex-wrap">
<li class="nav-item">
<a class="nav-link" href="../index.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
</span>
<span class="nav-text">
Dashboard
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../form-elements.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
</span>
<span class="nav-text">
Form elements
</span>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-error" data-toggle="dropdown" role="button"
aria-expanded="false" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
</span>
<span class="nav-text">
Base
</span>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="../buttons.html" >
<span class="nav-text">
Buttons
</span>
</a>
<a class="dropdown-item" href="../cards.html" >
<span class="nav-text">
Cards
</span>
</a>
<a class="dropdown-item" href="../c.html" >
<span class="nav-text">
C
</span>
</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="../charts.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
</span>
<span class="nav-text">
Charts
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../calendar.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
</span>
<span class="nav-text">
Calendar
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../users.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
</span>
<span class="nav-text">
Users
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../gallery.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
</span>
<span class="nav-text">
Gallery
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../layouts.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
</span>
<span class="nav-text">
Layouts
</span>
</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="../docs/index.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
</span>
<span class="nav-text">
Documentation
</span>
</a>
</li>
</ul>
</div>
</div>
<div class="layout-area-menu-backdrop" data-toggle="menubar"></div>
<div class="layout-area-main">
<main class="container my-4 flex-fill">
<!-- Page title -->
<div class="page-title-box">
<div class="row align-items-center">
<div class="col-auto">
<h2 class="page-title">
Documentation
</h2>
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="9" y1="15" x2="15" y2="15"></line></svg>
</span>
<span class="nav-text">
Error pages
</span>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="../400.html" >
<span class="nav-text">
400 page
</span>
</a>
<a class="dropdown-item" href="../401.html" >
<span class="nav-text">
401 page
</span>
</a>
<a class="dropdown-item" href="../403.html" >
<span class="nav-text">
403 page
</span>
</a>
<a class="dropdown-item" href="../404.html" >
<span class="nav-text">
404 page
</span>
</a>
<a class="dropdown-item" href="../500.html" >
<span class="nav-text">
500 page
</span>
</a>
<a class="dropdown-item" href="../503.html" >
<span class="nav-text">
503 page
</span>
</a>
<a class="dropdown-item" href="../maintenance.html" >
<span class="nav-text">
Maintenance page
</span>
</a>
</div>
</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-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
</span>
<span class="nav-text">
Base
</span>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="../buttons.html" >
<span class="nav-text">
Buttons
</span>
</a>
<a class="dropdown-item" href="../cards.html" >
<span class="nav-text">
Cards
</span>
</a>
<a class="dropdown-item" href="../calendar.html" >
<span class="nav-text">
Calendar
</span>
</a>
<a class="dropdown-item" href="../users.html" >
<span class="nav-text">
Users
</span>
</a>
<a class="dropdown-item" href="../gallery.html" >
<span class="nav-text">
Gallery
</span>
</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="../charts.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
</span>
<span class="nav-text">
Charts
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../layouts.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
</span>
<span class="nav-text">
Layouts
</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-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
</span>
<span class="nav-text">
Extra
</span>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="../invoice.html" >
<span class="nav-text">
Invoice
</span>
</a>
</div>
</li>
<li class="nav-item active dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
aria-expanded="true" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
</span>
<span class="nav-text">
Documentation
</span>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="../docs/index.html" >
<span class="nav-text">
index
</span>
</a>
<a class="dropdown-item" href="../docs/alerts.html" >
<span class="nav-text">
Alerts
</span>
</a>
<a class="dropdown-item" href="../docs/autosize.html" >
<span class="nav-text">
Autosize
</span>
</a>
<a class="dropdown-item" href="../docs/avatars.html" >
<span class="nav-text">
Avatars
</span>
</a>
<a class="dropdown-item" href="../docs/badges.html" >
<span class="nav-text">
Badges
</span>
</a>
<a class="dropdown-item" href="../docs/breadcrumb.html" >
<span class="nav-text">
Breadcrumb
</span>
</a>
<a class="dropdown-item" href="../docs/buttons.html" >
<span class="nav-text">
Buttons
</span>
</a>
<a class="dropdown-item" href="../docs/cards.html" >
<span class="nav-text">
Cards
</span>
</a>
<a class="dropdown-item" href="../docs/carousel.html" >
<span class="nav-text">
Carousel
</span>
</a>
<a class="dropdown-item" href="../docs/colors.html" >
<span class="nav-text">
Colors
</span>
</a>
<a class="dropdown-item" href="../docs/cursors.html" >
<span class="nav-text">
Cursors
</span>
</a>
<a class="dropdown-item" href="../docs/charts.html" >
<span class="nav-text">
Charts
</span>
</a>
<a class="dropdown-item" href="../docs/divider.html" >
<span class="nav-text">
Divider
</span>
</a>
<a class="dropdown-item" href="../docs/empty.html" >
<span class="nav-text">
Empty states
</span>
</a>
<a class="dropdown-item" href="../docs/flags.html" >
<span class="nav-text">
Flags
</span>
</a>
<a class="dropdown-item" href="../docs/form-elements.html" >
<span class="nav-text">
Form elements
</span>
</a>
<a class="dropdown-item" href="../docs/form-helpers.html" >
<span class="nav-text">
Form helpers
</span>
</a>
<a class="dropdown-item" href="../docs/input-mask.html" >
<span class="nav-text">
Form input mask
</span>
</a>
<a class="dropdown-item" href="../docs/progress.html" >
<span class="nav-text">
Progress
</span>
</a>
<a class="dropdown-item" href="../docs/ribbons.html" >
<span class="nav-text">
Ribbons
</span>
</a>
<a class="dropdown-item" href="../docs/spinners.html" >
<span class="nav-text">
Spinners
</span>
</a>
<a class="dropdown-item" href="../docs/steps.html" >
<span class="nav-text">
Steps
</span>
</a>
<a class="dropdown-item" href="../docs/tables.html" >
<span class="nav-text">
Tables
</span>
</a>
<a class="dropdown-item" href="../docs/tabs.html" >
<span class="nav-text">
Tabs
</span>
</a>
<a class="dropdown-item" href="../docs/timelines.html" >
<span class="nav-text">
Timelines
</span>
</a>
<a class="dropdown-item" href="../docs/toasts.html" >
<span class="nav-text">
Toasts
</span>
</a>
<a class="dropdown-item" href="../docs/tooltips.html" >
<span class="nav-text">
Tooltips
</span>
</a>
<a class="dropdown-item" href="../docs/typography.html" >
<span class="nav-text">
Typography
</span>
</a>
</div>
</li>
</ul>
<div class="navbar-search d-none d-lg-block">
<form action="." method="get">
<div class="input-icon">
<span class="input-icon-addon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
</span>
<input type="text" class="form-control form-control-light" placeholder="Search for&hellip;">
</div>
</form>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-lg-3 order-lg-1 mb-4">
<a href="https://github.com/tabler/tabler" class="btn btn-block btn-primary mb-4" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon mr-2"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>
Browse source code
</a>
<div class="list-group list-group-transparent mb-0">
<a href="../docs/index.html"
class="list-group-item list-group-item-action">
Introduction
</a>
<a href="../docs/alerts.html"
class="list-group-item list-group-item-action">
Alerts <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
</a>
<a href="../docs/autosize.html"
class="list-group-item list-group-item-action">
Autosize <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
</a>
<a href="../docs/avatars.html"
class="list-group-item list-group-item-action">
Avatars <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
</a>
<a href="../docs/badges.html"
class="list-group-item list-group-item-action">
Badges <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
</a>
<a href="../docs/breadcrumb.html"
class="list-group-item list-group-item-action">
Breadcrumb <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
</a>
<a href="../docs/buttons.html"
class="list-group-item list-group-item-action">
Buttons <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
</a>
<a href="../docs/cards.html"
class="list-group-item list-group-item-action">
Cards <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
</a>
<a href="../docs/carousel.html"
class="list-group-item list-group-item-action">
Carousel
</a>
<a href="../docs/colors.html"
class="list-group-item list-group-item-action">
Colors <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
</a>
<a href="../docs/cursors.html"
class="list-group-item list-group-item-action">
Cursors
</a>
<a href="../docs/charts.html"
class="list-group-item list-group-item-action">
Charts
</a>
<a href="../docs/divider.html"
class="list-group-item list-group-item-action active">
Divider <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
</a>
<a href="../docs/empty.html"
class="list-group-item list-group-item-action">
Empty states
</a>
<a href="../docs/flags.html"
class="list-group-item list-group-item-action">
Flags <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
</a>
<a href="../docs/form-elements.html"
class="list-group-item list-group-item-action">
Form Elements
</a>
<a href="../docs/form-helpers.html"
class="list-group-item list-group-item-action">
Form helpers
</a>
<a href="../docs/input-mask.html"
class="list-group-item list-group-item-action">
Input mask
</a>
<a href="../docs/progress.html"
class="list-group-item list-group-item-action">
Progress
</a>
<a href="../docs/ribbons.html"
class="list-group-item list-group-item-action">
Ribbons
</a>
<a href="../docs/spinners.html"
class="list-group-item list-group-item-action">
Spinners <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
</a>
<a href="../docs/steps.html"
class="list-group-item list-group-item-action">
Steps
</a>
<a href="../docs/tables.html"
class="list-group-item list-group-item-action">
Tables
</a>
<a href="../docs/tabs.html"
class="list-group-item list-group-item-action">
Tabs
</a>
<a href="../docs/timelines.html"
class="list-group-item list-group-item-action">
Timelines
</a>
<a href="../docs/toasts.html"
class="list-group-item list-group-item-action">
Toasts
</a>
<a href="../docs/tooltips.html"
class="list-group-item list-group-item-action">
Tooltips
</a>
<a href="../docs/typography.html"
class="list-group-item list-group-item-action">
Typography
</a>
</header>
<div class="content-page">
<main class="container my-4 flex-fill">
<!-- Page title -->
<div class="page-title-box">
<div class="row align-items-center">
<div class="col-auto">
<h2 class="page-title">
Documentation
</h2>
</div>
</div>
</div>
<div class="col-lg-9">
<div class="card">
<div class="card-body p-md-6 p-xl-7">
<div class="markdown">
<p class="mb-4 float-right">
<a href="https://getbootstrap.com/docs/4.4/components/dropdowns/#dividers" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon pr-1 text-blue"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>
Bootstrap documentation
</a>
</p>
<h2 class="h1 mt-0 mb-3">Divider
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
</h2>
<p>A divider visually segments content into groups</p>
<h3 id="default-markup">Default markup</h3>
<div class="example example-bg">
<div class="example-column example-column-1">
<p>
Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
</p>
<div class="hr-text">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 hr-text-center">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="row justify-content-center">
<div class="col-lg-3 order-lg-1 mb-4">
<a href="https://github.com/tabler/tabler" class="btn btn-block btn-primary mb-4" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon mr-2"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>
Browse source code
</a>
<div class="list-group list-group-transparent mb-0">
<a href="../docs/index.html" class="list-group-item list-group-item-action">
index
</a>
<a href="../docs/alerts.html" class="list-group-item list-group-item-action">
Alerts
</a>
<a href="../docs/autosize.html" class="list-group-item list-group-item-action">
Autosize
</a>
<a href="../docs/avatars.html" class="list-group-item list-group-item-action">
Avatars
</a>
<a href="../docs/badges.html" class="list-group-item list-group-item-action">
Badges
</a>
<a href="../docs/breadcrumb.html" class="list-group-item list-group-item-action">
Breadcrumb
</a>
<a href="../docs/buttons.html" class="list-group-item list-group-item-action">
Buttons
</a>
<a href="../docs/cards.html" class="list-group-item list-group-item-action">
Cards
</a>
<a href="../docs/carousel.html" class="list-group-item list-group-item-action">
Carousel
</a>
<a href="../docs/colors.html" class="list-group-item list-group-item-action">
Colors
</a>
<a href="../docs/cursors.html" class="list-group-item list-group-item-action">
Cursors
</a>
<a href="../docs/charts.html" class="list-group-item list-group-item-action">
Charts
</a>
<a href="../docs/divider.html" class="list-group-item list-group-item-action active">
Divider
</a>
<a href="../docs/empty.html" class="list-group-item list-group-item-action">
Empty states
</a>
<a href="../docs/flags.html" class="list-group-item list-group-item-action">
Flags
</a>
<a href="../docs/form-elements.html" class="list-group-item list-group-item-action">
Form elements
</a>
<a href="../docs/form-helpers.html" class="list-group-item list-group-item-action">
Form helpers
</a>
<a href="../docs/input-mask.html" class="list-group-item list-group-item-action">
Form input mask
</a>
<a href="../docs/progress.html" class="list-group-item list-group-item-action">
Progress
</a>
<a href="../docs/ribbons.html" class="list-group-item list-group-item-action">
Ribbons
<span class="badge bg-green ml-auto">New</span>
</a>
<a href="../docs/spinners.html" class="list-group-item list-group-item-action">
Spinners
</a>
<a href="../docs/steps.html" class="list-group-item list-group-item-action">
Steps
</a>
<a href="../docs/tables.html" class="list-group-item list-group-item-action">
Tables
</a>
<a href="../docs/tabs.html" class="list-group-item list-group-item-action">
Tabs
</a>
<a href="../docs/timelines.html" class="list-group-item list-group-item-action">
Timelines
</a>
<a href="../docs/toasts.html" class="list-group-item list-group-item-action">
Toasts
</a>
<a href="../docs/tooltips.html" class="list-group-item list-group-item-action">
Tooltips
</a>
<a href="../docs/typography.html" class="list-group-item list-group-item-action">
Typography
</a>
</div>
</div>
<div class="col-lg-9">
<div class="card">
<div class="card-body p-md-6 p-xl-7">
<div class="markdown">
<p class="mb-4 float-right">
<a href="https://getbootstrap.com/docs/4.4/components/dropdowns/#dividers" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon pr-1 text-blue"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>
Bootstrap documentation
</a>
</p>
<h2 class="h1 mt-0 mb-3">Divider
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
</h2>
<p>A divider visually segments content into groups</p>
<h3 id="default-markup">Default markup</h3>
<div class="example example-bg">
<div class="example-column example-column-1">
<p>
Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
</p>
<div class="hr-text">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 hr-text-center">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>
</div>
</div>
<div class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;p&gt;</span>
<div 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!
<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>Left divider<span class="nt">&lt;/div&gt;</span>
@@ -413,76 +568,42 @@
<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>
</div>
<h3 id="divider-color">Divider color</h3>
<p>Customize the color of the divider. You can click <a href="./colors.html">here</a> to see the list of available colors.</p>
<div class="example example-bg">
<div class="example-column example-column-1">
<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>
</div>
<div class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;p&gt;</span>
<h3 id="divider-color">Divider color</h3>
<p>Customize the color of the divider. You can click <a href="./colors.html">here</a> to see the list of available colors.</p>
<div class="example example-bg">
<div class="example-column example-column-1">
<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>
</div>
<div class="highlight">
<pre><code class="language-html" data-lang="html"><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-green"</span><span class="nt">&gt;</span>Green 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>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
</main>
</div>
</div>
</div>
<script>
window.tabler_colors = {
'blue': '#206bc4',
'azure': '#45aaf2',
'indigo': '#6574cd',
'purple': '#a55eea',
'pink': '#f66d9b',
'red': '#fa4654',
'orange': '#fd9644',
'yellow': '#f1c40f',
'lime': '#7bd235',
'green': '#5eba00',
'teal': '#2bcbba',
'cyan': '#17a2b8',
'gray': '#868e96',
};
</script>
<!-- Libs JS -->
<script src="../dist/libs/jquery/dist/jquery.min.js?1576401968"></script>
<script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1576401968"></script>
<script src="../dist/libs/autosize/dist/autosize.min.js?1576401968"></script>
<script src="../dist/libs/imask/dist/imask.min.js?1576401968"></script>
<script src="../dist/libs/selectize/dist/js/standalone/selectize.min.js?1576401968"></script>
<script src="../dist/libs/apexcharts/dist/apexcharts.min.js?1576401968"></script>
<script src="../dist/libs/jqvmap/dist/jquery.vmap.min.js?1576401968"></script>
<script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.world.js?1576401968"></script>
<script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.usa.js?1576401968"></script>
<script src="../dist/libs/jqvmap/dist/maps/continents/jquery.vmap.europe.js?1576401968"></script>
<script src="../dist/libs/peity/jquery.peity.min.js?1576401968"></script>
<script src="../dist/libs/selectize/dist/js/selectize.min.js?1576401968"></script>
<script src="../dist/libs/fullcalendar/core/main.min.js?1576401968"></script>
<script src="../dist/libs/fullcalendar/daygrid/main.min.js?1576401968"></script>
<script src="../dist/libs/fullcalendar/interaction/main.min.js?1576401968"></script>
<script src="../dist/libs/fullcalendar/timegrid/main.min.js?1576401968"></script>
<script src="../dist/libs/fullcalendar/list/main.min.js?1576401968"></script>
<!-- Tabler Core -->
<script src="../dist/js/tabler.min.js?1576401968"></script>
<script src="../dist/js/tabler.min.js?1576701882"></script>
<!-- Tabler Plugins -->
<script src="../dist/js/tabler-charts.min.js?1576401968"></script>
<script src="../dist/js/tabler-charts.min.js?1576701882"></script>
<script>
document.body.style.display = 'block';
</script>

View File

@@ -1,7 +1,7 @@
<!doctype html>
<!--
* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
* @version 1.0-alpha
* @version v1.0.0-alpha
* @link https://github.com/tabler/tabler
* Copyright 2018-2019 The Tabler Authors
* Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -26,369 +26,525 @@
<title>Empty states - Documentation - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
<meta name="description" content="Empty states/blanks are commonly used as placeholders for first time use, empty data or error screens."/>
<!-- Libs CSS -->
<link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1576401968" rel="stylesheet"/>
<link href="../dist/libs/selectize/dist/css/selectize.css?1576401968" rel="stylesheet"/>
<link href="../dist/libs/fullcalendar/core/main.min.css?1576401968" rel="stylesheet"/>
<link href="../dist/libs/fullcalendar/daygrid/main.min.css?1576401968" rel="stylesheet"/>
<link href="../dist/libs/fullcalendar/timegrid/main.min.css?1576401968" rel="stylesheet"/>
<link href="../dist/libs/fullcalendar/list/main.min.css?1576401968" rel="stylesheet"/>
<link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1576701882" rel="stylesheet"/>
<link href="../dist/libs/selectize/dist/css/selectize.css?1576701882" rel="stylesheet"/>
<link href="../dist/libs/fullcalendar/core/main.min.css?1576701882" rel="stylesheet"/>
<link href="../dist/libs/fullcalendar/daygrid/main.min.css?1576701882" rel="stylesheet"/>
<link href="../dist/libs/fullcalendar/timegrid/main.min.css?1576701882" rel="stylesheet"/>
<link href="../dist/libs/fullcalendar/list/main.min.css?1576701882" rel="stylesheet"/>
<!-- Tabler Core -->
<link href="../dist/css/tabler.min.css?1576401968" rel="stylesheet"/>
<link href="../dist/css/tabler.min.css?1576701882" rel="stylesheet"/>
<!-- Tabler Plugins -->
<link href="../dist/css/tabler-flags.min.css?1576401968" rel="stylesheet"/>
<link href="../dist/css/tabler-charts.min.css?1576401968" rel="stylesheet"/>
<link href="../dist/css/tabler-flags.min.css?1576701882" rel="stylesheet"/>
<link href="../dist/css/tabler-charts.min.css?1576701882" rel="stylesheet"/>
<style>
body { display: none; }
</style>
</head>
<body class="antialiased ">
<div class="layout">
<header class="layout-area-topnav navbar navbar-expand-lg navbar-light">
<div class="container">
<a class="layout-toggler" data-toggle="menubar">
<span class="layout-toggler-icon"></span>
</a>
<a href=".." class="navbar-brand text-reset mr-md-3">
<img src="../img/logo.svg" alt="Tabler" class="d-none d-md-block navbar-brand-logo">
<img src="../img/logo-small.svg" alt="Tabler" class="d-md-none navbar-brand-logo">
</a>
<ul class="nav navbar-menu align-items-center order-1 order-lg-2">
<li class="nav-item dropdown mr-3">
<a class="nav-link text-reset px-2" data-toggle="dropdown">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
<span class="badge badge-pill badge-up bg-primary">4</span>
<body class="antialiased">
<div class="wrapper">
<div class="content">
<header class="topnav topbar">
<div class="container">
<div class="navbar navbar-expand-lg navbar-light">
<a href=".." class="navbar-brand mr-4">
<img src="../img/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-lg">
<img src="../img/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-sm">
</a>
<div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right mt-3 p-0">
<div class="scrollable">
<div class="list list-row">
</div>
</div>
<div class="d-flex px-3 py-2 b-t">
<div class="flex">
<span>6 Notifications</span>
</div>
<a href="#">See all <i class="fa fa-angle-right text-muted"></i></a>
</div>
</div>
</li>
<li class="nav-item d-none d-lg-flex mr-3">
<a href="https://github.com/tabler/tabler" class="btn btn-sm btn-success" target="_blank">Source code</a>
</li>
<li class="nav-item dropdown">
<a href="#" data-toggle="dropdown"
<ul class="nav navbar-menu align-items-center ml-auto">
<li class="nav-item d-none d-lg-flex mr-3">
<a href="https://github.com/tabler/tabler" class="btn btn-sm btn-success" target="_blank">Source code</a>
</li>
<li class="nav-item dropdown">
<a href="#" data-toggle="dropdown"
class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
<span class="avatar" style="background-image: url(../img/avatars/000m.jpg)"></span>
<span class="ml-2 d-none d-lg-block leading-none">
Paweł Kuna
<span class="text-muted d-block mt-1 text-h6">Administrator</span>
</span>
</a>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
Profile
</a>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
Settings
</a>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
Inbox
<span class="badge bg-primary ml-auto">6</span>
</a>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
Message
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
Need help?
</a>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
Sign out
</a>
</div>
</li>
</ul>
</div>
</header>
<div class="layout-area-menu navbar navbar-expand-lg navbar-light">
<div class="container">
<ul class="navbar-nav flex-wrap">
<li class="nav-item">
<a class="nav-link" href="../index.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
</span>
<span class="nav-text">
Dashboard
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../form-elements.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
</span>
<span class="nav-text">
Form elements
</span>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
<span class="avatar" style="background-image: url(../img/avatars/004f.jpg)"></span>
<span class="ml-2 d-none d-lg-block leading-none">
Leesa Beaty
<span class="text-muted d-block mt-1 text-h6">Administrator</span>
</span>
</a>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
Profile
</a>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
Settings
</a>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
Inbox
<span class="badge bg-primary ml-auto">6</span>
</a>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
Message
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
Need help?
</a>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
Sign out
</a>
</div>
</li>
</ul>
</div>
</div>
</header>
<header class="topnav topbar">
<div class="navbar navbar-expand-lg navbar-light">
<div class="container">
<ul class="navbar-nav flex-wrap">
<li class="nav-item">
<a class="nav-link" href="../index.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
</span>
<span class="nav-text">
Dashboard
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../form-elements.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
</span>
<span class="nav-text">
Form elements
</span>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-error" data-toggle="dropdown" role="button"
aria-expanded="false" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
</span>
<span class="nav-text">
Base
</span>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="../buttons.html" >
<span class="nav-text">
Buttons
</span>
</a>
<a class="dropdown-item" href="../cards.html" >
<span class="nav-text">
Cards
</span>
</a>
<a class="dropdown-item" href="../c.html" >
<span class="nav-text">
C
</span>
</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="../charts.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
</span>
<span class="nav-text">
Charts
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../calendar.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
</span>
<span class="nav-text">
Calendar
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../users.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
</span>
<span class="nav-text">
Users
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../gallery.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
</span>
<span class="nav-text">
Gallery
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../layouts.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
</span>
<span class="nav-text">
Layouts
</span>
</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="../docs/index.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
</span>
<span class="nav-text">
Documentation
</span>
</a>
</li>
</ul>
</div>
</div>
<div class="layout-area-menu-backdrop" data-toggle="menubar"></div>
<div class="layout-area-main">
<main class="container my-4 flex-fill">
<!-- Page title -->
<div class="page-title-box">
<div class="row align-items-center">
<div class="col-auto">
<h2 class="page-title">
Documentation
</h2>
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="9" y1="15" x2="15" y2="15"></line></svg>
</span>
<span class="nav-text">
Error pages
</span>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="../400.html" >
<span class="nav-text">
400 page
</span>
</a>
<a class="dropdown-item" href="../401.html" >
<span class="nav-text">
401 page
</span>
</a>
<a class="dropdown-item" href="../403.html" >
<span class="nav-text">
403 page
</span>
</a>
<a class="dropdown-item" href="../404.html" >
<span class="nav-text">
404 page
</span>
</a>
<a class="dropdown-item" href="../500.html" >
<span class="nav-text">
500 page
</span>
</a>
<a class="dropdown-item" href="../503.html" >
<span class="nav-text">
503 page
</span>
</a>
<a class="dropdown-item" href="../maintenance.html" >
<span class="nav-text">
Maintenance page
</span>
</a>
</div>
</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-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
</span>
<span class="nav-text">
Base
</span>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="../buttons.html" >
<span class="nav-text">
Buttons
</span>
</a>
<a class="dropdown-item" href="../cards.html" >
<span class="nav-text">
Cards
</span>
</a>
<a class="dropdown-item" href="../calendar.html" >
<span class="nav-text">
Calendar
</span>
</a>
<a class="dropdown-item" href="../users.html" >
<span class="nav-text">
Users
</span>
</a>
<a class="dropdown-item" href="../gallery.html" >
<span class="nav-text">
Gallery
</span>
</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="../charts.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
</span>
<span class="nav-text">
Charts
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../layouts.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
</span>
<span class="nav-text">
Layouts
</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-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
</span>
<span class="nav-text">
Extra
</span>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="../invoice.html" >
<span class="nav-text">
Invoice
</span>
</a>
</div>
</li>
<li class="nav-item active dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
aria-expanded="true" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
</span>
<span class="nav-text">
Documentation
</span>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="../docs/index.html" >
<span class="nav-text">
index
</span>
</a>
<a class="dropdown-item" href="../docs/alerts.html" >
<span class="nav-text">
Alerts
</span>
</a>
<a class="dropdown-item" href="../docs/autosize.html" >
<span class="nav-text">
Autosize
</span>
</a>
<a class="dropdown-item" href="../docs/avatars.html" >
<span class="nav-text">
Avatars
</span>
</a>
<a class="dropdown-item" href="../docs/badges.html" >
<span class="nav-text">
Badges
</span>
</a>
<a class="dropdown-item" href="../docs/breadcrumb.html" >
<span class="nav-text">
Breadcrumb
</span>
</a>
<a class="dropdown-item" href="../docs/buttons.html" >
<span class="nav-text">
Buttons
</span>
</a>
<a class="dropdown-item" href="../docs/cards.html" >
<span class="nav-text">
Cards
</span>
</a>
<a class="dropdown-item" href="../docs/carousel.html" >
<span class="nav-text">
Carousel
</span>
</a>
<a class="dropdown-item" href="../docs/colors.html" >
<span class="nav-text">
Colors
</span>
</a>
<a class="dropdown-item" href="../docs/cursors.html" >
<span class="nav-text">
Cursors
</span>
</a>
<a class="dropdown-item" href="../docs/charts.html" >
<span class="nav-text">
Charts
</span>
</a>
<a class="dropdown-item" href="../docs/divider.html" >
<span class="nav-text">
Divider
</span>
</a>
<a class="dropdown-item" href="../docs/empty.html" >
<span class="nav-text">
Empty states
</span>
</a>
<a class="dropdown-item" href="../docs/flags.html" >
<span class="nav-text">
Flags
</span>
</a>
<a class="dropdown-item" href="../docs/form-elements.html" >
<span class="nav-text">
Form elements
</span>
</a>
<a class="dropdown-item" href="../docs/form-helpers.html" >
<span class="nav-text">
Form helpers
</span>
</a>
<a class="dropdown-item" href="../docs/input-mask.html" >
<span class="nav-text">
Form input mask
</span>
</a>
<a class="dropdown-item" href="../docs/progress.html" >
<span class="nav-text">
Progress
</span>
</a>
<a class="dropdown-item" href="../docs/ribbons.html" >
<span class="nav-text">
Ribbons
</span>
</a>
<a class="dropdown-item" href="../docs/spinners.html" >
<span class="nav-text">
Spinners
</span>
</a>
<a class="dropdown-item" href="../docs/steps.html" >
<span class="nav-text">
Steps
</span>
</a>
<a class="dropdown-item" href="../docs/tables.html" >
<span class="nav-text">
Tables
</span>
</a>
<a class="dropdown-item" href="../docs/tabs.html" >
<span class="nav-text">
Tabs
</span>
</a>
<a class="dropdown-item" href="../docs/timelines.html" >
<span class="nav-text">
Timelines
</span>
</a>
<a class="dropdown-item" href="../docs/toasts.html" >
<span class="nav-text">
Toasts
</span>
</a>
<a class="dropdown-item" href="../docs/tooltips.html" >
<span class="nav-text">
Tooltips
</span>
</a>
<a class="dropdown-item" href="../docs/typography.html" >
<span class="nav-text">
Typography
</span>
</a>
</div>
</li>
</ul>
<div class="navbar-search d-none d-lg-block">
<form action="." method="get">
<div class="input-icon">
<span class="input-icon-addon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
</span>
<input type="text" class="form-control form-control-light" placeholder="Search for&hellip;">
</div>
</form>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-lg-3 order-lg-1 mb-4">
<a href="https://github.com/tabler/tabler" class="btn btn-block btn-primary mb-4" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon mr-2"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>
Browse source code
</a>
<div class="list-group list-group-transparent mb-0">
<a href="../docs/index.html"
class="list-group-item list-group-item-action">
Introduction
</a>
<a href="../docs/alerts.html"
class="list-group-item list-group-item-action">
Alerts <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
</a>
<a href="../docs/autosize.html"
class="list-group-item list-group-item-action">
Autosize <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
</a>
<a href="../docs/avatars.html"
class="list-group-item list-group-item-action">
Avatars <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
</a>
<a href="../docs/badges.html"
class="list-group-item list-group-item-action">
Badges <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
</a>
<a href="../docs/breadcrumb.html"
class="list-group-item list-group-item-action">
Breadcrumb <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
</a>
<a href="../docs/buttons.html"
class="list-group-item list-group-item-action">
Buttons <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
</a>
<a href="../docs/cards.html"
class="list-group-item list-group-item-action">
Cards <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
</a>
<a href="../docs/carousel.html"
class="list-group-item list-group-item-action">
Carousel
</a>
<a href="../docs/colors.html"
class="list-group-item list-group-item-action">
Colors <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
</a>
<a href="../docs/cursors.html"
class="list-group-item list-group-item-action">
Cursors
</a>
<a href="../docs/charts.html"
class="list-group-item list-group-item-action">
Charts
</a>
<a href="../docs/divider.html"
class="list-group-item list-group-item-action">
Divider <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
</a>
<a href="../docs/empty.html"
class="list-group-item list-group-item-action active">
Empty states
</a>
<a href="../docs/flags.html"
class="list-group-item list-group-item-action">
Flags <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
</a>
<a href="../docs/form-elements.html"
class="list-group-item list-group-item-action">
Form Elements
</a>
<a href="../docs/form-helpers.html"
class="list-group-item list-group-item-action">
Form helpers
</a>
<a href="../docs/input-mask.html"
class="list-group-item list-group-item-action">
Input mask
</a>
<a href="../docs/progress.html"
class="list-group-item list-group-item-action">
Progress
</a>
<a href="../docs/ribbons.html"
class="list-group-item list-group-item-action">
Ribbons
</a>
<a href="../docs/spinners.html"
class="list-group-item list-group-item-action">
Spinners <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
</a>
<a href="../docs/steps.html"
class="list-group-item list-group-item-action">
Steps
</a>
<a href="../docs/tables.html"
class="list-group-item list-group-item-action">
Tables
</a>
<a href="../docs/tabs.html"
class="list-group-item list-group-item-action">
Tabs
</a>
<a href="../docs/timelines.html"
class="list-group-item list-group-item-action">
Timelines
</a>
<a href="../docs/toasts.html"
class="list-group-item list-group-item-action">
Toasts
</a>
<a href="../docs/tooltips.html"
class="list-group-item list-group-item-action">
Tooltips
</a>
<a href="../docs/typography.html"
class="list-group-item list-group-item-action">
Typography
</a>
</header>
<div class="content-page">
<main class="container my-4 flex-fill">
<!-- Page title -->
<div class="page-title-box">
<div class="row align-items-center">
<div class="col-auto">
<h2 class="page-title">
Documentation
</h2>
</div>
</div>
</div>
<div class="col-lg-9">
<div class="card">
<div class="card-body p-md-6 p-xl-7">
<div class="markdown">
<h2 class="h1 mt-0 mb-3">Empty states
</h2>
<p>Empty states/blanks are commonly used as placeholders for first time use, empty data or error screens.</p>
<h3 id="default-markup">Default markup</h3>
<div class="example">
<div class="empty">
<div class="empty-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
</div>
<p class="empty-title h3">No results found</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">
Search again
</a>
<div class="row justify-content-center">
<div class="col-lg-3 order-lg-1 mb-4">
<a href="https://github.com/tabler/tabler" class="btn btn-block btn-primary mb-4" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon mr-2"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>
Browse source code
</a>
<div class="list-group list-group-transparent mb-0">
<a href="../docs/index.html" class="list-group-item list-group-item-action">
index
</a>
<a href="../docs/alerts.html" class="list-group-item list-group-item-action">
Alerts
</a>
<a href="../docs/autosize.html" class="list-group-item list-group-item-action">
Autosize
</a>
<a href="../docs/avatars.html" class="list-group-item list-group-item-action">
Avatars
</a>
<a href="../docs/badges.html" class="list-group-item list-group-item-action">
Badges
</a>
<a href="../docs/breadcrumb.html" class="list-group-item list-group-item-action">
Breadcrumb
</a>
<a href="../docs/buttons.html" class="list-group-item list-group-item-action">
Buttons
</a>
<a href="../docs/cards.html" class="list-group-item list-group-item-action">
Cards
</a>
<a href="../docs/carousel.html" class="list-group-item list-group-item-action">
Carousel
</a>
<a href="../docs/colors.html" class="list-group-item list-group-item-action">
Colors
</a>
<a href="../docs/cursors.html" class="list-group-item list-group-item-action">
Cursors
</a>
<a href="../docs/charts.html" class="list-group-item list-group-item-action">
Charts
</a>
<a href="../docs/divider.html" class="list-group-item list-group-item-action">
Divider
</a>
<a href="../docs/empty.html" class="list-group-item list-group-item-action active">
Empty states
</a>
<a href="../docs/flags.html" class="list-group-item list-group-item-action">
Flags
</a>
<a href="../docs/form-elements.html" class="list-group-item list-group-item-action">
Form elements
</a>
<a href="../docs/form-helpers.html" class="list-group-item list-group-item-action">
Form helpers
</a>
<a href="../docs/input-mask.html" class="list-group-item list-group-item-action">
Form input mask
</a>
<a href="../docs/progress.html" class="list-group-item list-group-item-action">
Progress
</a>
<a href="../docs/ribbons.html" class="list-group-item list-group-item-action">
Ribbons
<span class="badge bg-green ml-auto">New</span>
</a>
<a href="../docs/spinners.html" class="list-group-item list-group-item-action">
Spinners
</a>
<a href="../docs/steps.html" class="list-group-item list-group-item-action">
Steps
</a>
<a href="../docs/tables.html" class="list-group-item list-group-item-action">
Tables
</a>
<a href="../docs/tabs.html" class="list-group-item list-group-item-action">
Tabs
</a>
<a href="../docs/timelines.html" class="list-group-item list-group-item-action">
Timelines
</a>
<a href="../docs/toasts.html" class="list-group-item list-group-item-action">
Toasts
</a>
<a href="../docs/tooltips.html" class="list-group-item list-group-item-action">
Tooltips
</a>
<a href="../docs/typography.html" class="list-group-item list-group-item-action">
Typography
</a>
</div>
</div>
<div class="col-lg-9">
<div class="card">
<div class="card-body p-md-6 p-xl-7">
<div class="markdown">
<h2 class="h1 mt-0 mb-3">Empty states
</h2>
<p>Empty states/blanks are commonly used as placeholders for first time use, empty data or error screens.</p>
<h3 id="default-markup">Default markup</h3>
<div class="example">
<div class="empty">
<div class="empty-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
</div>
<p class="empty-title h3">No results found</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="../index.html" class="btn btn-primary">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
Search again
</a>
</div>
</div>
</div>
</div>
<div 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>
<div 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;svg</span> <span class="na">xmlns=</span><span class="s">"http://www.w3.org/2000/svg"</span> <span class="na">width=</span><span class="s">"24"</span> <span class="na">height=</span><span class="s">"24"</span> <span class="na">viewBox=</span><span class="s">"0 0 24 24"</span> <span class="na">fill=</span><span class="s">"none"</span> <span class="na">stroke=</span><span class="s">"currentColor"</span> <span class="na">stroke-width=</span><span class="s">"2"</span> <span class="na">stroke-linecap=</span><span class="s">"round"</span> <span class="na">stroke-linejoin=</span><span class="s">"round"</span> <span class="na">class=</span><span class="s">"icon"</span><span class="nt">&gt;&lt;circle</span> <span class="na">cx=</span><span class="s">"11"</span> <span class="na">cy=</span><span class="s">"11"</span> <span class="na">r=</span><span class="s">"8"</span><span class="nt">&gt;&lt;/circle&gt;&lt;line</span> <span class="na">x1=</span><span class="s">"21"</span> <span class="na">y1=</span><span class="s">"21"</span> <span class="na">x2=</span><span class="s">"16.65"</span> <span class="na">y2=</span><span class="s">"16.65"</span><span class="nt">&gt;&lt;/line&gt;&lt;/svg&gt;</span>
<span class="nt">&lt;/div&gt;</span>
@@ -397,31 +553,33 @@
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="nt">&lt;a</span> <span class="na">href=</span><span class="s">"./index.html"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">&gt;</span>
<span class="nt">&lt;svg</span> <span class="na">xmlns=</span><span class="s">"http://www.w3.org/2000/svg"</span> <span class="na">width=</span><span class="s">"24"</span> <span class="na">height=</span><span class="s">"24"</span> <span class="na">viewBox=</span><span class="s">"0 0 24 24"</span> <span class="na">fill=</span><span class="s">"none"</span> <span class="na">stroke=</span><span class="s">"currentColor"</span> <span class="na">stroke-width=</span><span class="s">"2"</span> <span class="na">stroke-linecap=</span><span class="s">"round"</span> <span class="na">stroke-linejoin=</span><span class="s">"round"</span> <span class="na">class=</span><span class="s">"icon"</span><span class="nt">&gt;&lt;circle</span> <span class="na">cx=</span><span class="s">"11"</span> <span class="na">cy=</span><span class="s">"11"</span> <span class="na">r=</span><span class="s">"8"</span><span class="nt">&gt;&lt;/circle&gt;&lt;line</span> <span class="na">x1=</span><span class="s">"21"</span> <span class="na">y1=</span><span class="s">"21"</span> <span class="na">x2=</span><span class="s">"16.65"</span> <span class="na">y2=</span><span class="s">"16.65"</span><span class="nt">&gt;&lt;/line&gt;&lt;/svg&gt;</span>
Search again
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
</div>
<h3 id="empty-state-with-illustration">Empty state with illustration</h3>
<div class="example">
<div class="empty">
<div class="empty-icon">
<img src="../img/illustrations/undraw_quitting_time_dm8t.svg" class="h-8 mb-4" alt="" />
</div>
<p class="empty-title h3">No results found</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">
Search again
</a>
</div>
<h3 id="empty-state-with-illustration">Empty state with illustration</h3>
<div class="example">
<div class="empty">
<div class="empty-icon">
<img src="../img/illustrations/undraw_quitting_time_dm8t.svg" class="h-8 mb-4" alt="" />
</div>
<p class="empty-title h3">No results found</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="../index.html" class="btn btn-primary">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
Search again
</a>
</div>
</div>
</div>
</div>
<div 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>
<div 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">"./img/illustrations/undraw_quitting_time_dm8t.svg"</span> <span class="na">class=</span><span class="s">"h-8 mb-4"</span> <span class="na">alt=</span><span class="s">""</span><span class="nt">&gt;</span>
<span class="nt">&lt;/div&gt;</span>
@@ -430,59 +588,26 @@
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="nt">&lt;a</span> <span class="na">href=</span><span class="s">"./index.html"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">&gt;</span>
<span class="nt">&lt;svg</span> <span class="na">xmlns=</span><span class="s">"http://www.w3.org/2000/svg"</span> <span class="na">width=</span><span class="s">"24"</span> <span class="na">height=</span><span class="s">"24"</span> <span class="na">viewBox=</span><span class="s">"0 0 24 24"</span> <span class="na">fill=</span><span class="s">"none"</span> <span class="na">stroke=</span><span class="s">"currentColor"</span> <span class="na">stroke-width=</span><span class="s">"2"</span> <span class="na">stroke-linecap=</span><span class="s">"round"</span> <span class="na">stroke-linejoin=</span><span class="s">"round"</span> <span class="na">class=</span><span class="s">"icon"</span><span class="nt">&gt;&lt;circle</span> <span class="na">cx=</span><span class="s">"11"</span> <span class="na">cy=</span><span class="s">"11"</span> <span class="na">r=</span><span class="s">"8"</span><span class="nt">&gt;&lt;/circle&gt;&lt;line</span> <span class="na">x1=</span><span class="s">"21"</span> <span class="na">y1=</span><span class="s">"21"</span> <span class="na">x2=</span><span class="s">"16.65"</span> <span class="na">y2=</span><span class="s">"16.65"</span><span class="nt">&gt;&lt;/line&gt;&lt;/svg&gt;</span>
Search again
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
</main>
</div>
</div>
</div>
<script>
window.tabler_colors = {
'blue': '#206bc4',
'azure': '#45aaf2',
'indigo': '#6574cd',
'purple': '#a55eea',
'pink': '#f66d9b',
'red': '#fa4654',
'orange': '#fd9644',
'yellow': '#f1c40f',
'lime': '#7bd235',
'green': '#5eba00',
'teal': '#2bcbba',
'cyan': '#17a2b8',
'gray': '#868e96',
};
</script>
<!-- Libs JS -->
<script src="../dist/libs/jquery/dist/jquery.min.js?1576401968"></script>
<script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1576401968"></script>
<script src="../dist/libs/autosize/dist/autosize.min.js?1576401968"></script>
<script src="../dist/libs/imask/dist/imask.min.js?1576401968"></script>
<script src="../dist/libs/selectize/dist/js/standalone/selectize.min.js?1576401968"></script>
<script src="../dist/libs/apexcharts/dist/apexcharts.min.js?1576401968"></script>
<script src="../dist/libs/jqvmap/dist/jquery.vmap.min.js?1576401968"></script>
<script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.world.js?1576401968"></script>
<script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.usa.js?1576401968"></script>
<script src="../dist/libs/jqvmap/dist/maps/continents/jquery.vmap.europe.js?1576401968"></script>
<script src="../dist/libs/peity/jquery.peity.min.js?1576401968"></script>
<script src="../dist/libs/selectize/dist/js/selectize.min.js?1576401968"></script>
<script src="../dist/libs/fullcalendar/core/main.min.js?1576401968"></script>
<script src="../dist/libs/fullcalendar/daygrid/main.min.js?1576401968"></script>
<script src="../dist/libs/fullcalendar/interaction/main.min.js?1576401968"></script>
<script src="../dist/libs/fullcalendar/timegrid/main.min.js?1576401968"></script>
<script src="../dist/libs/fullcalendar/list/main.min.js?1576401968"></script>
<!-- Tabler Core -->
<script src="../dist/js/tabler.min.js?1576401968"></script>
<script src="../dist/js/tabler.min.js?1576701882"></script>
<!-- Tabler Plugins -->
<script src="../dist/js/tabler-charts.min.js?1576401968"></script>
<script src="../dist/js/tabler-charts.min.js?1576701882"></script>
<script>
document.body.style.display = 'block';
</script>

File diff suppressed because it is too large Load Diff

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-alpha
* @version v1.0.0-alpha
* @link https://github.com/tabler/tabler
* Copyright 2018-2019 The Tabler Authors
* Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -25,405 +25,526 @@
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
<title>Form helpers - Documentation - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
<!-- Libs CSS -->
<link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1576401968" rel="stylesheet"/>
<link href="../dist/libs/selectize/dist/css/selectize.css?1576401968" rel="stylesheet"/>
<link href="../dist/libs/fullcalendar/core/main.min.css?1576401968" rel="stylesheet"/>
<link href="../dist/libs/fullcalendar/daygrid/main.min.css?1576401968" rel="stylesheet"/>
<link href="../dist/libs/fullcalendar/timegrid/main.min.css?1576401968" rel="stylesheet"/>
<link href="../dist/libs/fullcalendar/list/main.min.css?1576401968" rel="stylesheet"/>
<link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1576701882" rel="stylesheet"/>
<link href="../dist/libs/selectize/dist/css/selectize.css?1576701882" rel="stylesheet"/>
<link href="../dist/libs/fullcalendar/core/main.min.css?1576701882" rel="stylesheet"/>
<link href="../dist/libs/fullcalendar/daygrid/main.min.css?1576701882" rel="stylesheet"/>
<link href="../dist/libs/fullcalendar/timegrid/main.min.css?1576701882" rel="stylesheet"/>
<link href="../dist/libs/fullcalendar/list/main.min.css?1576701882" rel="stylesheet"/>
<!-- Tabler Core -->
<link href="../dist/css/tabler.min.css?1576401968" rel="stylesheet"/>
<link href="../dist/css/tabler.min.css?1576701882" rel="stylesheet"/>
<!-- Tabler Plugins -->
<link href="../dist/css/tabler-flags.min.css?1576401968" rel="stylesheet"/>
<link href="../dist/css/tabler-charts.min.css?1576401968" rel="stylesheet"/>
<link href="../dist/css/tabler-flags.min.css?1576701882" rel="stylesheet"/>
<link href="../dist/css/tabler-charts.min.css?1576701882" rel="stylesheet"/>
<style>
body { display: none; }
</style>
</head>
<body class="antialiased ">
<div class="layout">
<header class="layout-area-topnav navbar navbar-expand-lg navbar-light">
<div class="container">
<a class="layout-toggler" data-toggle="menubar">
<span class="layout-toggler-icon"></span>
</a>
<a href=".." class="navbar-brand text-reset mr-md-3">
<img src="../img/logo.svg" alt="Tabler" class="d-none d-md-block navbar-brand-logo">
<img src="../img/logo-small.svg" alt="Tabler" class="d-md-none navbar-brand-logo">
</a>
<ul class="nav navbar-menu align-items-center order-1 order-lg-2">
<li class="nav-item dropdown mr-3">
<a class="nav-link text-reset px-2" data-toggle="dropdown">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
<span class="badge badge-pill badge-up bg-primary">4</span>
<body class="antialiased">
<div class="wrapper">
<div class="content">
<header class="topnav topbar">
<div class="container">
<div class="navbar navbar-expand-lg navbar-light">
<a href=".." class="navbar-brand mr-4">
<img src="../img/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-lg">
<img src="../img/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-sm">
</a>
<div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right mt-3 p-0">
<div class="scrollable">
<div class="list list-row">
</div>
</div>
<div class="d-flex px-3 py-2 b-t">
<div class="flex">
<span>6 Notifications</span>
</div>
<a href="#">See all <i class="fa fa-angle-right text-muted"></i></a>
</div>
</div>
</li>
<li class="nav-item d-none d-lg-flex mr-3">
<a href="https://github.com/tabler/tabler" class="btn btn-sm btn-success" target="_blank">Source code</a>
</li>
<li class="nav-item dropdown">
<a href="#" data-toggle="dropdown"
<ul class="nav navbar-menu align-items-center ml-auto">
<li class="nav-item d-none d-lg-flex mr-3">
<a href="https://github.com/tabler/tabler" class="btn btn-sm btn-success" target="_blank">Source code</a>
</li>
<li class="nav-item dropdown">
<a href="#" data-toggle="dropdown"
class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
<span class="avatar" style="background-image: url(../img/avatars/000m.jpg)"></span>
<span class="ml-2 d-none d-lg-block leading-none">
Paweł Kuna
<span class="text-muted d-block mt-1 text-h6">Administrator</span>
</span>
</a>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
Profile
</a>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
Settings
</a>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
Inbox
<span class="badge bg-primary ml-auto">6</span>
</a>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
Message
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
Need help?
</a>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
Sign out
</a>
</div>
</li>
</ul>
</div>
</header>
<div class="layout-area-menu navbar navbar-expand-lg navbar-light">
<div class="container">
<ul class="navbar-nav flex-wrap">
<li class="nav-item">
<a class="nav-link" href="../index.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
</span>
<span class="nav-text">
Dashboard
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../form-elements.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
</span>
<span class="nav-text">
Form elements
</span>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
<span class="avatar" style="background-image: url(../img/avatars/004f.jpg)"></span>
<span class="ml-2 d-none d-lg-block leading-none">
Leesa Beaty
<span class="text-muted d-block mt-1 text-h6">Administrator</span>
</span>
</a>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
Profile
</a>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
Settings
</a>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
Inbox
<span class="badge bg-primary ml-auto">6</span>
</a>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
Message
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
Need help?
</a>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
Sign out
</a>
</div>
</li>
</ul>
</div>
</div>
</header>
<header class="topnav topbar">
<div class="navbar navbar-expand-lg navbar-light">
<div class="container">
<ul class="navbar-nav flex-wrap">
<li class="nav-item">
<a class="nav-link" href="../index.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
</span>
<span class="nav-text">
Dashboard
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../form-elements.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
</span>
<span class="nav-text">
Form elements
</span>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-error" data-toggle="dropdown" role="button"
aria-expanded="false" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
</span>
<span class="nav-text">
Base
</span>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="../buttons.html" >
<span class="nav-text">
Buttons
</span>
</a>
<a class="dropdown-item" href="../cards.html" >
<span class="nav-text">
Cards
</span>
</a>
<a class="dropdown-item" href="../c.html" >
<span class="nav-text">
C
</span>
</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="../charts.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
</span>
<span class="nav-text">
Charts
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../calendar.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
</span>
<span class="nav-text">
Calendar
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../users.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
</span>
<span class="nav-text">
Users
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../gallery.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
</span>
<span class="nav-text">
Gallery
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../layouts.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
</span>
<span class="nav-text">
Layouts
</span>
</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="../docs/index.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
</span>
<span class="nav-text">
Documentation
</span>
</a>
</li>
</ul>
</div>
</div>
<div class="layout-area-menu-backdrop" data-toggle="menubar"></div>
<div class="layout-area-main">
<main class="container my-4 flex-fill">
<!-- Page title -->
<div class="page-title-box">
<div class="row align-items-center">
<div class="col-auto">
<h2 class="page-title">
Documentation
</h2>
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="9" y1="15" x2="15" y2="15"></line></svg>
</span>
<span class="nav-text">
Error pages
</span>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="../400.html" >
<span class="nav-text">
400 page
</span>
</a>
<a class="dropdown-item" href="../401.html" >
<span class="nav-text">
401 page
</span>
</a>
<a class="dropdown-item" href="../403.html" >
<span class="nav-text">
403 page
</span>
</a>
<a class="dropdown-item" href="../404.html" >
<span class="nav-text">
404 page
</span>
</a>
<a class="dropdown-item" href="../500.html" >
<span class="nav-text">
500 page
</span>
</a>
<a class="dropdown-item" href="../503.html" >
<span class="nav-text">
503 page
</span>
</a>
<a class="dropdown-item" href="../maintenance.html" >
<span class="nav-text">
Maintenance page
</span>
</a>
</div>
</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-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
</span>
<span class="nav-text">
Base
</span>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="../buttons.html" >
<span class="nav-text">
Buttons
</span>
</a>
<a class="dropdown-item" href="../cards.html" >
<span class="nav-text">
Cards
</span>
</a>
<a class="dropdown-item" href="../calendar.html" >
<span class="nav-text">
Calendar
</span>
</a>
<a class="dropdown-item" href="../users.html" >
<span class="nav-text">
Users
</span>
</a>
<a class="dropdown-item" href="../gallery.html" >
<span class="nav-text">
Gallery
</span>
</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="../charts.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
</span>
<span class="nav-text">
Charts
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../layouts.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
</span>
<span class="nav-text">
Layouts
</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-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
</span>
<span class="nav-text">
Extra
</span>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="../invoice.html" >
<span class="nav-text">
Invoice
</span>
</a>
</div>
</li>
<li class="nav-item active dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
aria-expanded="true" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
</span>
<span class="nav-text">
Documentation
</span>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="../docs/index.html" >
<span class="nav-text">
index
</span>
</a>
<a class="dropdown-item" href="../docs/alerts.html" >
<span class="nav-text">
Alerts
</span>
</a>
<a class="dropdown-item" href="../docs/autosize.html" >
<span class="nav-text">
Autosize
</span>
</a>
<a class="dropdown-item" href="../docs/avatars.html" >
<span class="nav-text">
Avatars
</span>
</a>
<a class="dropdown-item" href="../docs/badges.html" >
<span class="nav-text">
Badges
</span>
</a>
<a class="dropdown-item" href="../docs/breadcrumb.html" >
<span class="nav-text">
Breadcrumb
</span>
</a>
<a class="dropdown-item" href="../docs/buttons.html" >
<span class="nav-text">
Buttons
</span>
</a>
<a class="dropdown-item" href="../docs/cards.html" >
<span class="nav-text">
Cards
</span>
</a>
<a class="dropdown-item" href="../docs/carousel.html" >
<span class="nav-text">
Carousel
</span>
</a>
<a class="dropdown-item" href="../docs/colors.html" >
<span class="nav-text">
Colors
</span>
</a>
<a class="dropdown-item" href="../docs/cursors.html" >
<span class="nav-text">
Cursors
</span>
</a>
<a class="dropdown-item" href="../docs/charts.html" >
<span class="nav-text">
Charts
</span>
</a>
<a class="dropdown-item" href="../docs/divider.html" >
<span class="nav-text">
Divider
</span>
</a>
<a class="dropdown-item" href="../docs/empty.html" >
<span class="nav-text">
Empty states
</span>
</a>
<a class="dropdown-item" href="../docs/flags.html" >
<span class="nav-text">
Flags
</span>
</a>
<a class="dropdown-item" href="../docs/form-elements.html" >
<span class="nav-text">
Form elements
</span>
</a>
<a class="dropdown-item" href="../docs/form-helpers.html" >
<span class="nav-text">
Form helpers
</span>
</a>
<a class="dropdown-item" href="../docs/input-mask.html" >
<span class="nav-text">
Form input mask
</span>
</a>
<a class="dropdown-item" href="../docs/progress.html" >
<span class="nav-text">
Progress
</span>
</a>
<a class="dropdown-item" href="../docs/ribbons.html" >
<span class="nav-text">
Ribbons
</span>
</a>
<a class="dropdown-item" href="../docs/spinners.html" >
<span class="nav-text">
Spinners
</span>
</a>
<a class="dropdown-item" href="../docs/steps.html" >
<span class="nav-text">
Steps
</span>
</a>
<a class="dropdown-item" href="../docs/tables.html" >
<span class="nav-text">
Tables
</span>
</a>
<a class="dropdown-item" href="../docs/tabs.html" >
<span class="nav-text">
Tabs
</span>
</a>
<a class="dropdown-item" href="../docs/timelines.html" >
<span class="nav-text">
Timelines
</span>
</a>
<a class="dropdown-item" href="../docs/toasts.html" >
<span class="nav-text">
Toasts
</span>
</a>
<a class="dropdown-item" href="../docs/tooltips.html" >
<span class="nav-text">
Tooltips
</span>
</a>
<a class="dropdown-item" href="../docs/typography.html" >
<span class="nav-text">
Typography
</span>
</a>
</div>
</li>
</ul>
<div class="navbar-search d-none d-lg-block">
<form action="." method="get">
<div class="input-icon">
<span class="input-icon-addon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
</span>
<input type="text" class="form-control form-control-light" placeholder="Search for&hellip;">
</div>
</form>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-lg-3 order-lg-1 mb-4">
<a href="https://github.com/tabler/tabler" class="btn btn-block btn-primary mb-4" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon mr-2"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>
Browse source code
</a>
<div class="list-group list-group-transparent mb-0">
<a href="../docs/index.html"
class="list-group-item list-group-item-action">
Introduction
</a>
<a href="../docs/alerts.html"
class="list-group-item list-group-item-action">
Alerts <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
</a>
<a href="../docs/autosize.html"
class="list-group-item list-group-item-action">
Autosize <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
</a>
<a href="../docs/avatars.html"
class="list-group-item list-group-item-action">
Avatars <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
</a>
<a href="../docs/badges.html"
class="list-group-item list-group-item-action">
Badges <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
</a>
<a href="../docs/breadcrumb.html"
class="list-group-item list-group-item-action">
Breadcrumb <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
</a>
<a href="../docs/buttons.html"
class="list-group-item list-group-item-action">
Buttons <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
</a>
<a href="../docs/cards.html"
class="list-group-item list-group-item-action">
Cards <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
</a>
<a href="../docs/carousel.html"
class="list-group-item list-group-item-action">
Carousel
</a>
<a href="../docs/colors.html"
class="list-group-item list-group-item-action">
Colors <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
</a>
<a href="../docs/cursors.html"
class="list-group-item list-group-item-action">
Cursors
</a>
<a href="../docs/charts.html"
class="list-group-item list-group-item-action">
Charts
</a>
<a href="../docs/divider.html"
class="list-group-item list-group-item-action">
Divider <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
</a>
<a href="../docs/empty.html"
class="list-group-item list-group-item-action">
Empty states
</a>
<a href="../docs/flags.html"
class="list-group-item list-group-item-action">
Flags <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
</a>
<a href="../docs/form-elements.html"
class="list-group-item list-group-item-action">
Form Elements
</a>
<a href="../docs/form-helpers.html"
class="list-group-item list-group-item-action active">
Form helpers
</a>
<a href="../docs/input-mask.html"
class="list-group-item list-group-item-action">
Input mask
</a>
<a href="../docs/progress.html"
class="list-group-item list-group-item-action">
Progress
</a>
<a href="../docs/ribbons.html"
class="list-group-item list-group-item-action">
Ribbons
</a>
<a href="../docs/spinners.html"
class="list-group-item list-group-item-action">
Spinners <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
</a>
<a href="../docs/steps.html"
class="list-group-item list-group-item-action">
Steps
</a>
<a href="../docs/tables.html"
class="list-group-item list-group-item-action">
Tables
</a>
<a href="../docs/tabs.html"
class="list-group-item list-group-item-action">
Tabs
</a>
<a href="../docs/timelines.html"
class="list-group-item list-group-item-action">
Timelines
</a>
<a href="../docs/toasts.html"
class="list-group-item list-group-item-action">
Toasts
</a>
<a href="../docs/tooltips.html"
class="list-group-item list-group-item-action">
Tooltips
</a>
<a href="../docs/typography.html"
class="list-group-item list-group-item-action">
Typography
</a>
</header>
<div class="content-page">
<main class="container my-4 flex-fill">
<!-- Page title -->
<div class="page-title-box">
<div class="row align-items-center">
<div class="col-auto">
<h2 class="page-title">
Documentation
</h2>
</div>
</div>
</div>
<div class="col-lg-9">
<div class="card">
<div class="card-body p-md-6 p-xl-7">
<div class="markdown">
<h2 class="h1 mt-0 mb-3">Form helpers
</h2>
<h3 id="input-help">Input help</h3>
<div class="example">
<span class="form-help" data-toggle="popover" data-placement="top" data-content="&lt;p&gt;ZIP Code must be US or CDN format. You can use an extended ZIP+4 code to determine address more accurately.&lt;/p&gt;&lt;p class='mb-0'&gt;&lt;a href=''&gt;USP ZIP codes lookup tools&lt;/a&gt;&lt;/p&gt;">?</span>
</div>
<div class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-help"</span> <span class="na">data-toggle=</span><span class="s">"popover"</span> <span class="na">data-placement=</span><span class="s">"top"</span> <span class="na">data-content=</span><span class="s">"&lt;p&gt;ZIP Code must be US or CDN format. You can use an extended ZIP+4 code to determine address more accurately.&lt;/p&gt;
<div class="row justify-content-center">
<div class="col-lg-3 order-lg-1 mb-4">
<a href="https://github.com/tabler/tabler" class="btn btn-block btn-primary mb-4" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon mr-2"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>
Browse source code
</a>
<div class="list-group list-group-transparent mb-0">
<a href="../docs/index.html" class="list-group-item list-group-item-action">
index
</a>
<a href="../docs/alerts.html" class="list-group-item list-group-item-action">
Alerts
</a>
<a href="../docs/autosize.html" class="list-group-item list-group-item-action">
Autosize
</a>
<a href="../docs/avatars.html" class="list-group-item list-group-item-action">
Avatars
</a>
<a href="../docs/badges.html" class="list-group-item list-group-item-action">
Badges
</a>
<a href="../docs/breadcrumb.html" class="list-group-item list-group-item-action">
Breadcrumb
</a>
<a href="../docs/buttons.html" class="list-group-item list-group-item-action">
Buttons
</a>
<a href="../docs/cards.html" class="list-group-item list-group-item-action">
Cards
</a>
<a href="../docs/carousel.html" class="list-group-item list-group-item-action">
Carousel
</a>
<a href="../docs/colors.html" class="list-group-item list-group-item-action">
Colors
</a>
<a href="../docs/cursors.html" class="list-group-item list-group-item-action">
Cursors
</a>
<a href="../docs/charts.html" class="list-group-item list-group-item-action">
Charts
</a>
<a href="../docs/divider.html" class="list-group-item list-group-item-action">
Divider
</a>
<a href="../docs/empty.html" class="list-group-item list-group-item-action">
Empty states
</a>
<a href="../docs/flags.html" class="list-group-item list-group-item-action">
Flags
</a>
<a href="../docs/form-elements.html" class="list-group-item list-group-item-action">
Form elements
</a>
<a href="../docs/form-helpers.html" class="list-group-item list-group-item-action active">
Form helpers
</a>
<a href="../docs/input-mask.html" class="list-group-item list-group-item-action">
Form input mask
</a>
<a href="../docs/progress.html" class="list-group-item list-group-item-action">
Progress
</a>
<a href="../docs/ribbons.html" class="list-group-item list-group-item-action">
Ribbons
<span class="badge bg-green ml-auto">New</span>
</a>
<a href="../docs/spinners.html" class="list-group-item list-group-item-action">
Spinners
</a>
<a href="../docs/steps.html" class="list-group-item list-group-item-action">
Steps
</a>
<a href="../docs/tables.html" class="list-group-item list-group-item-action">
Tables
</a>
<a href="../docs/tabs.html" class="list-group-item list-group-item-action">
Tabs
</a>
<a href="../docs/timelines.html" class="list-group-item list-group-item-action">
Timelines
</a>
<a href="../docs/toasts.html" class="list-group-item list-group-item-action">
Toasts
</a>
<a href="../docs/tooltips.html" class="list-group-item list-group-item-action">
Tooltips
</a>
<a href="../docs/typography.html" class="list-group-item list-group-item-action">
Typography
</a>
</div>
</div>
<div class="col-lg-9">
<div class="card">
<div class="card-body p-md-6 p-xl-7">
<div class="markdown">
<h2 class="h1 mt-0 mb-3">Form helpers
</h2>
<h3 id="input-help">Input help</h3>
<div class="example">
<span class="form-help" data-toggle="popover" data-placement="top" data-content="&lt;p&gt;ZIP Code must be US or CDN format. You can use an extended ZIP+4 code to determine address more accurately.&lt;/p&gt;&lt;p class='mb-0'&gt;&lt;a href=''&gt;USP ZIP codes lookup tools&lt;/a&gt;&lt;/p&gt;">?</span>
</div>
<div class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-help"</span> <span class="na">data-toggle=</span><span class="s">"popover"</span> <span class="na">data-placement=</span><span class="s">"top"</span> <span class="na">data-content=</span><span class="s">"&lt;p&gt;ZIP Code must be US or CDN format. You can use an extended ZIP+4 code to determine address more accurately.&lt;/p&gt;
&lt;p class='mb-0'&gt;&lt;a href=''&gt;USP ZIP codes lookup tools&lt;/a&gt;&lt;/p&gt;
"</span><span class="nt">&gt;</span>?<span class="nt">&lt;/span&gt;</span></code></pre>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
</main>
</div>
</div>
</div>
<script>
window.tabler_colors = {
'blue': '#206bc4',
'azure': '#45aaf2',
'indigo': '#6574cd',
'purple': '#a55eea',
'pink': '#f66d9b',
'red': '#fa4654',
'orange': '#fd9644',
'yellow': '#f1c40f',
'lime': '#7bd235',
'green': '#5eba00',
'teal': '#2bcbba',
'cyan': '#17a2b8',
'gray': '#868e96',
};
</script>
<!-- Libs JS -->
<script src="../dist/libs/jquery/dist/jquery.min.js?1576401968"></script>
<script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1576401968"></script>
<script src="../dist/libs/autosize/dist/autosize.min.js?1576401968"></script>
<script src="../dist/libs/imask/dist/imask.min.js?1576401968"></script>
<script src="../dist/libs/selectize/dist/js/standalone/selectize.min.js?1576401968"></script>
<script src="../dist/libs/apexcharts/dist/apexcharts.min.js?1576401968"></script>
<script src="../dist/libs/jqvmap/dist/jquery.vmap.min.js?1576401968"></script>
<script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.world.js?1576401968"></script>
<script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.usa.js?1576401968"></script>
<script src="../dist/libs/jqvmap/dist/maps/continents/jquery.vmap.europe.js?1576401968"></script>
<script src="../dist/libs/peity/jquery.peity.min.js?1576401968"></script>
<script src="../dist/libs/selectize/dist/js/selectize.min.js?1576401968"></script>
<script src="../dist/libs/fullcalendar/core/main.min.js?1576401968"></script>
<script src="../dist/libs/fullcalendar/daygrid/main.min.js?1576401968"></script>
<script src="../dist/libs/fullcalendar/interaction/main.min.js?1576401968"></script>
<script src="../dist/libs/fullcalendar/timegrid/main.min.js?1576401968"></script>
<script src="../dist/libs/fullcalendar/list/main.min.js?1576401968"></script>
<!-- Tabler Core -->
<script src="../dist/js/tabler.min.js?1576401968"></script>
<script src="../dist/js/tabler.min.js?1576701882"></script>
<!-- Tabler Plugins -->
<script src="../dist/js/tabler-charts.min.js?1576401968"></script>
<script src="../dist/js/tabler-charts.min.js?1576701882"></script>
<script>
document.body.style.display = 'block';
</script>

View File

@@ -1,7 +1,7 @@
<!doctype html>
<!--
* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
* @version 1.0-alpha
* @version v1.0.0-alpha
* @link https://github.com/tabler/tabler
* Copyright 2018-2019 The Tabler Authors
* Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -25,423 +25,544 @@
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
<title>Introduction - Documentation - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
<!-- Libs CSS -->
<link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1576401968" rel="stylesheet"/>
<link href="../dist/libs/selectize/dist/css/selectize.css?1576401968" rel="stylesheet"/>
<link href="../dist/libs/fullcalendar/core/main.min.css?1576401968" rel="stylesheet"/>
<link href="../dist/libs/fullcalendar/daygrid/main.min.css?1576401968" rel="stylesheet"/>
<link href="../dist/libs/fullcalendar/timegrid/main.min.css?1576401968" rel="stylesheet"/>
<link href="../dist/libs/fullcalendar/list/main.min.css?1576401968" rel="stylesheet"/>
<link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1576701882" rel="stylesheet"/>
<link href="../dist/libs/selectize/dist/css/selectize.css?1576701882" rel="stylesheet"/>
<link href="../dist/libs/fullcalendar/core/main.min.css?1576701882" rel="stylesheet"/>
<link href="../dist/libs/fullcalendar/daygrid/main.min.css?1576701882" rel="stylesheet"/>
<link href="../dist/libs/fullcalendar/timegrid/main.min.css?1576701882" rel="stylesheet"/>
<link href="../dist/libs/fullcalendar/list/main.min.css?1576701882" rel="stylesheet"/>
<!-- Tabler Core -->
<link href="../dist/css/tabler.min.css?1576401968" rel="stylesheet"/>
<link href="../dist/css/tabler.min.css?1576701882" rel="stylesheet"/>
<!-- Tabler Plugins -->
<link href="../dist/css/tabler-flags.min.css?1576401968" rel="stylesheet"/>
<link href="../dist/css/tabler-charts.min.css?1576401968" rel="stylesheet"/>
<link href="../dist/css/tabler-flags.min.css?1576701882" rel="stylesheet"/>
<link href="../dist/css/tabler-charts.min.css?1576701882" rel="stylesheet"/>
<style>
body { display: none; }
</style>
</head>
<body class="antialiased ">
<div class="layout">
<header class="layout-area-topnav navbar navbar-expand-lg navbar-light">
<div class="container">
<a class="layout-toggler" data-toggle="menubar">
<span class="layout-toggler-icon"></span>
</a>
<a href=".." class="navbar-brand text-reset mr-md-3">
<img src="../img/logo.svg" alt="Tabler" class="d-none d-md-block navbar-brand-logo">
<img src="../img/logo-small.svg" alt="Tabler" class="d-md-none navbar-brand-logo">
</a>
<ul class="nav navbar-menu align-items-center order-1 order-lg-2">
<li class="nav-item dropdown mr-3">
<a class="nav-link text-reset px-2" data-toggle="dropdown">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
<span class="badge badge-pill badge-up bg-primary">4</span>
<body class="antialiased">
<div class="wrapper">
<div class="content">
<header class="topnav topbar">
<div class="container">
<div class="navbar navbar-expand-lg navbar-light">
<a href=".." class="navbar-brand mr-4">
<img src="../img/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-lg">
<img src="../img/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-sm">
</a>
<div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right mt-3 p-0">
<div class="scrollable">
<div class="list list-row">
</div>
</div>
<div class="d-flex px-3 py-2 b-t">
<div class="flex">
<span>6 Notifications</span>
</div>
<a href="#">See all <i class="fa fa-angle-right text-muted"></i></a>
</div>
</div>
</li>
<li class="nav-item d-none d-lg-flex mr-3">
<a href="https://github.com/tabler/tabler" class="btn btn-sm btn-success" target="_blank">Source code</a>
</li>
<li class="nav-item dropdown">
<a href="#" data-toggle="dropdown"
<ul class="nav navbar-menu align-items-center ml-auto">
<li class="nav-item d-none d-lg-flex mr-3">
<a href="https://github.com/tabler/tabler" class="btn btn-sm btn-success" target="_blank">Source code</a>
</li>
<li class="nav-item dropdown">
<a href="#" data-toggle="dropdown"
class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
<span class="avatar" style="background-image: url(../img/avatars/000m.jpg)"></span>
<span class="ml-2 d-none d-lg-block leading-none">
Paweł Kuna
<span class="text-muted d-block mt-1 text-h6">Administrator</span>
</span>
</a>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
Profile
</a>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
Settings
</a>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
Inbox
<span class="badge bg-primary ml-auto">6</span>
</a>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
Message
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
Need help?
</a>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
Sign out
</a>
</div>
</li>
</ul>
</div>
</header>
<div class="layout-area-menu navbar navbar-expand-lg navbar-light">
<div class="container">
<ul class="navbar-nav flex-wrap">
<li class="nav-item">
<a class="nav-link" href="../index.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
</span>
<span class="nav-text">
Dashboard
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../form-elements.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
</span>
<span class="nav-text">
Form elements
</span>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
<span class="avatar" style="background-image: url(../img/avatars/004f.jpg)"></span>
<span class="ml-2 d-none d-lg-block leading-none">
Leesa Beaty
<span class="text-muted d-block mt-1 text-h6">Administrator</span>
</span>
</a>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
Profile
</a>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
Settings
</a>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
Inbox
<span class="badge bg-primary ml-auto">6</span>
</a>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
Message
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
Need help?
</a>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
Sign out
</a>
</div>
</li>
</ul>
</div>
</div>
</header>
<header class="topnav topbar">
<div class="navbar navbar-expand-lg navbar-light">
<div class="container">
<ul class="navbar-nav flex-wrap">
<li class="nav-item">
<a class="nav-link" href="../index.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
</span>
<span class="nav-text">
Dashboard
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../form-elements.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
</span>
<span class="nav-text">
Form elements
</span>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-error" data-toggle="dropdown" role="button"
aria-expanded="false" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
</span>
<span class="nav-text">
Base
</span>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="../buttons.html" >
<span class="nav-text">
Buttons
</span>
</a>
<a class="dropdown-item" href="../cards.html" >
<span class="nav-text">
Cards
</span>
</a>
<a class="dropdown-item" href="../c.html" >
<span class="nav-text">
C
</span>
</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="../charts.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
</span>
<span class="nav-text">
Charts
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../calendar.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
</span>
<span class="nav-text">
Calendar
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../users.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
</span>
<span class="nav-text">
Users
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../gallery.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
</span>
<span class="nav-text">
Gallery
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../layouts.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
</span>
<span class="nav-text">
Layouts
</span>
</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="../docs/index.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
</span>
<span class="nav-text">
Documentation
</span>
</a>
</li>
</ul>
</div>
</div>
<div class="layout-area-menu-backdrop" data-toggle="menubar"></div>
<div class="layout-area-main">
<main class="container my-4 flex-fill">
<!-- Page title -->
<div class="page-title-box">
<div class="row align-items-center">
<div class="col-auto">
<h2 class="page-title">
Documentation
</h2>
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="9" y1="15" x2="15" y2="15"></line></svg>
</span>
<span class="nav-text">
Error pages
</span>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="../400.html" >
<span class="nav-text">
400 page
</span>
</a>
<a class="dropdown-item" href="../401.html" >
<span class="nav-text">
401 page
</span>
</a>
<a class="dropdown-item" href="../403.html" >
<span class="nav-text">
403 page
</span>
</a>
<a class="dropdown-item" href="../404.html" >
<span class="nav-text">
404 page
</span>
</a>
<a class="dropdown-item" href="../500.html" >
<span class="nav-text">
500 page
</span>
</a>
<a class="dropdown-item" href="../503.html" >
<span class="nav-text">
503 page
</span>
</a>
<a class="dropdown-item" href="../maintenance.html" >
<span class="nav-text">
Maintenance page
</span>
</a>
</div>
</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-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
</span>
<span class="nav-text">
Base
</span>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="../buttons.html" >
<span class="nav-text">
Buttons
</span>
</a>
<a class="dropdown-item" href="../cards.html" >
<span class="nav-text">
Cards
</span>
</a>
<a class="dropdown-item" href="../calendar.html" >
<span class="nav-text">
Calendar
</span>
</a>
<a class="dropdown-item" href="../users.html" >
<span class="nav-text">
Users
</span>
</a>
<a class="dropdown-item" href="../gallery.html" >
<span class="nav-text">
Gallery
</span>
</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="../charts.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
</span>
<span class="nav-text">
Charts
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../layouts.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
</span>
<span class="nav-text">
Layouts
</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-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
</span>
<span class="nav-text">
Extra
</span>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="../invoice.html" >
<span class="nav-text">
Invoice
</span>
</a>
</div>
</li>
<li class="nav-item active dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
aria-expanded="true" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
</span>
<span class="nav-text">
Documentation
</span>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="../docs/index.html" >
<span class="nav-text">
index
</span>
</a>
<a class="dropdown-item" href="../docs/alerts.html" >
<span class="nav-text">
Alerts
</span>
</a>
<a class="dropdown-item" href="../docs/autosize.html" >
<span class="nav-text">
Autosize
</span>
</a>
<a class="dropdown-item" href="../docs/avatars.html" >
<span class="nav-text">
Avatars
</span>
</a>
<a class="dropdown-item" href="../docs/badges.html" >
<span class="nav-text">
Badges
</span>
</a>
<a class="dropdown-item" href="../docs/breadcrumb.html" >
<span class="nav-text">
Breadcrumb
</span>
</a>
<a class="dropdown-item" href="../docs/buttons.html" >
<span class="nav-text">
Buttons
</span>
</a>
<a class="dropdown-item" href="../docs/cards.html" >
<span class="nav-text">
Cards
</span>
</a>
<a class="dropdown-item" href="../docs/carousel.html" >
<span class="nav-text">
Carousel
</span>
</a>
<a class="dropdown-item" href="../docs/colors.html" >
<span class="nav-text">
Colors
</span>
</a>
<a class="dropdown-item" href="../docs/cursors.html" >
<span class="nav-text">
Cursors
</span>
</a>
<a class="dropdown-item" href="../docs/charts.html" >
<span class="nav-text">
Charts
</span>
</a>
<a class="dropdown-item" href="../docs/divider.html" >
<span class="nav-text">
Divider
</span>
</a>
<a class="dropdown-item" href="../docs/empty.html" >
<span class="nav-text">
Empty states
</span>
</a>
<a class="dropdown-item" href="../docs/flags.html" >
<span class="nav-text">
Flags
</span>
</a>
<a class="dropdown-item" href="../docs/form-elements.html" >
<span class="nav-text">
Form elements
</span>
</a>
<a class="dropdown-item" href="../docs/form-helpers.html" >
<span class="nav-text">
Form helpers
</span>
</a>
<a class="dropdown-item" href="../docs/input-mask.html" >
<span class="nav-text">
Form input mask
</span>
</a>
<a class="dropdown-item" href="../docs/progress.html" >
<span class="nav-text">
Progress
</span>
</a>
<a class="dropdown-item" href="../docs/ribbons.html" >
<span class="nav-text">
Ribbons
</span>
</a>
<a class="dropdown-item" href="../docs/spinners.html" >
<span class="nav-text">
Spinners
</span>
</a>
<a class="dropdown-item" href="../docs/steps.html" >
<span class="nav-text">
Steps
</span>
</a>
<a class="dropdown-item" href="../docs/tables.html" >
<span class="nav-text">
Tables
</span>
</a>
<a class="dropdown-item" href="../docs/tabs.html" >
<span class="nav-text">
Tabs
</span>
</a>
<a class="dropdown-item" href="../docs/timelines.html" >
<span class="nav-text">
Timelines
</span>
</a>
<a class="dropdown-item" href="../docs/toasts.html" >
<span class="nav-text">
Toasts
</span>
</a>
<a class="dropdown-item" href="../docs/tooltips.html" >
<span class="nav-text">
Tooltips
</span>
</a>
<a class="dropdown-item" href="../docs/typography.html" >
<span class="nav-text">
Typography
</span>
</a>
</div>
</li>
</ul>
<div class="navbar-search d-none d-lg-block">
<form action="." method="get">
<div class="input-icon">
<span class="input-icon-addon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
</span>
<input type="text" class="form-control form-control-light" placeholder="Search for&hellip;">
</div>
</form>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-lg-3 order-lg-1 mb-4">
<a href="https://github.com/tabler/tabler" class="btn btn-block btn-primary mb-4" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon mr-2"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>
Browse source code
</a>
<div class="list-group list-group-transparent mb-0">
<a href="../docs/index.html"
class="list-group-item list-group-item-action active">
Introduction
</a>
<a href="../docs/alerts.html"
class="list-group-item list-group-item-action">
Alerts <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
</a>
<a href="../docs/autosize.html"
class="list-group-item list-group-item-action">
Autosize <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
</a>
<a href="../docs/avatars.html"
class="list-group-item list-group-item-action">
Avatars <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
</a>
<a href="../docs/badges.html"
class="list-group-item list-group-item-action">
Badges <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
</a>
<a href="../docs/breadcrumb.html"
class="list-group-item list-group-item-action">
Breadcrumb <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
</a>
<a href="../docs/buttons.html"
class="list-group-item list-group-item-action">
Buttons <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
</a>
<a href="../docs/cards.html"
class="list-group-item list-group-item-action">
Cards <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
</a>
<a href="../docs/carousel.html"
class="list-group-item list-group-item-action">
Carousel
</a>
<a href="../docs/colors.html"
class="list-group-item list-group-item-action">
Colors <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
</a>
<a href="../docs/cursors.html"
class="list-group-item list-group-item-action">
Cursors
</a>
<a href="../docs/charts.html"
class="list-group-item list-group-item-action">
Charts
</a>
<a href="../docs/divider.html"
class="list-group-item list-group-item-action">
Divider <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
</a>
<a href="../docs/empty.html"
class="list-group-item list-group-item-action">
Empty states
</a>
<a href="../docs/flags.html"
class="list-group-item list-group-item-action">
Flags <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
</a>
<a href="../docs/form-elements.html"
class="list-group-item list-group-item-action">
Form Elements
</a>
<a href="../docs/form-helpers.html"
class="list-group-item list-group-item-action">
Form helpers
</a>
<a href="../docs/input-mask.html"
class="list-group-item list-group-item-action">
Input mask
</a>
<a href="../docs/progress.html"
class="list-group-item list-group-item-action">
Progress
</a>
<a href="../docs/ribbons.html"
class="list-group-item list-group-item-action">
Ribbons
</a>
<a href="../docs/spinners.html"
class="list-group-item list-group-item-action">
Spinners <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
</a>
<a href="../docs/steps.html"
class="list-group-item list-group-item-action">
Steps
</a>
<a href="../docs/tables.html"
class="list-group-item list-group-item-action">
Tables
</a>
<a href="../docs/tabs.html"
class="list-group-item list-group-item-action">
Tabs
</a>
<a href="../docs/timelines.html"
class="list-group-item list-group-item-action">
Timelines
</a>
<a href="../docs/toasts.html"
class="list-group-item list-group-item-action">
Toasts
</a>
<a href="../docs/tooltips.html"
class="list-group-item list-group-item-action">
Tooltips
</a>
<a href="../docs/typography.html"
class="list-group-item list-group-item-action">
Typography
</a>
</header>
<div class="content-page">
<main class="container my-4 flex-fill">
<!-- Page title -->
<div class="page-title-box">
<div class="row align-items-center">
<div class="col-auto">
<h2 class="page-title">
Documentation
</h2>
</div>
</div>
</div>
<div class="col-lg-9">
<div class="card">
<div class="card-body p-md-6 p-xl-7">
<div class="markdown">
<h2 class="h1 mt-0 mb-3">Introduction
</h2>
<p>Weve created this admin panel for everyone who wants to create any templates based on our ready components. Our mission is to deliver a user-friendly, clear and easy administration panel, that can be used by both, simple websites and sophisticated systems. The only requirement is a basic HTML and CSS knowledge—as a reward, youll be able to manage and visualize different types of data in the easiest possible way!</p>
<h3 id="setup-environment">Setup environment</h3>
<p>To use our build system and run our documentation locally, youll need a copy of Tablers source files. Follow these steps:</p>
<ol>
<li><a href="https://nodejs.org/download/">Install Node.js</a>, which we use to manage our dependencies.</li>
<li>Navigate to the root <code class="highlighter-rouge">/tabler</code> directory and run <code class="highlighter-rouge">npm install</code> to install our local dependencies listed in <code class="highlighter-rouge">package.json</code>.</li>
<li><a href="https://ruby-lang.org/en/documentation/installation/">Install Ruby</a>, 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="highlighter-rouge">gem install bundler</code>, and finally run <code class="highlighter-rouge">bundle install</code>. This will install all Ruby dependencies, such as <a href="https://jekyllrb.com">Jekyll and plugins</a>.</li>
</ol>
<p><strong>Windows users</strong>:</p>
<ol>
<li><a href="https://git-scm.com/download/win">Install Git</a> in <code class="highlighter-rouge">C:\\Program Files\\git\\bin</code> directory and run <code class="highlighter-rouge">npm config set script-shell "C:\\Program Files\\git\\bin\\bash.exe"</code> to change 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>
<li><a href="https://jekyllrb.com/docs/installation/windows/">Read guide</a> to get Jekyll up and running without problems.</li>
</ol>
<p>When completed, youll be able to run the various commands provided from the command line.</p>
<h3 id="build-tabler-locally">Build Tabler locally</h3>
<ol>
<li>From the root <code class="highlighter-rouge">/tabler</code> directory, run <code class="highlighter-rouge">npm run start</code> in the command line.</li>
<li>Open <a href="http://localhost:4000">http://localhost:4000</a> in your browser, and voilà.</li>
<li>Any change in <code class="highlighter-rouge">/pages</code> directory will build application and refresh the page.</li>
</ol>
<p><strong>Note</strong>:
Run <code class="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>
<h3 id="bugs-and-feature-requests">Bugs and feature requests</h3>
<p>Have a bug or a feature request? <a href="https://github.com/tabler/tabler/issues/new">Please open a new issue</a>.</p>
<div class="row justify-content-center">
<div class="col-lg-3 order-lg-1 mb-4">
<a href="https://github.com/tabler/tabler" class="btn btn-block btn-primary mb-4" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon mr-2"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>
Browse source code
</a>
<div class="list-group list-group-transparent mb-0">
<a href="../docs/index.html" class="list-group-item list-group-item-action active">
index
</a>
<a href="../docs/alerts.html" class="list-group-item list-group-item-action">
Alerts
</a>
<a href="../docs/autosize.html" class="list-group-item list-group-item-action">
Autosize
</a>
<a href="../docs/avatars.html" class="list-group-item list-group-item-action">
Avatars
</a>
<a href="../docs/badges.html" class="list-group-item list-group-item-action">
Badges
</a>
<a href="../docs/breadcrumb.html" class="list-group-item list-group-item-action">
Breadcrumb
</a>
<a href="../docs/buttons.html" class="list-group-item list-group-item-action">
Buttons
</a>
<a href="../docs/cards.html" class="list-group-item list-group-item-action">
Cards
</a>
<a href="../docs/carousel.html" class="list-group-item list-group-item-action">
Carousel
</a>
<a href="../docs/colors.html" class="list-group-item list-group-item-action">
Colors
</a>
<a href="../docs/cursors.html" class="list-group-item list-group-item-action">
Cursors
</a>
<a href="../docs/charts.html" class="list-group-item list-group-item-action">
Charts
</a>
<a href="../docs/divider.html" class="list-group-item list-group-item-action">
Divider
</a>
<a href="../docs/empty.html" class="list-group-item list-group-item-action">
Empty states
</a>
<a href="../docs/flags.html" class="list-group-item list-group-item-action">
Flags
</a>
<a href="../docs/form-elements.html" class="list-group-item list-group-item-action">
Form elements
</a>
<a href="../docs/form-helpers.html" class="list-group-item list-group-item-action">
Form helpers
</a>
<a href="../docs/input-mask.html" class="list-group-item list-group-item-action">
Form input mask
</a>
<a href="../docs/progress.html" class="list-group-item list-group-item-action">
Progress
</a>
<a href="../docs/ribbons.html" class="list-group-item list-group-item-action">
Ribbons
<span class="badge bg-green ml-auto">New</span>
</a>
<a href="../docs/spinners.html" class="list-group-item list-group-item-action">
Spinners
</a>
<a href="../docs/steps.html" class="list-group-item list-group-item-action">
Steps
</a>
<a href="../docs/tables.html" class="list-group-item list-group-item-action">
Tables
</a>
<a href="../docs/tabs.html" class="list-group-item list-group-item-action">
Tabs
</a>
<a href="../docs/timelines.html" class="list-group-item list-group-item-action">
Timelines
</a>
<a href="../docs/toasts.html" class="list-group-item list-group-item-action">
Toasts
</a>
<a href="../docs/tooltips.html" class="list-group-item list-group-item-action">
Tooltips
</a>
<a href="../docs/typography.html" class="list-group-item list-group-item-action">
Typography
</a>
</div>
</div>
<div class="col-lg-9">
<div class="card">
<div class="card-body p-md-6 p-xl-7">
<div class="markdown">
<h2 class="h1 mt-0 mb-3">Introduction
</h2>
<p>Weve created this admin panel for everyone who wants to create any templates based on our ready components. Our mission is to deliver a user-friendly, clear and easy administration panel, that can be used by both, simple websites and sophisticated systems. The only requirement is a basic HTML and CSS knowledge—as a reward, youll be able to manage and visualize different types of data in the easiest possible way!</p>
<h3 id="setup-environment">Setup environment</h3>
<p>To use our build system and run our documentation locally, youll need a copy of Tablers source files. Follow these steps:</p>
<ol>
<li><a href="https://nodejs.org/download/">Install Node.js</a>, which we use to manage our dependencies.</li>
<li>Navigate to the root <code class="highlighter-rouge">/tabler</code> directory and run <code class="highlighter-rouge">npm install</code> to install our local dependencies listed in <code class="highlighter-rouge">package.json</code>.</li>
<li><a href="https://ruby-lang.org/en/documentation/installation/">Install Ruby</a>, 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="highlighter-rouge">gem install bundler</code>, and finally run <code class="highlighter-rouge">bundle install</code>. This will install all Ruby dependencies, such as <a href="https://jekyllrb.com">Jekyll and plugins</a>.</li>
</ol>
<p><strong>Windows users</strong>:</p>
<ol>
<li><a href="https://git-scm.com/download/win">Install Git</a> in <code class="highlighter-rouge">C:\\Program Files\\git\\bin</code> directory and run <code class="highlighter-rouge">npm config set script-shell "C:\\Program Files\\git\\bin\\bash.exe"</code> to change 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>
<li><a href="https://jekyllrb.com/docs/installation/windows/">Read guide</a> to get Jekyll up and running without problems.</li>
</ol>
<p>When completed, youll be able to run the various commands provided from the command line.</p>
<h3 id="build-tabler-locally">Build Tabler locally</h3>
<ol>
<li>From the root <code class="highlighter-rouge">/tabler</code> directory, run <code class="highlighter-rouge">npm run start</code> in the command line.</li>
<li>Open <a href="http://localhost:4000">http://localhost:4000</a> in your browser, and voilà.</li>
<li>Any change in <code class="highlighter-rouge">/pages</code> directory will build application and refresh the page.</li>
</ol>
<p><strong>Note</strong>:
Run <code class="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>
<h3 id="bugs-and-feature-requests">Bugs and feature requests</h3>
<p>Have a bug or a feature request? <a href="https://github.com/tabler/tabler/issues/new">Please open a new issue</a>.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
</main>
</div>
</div>
</div>
<script>
window.tabler_colors = {
'blue': '#206bc4',
'azure': '#45aaf2',
'indigo': '#6574cd',
'purple': '#a55eea',
'pink': '#f66d9b',
'red': '#fa4654',
'orange': '#fd9644',
'yellow': '#f1c40f',
'lime': '#7bd235',
'green': '#5eba00',
'teal': '#2bcbba',
'cyan': '#17a2b8',
'gray': '#868e96',
};
</script>
<!-- Libs JS -->
<script src="../dist/libs/jquery/dist/jquery.min.js?1576401968"></script>
<script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1576401968"></script>
<script src="../dist/libs/autosize/dist/autosize.min.js?1576401968"></script>
<script src="../dist/libs/imask/dist/imask.min.js?1576401968"></script>
<script src="../dist/libs/selectize/dist/js/standalone/selectize.min.js?1576401968"></script>
<script src="../dist/libs/apexcharts/dist/apexcharts.min.js?1576401968"></script>
<script src="../dist/libs/jqvmap/dist/jquery.vmap.min.js?1576401968"></script>
<script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.world.js?1576401968"></script>
<script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.usa.js?1576401968"></script>
<script src="../dist/libs/jqvmap/dist/maps/continents/jquery.vmap.europe.js?1576401968"></script>
<script src="../dist/libs/peity/jquery.peity.min.js?1576401968"></script>
<script src="../dist/libs/selectize/dist/js/selectize.min.js?1576401968"></script>
<script src="../dist/libs/fullcalendar/core/main.min.js?1576401968"></script>
<script src="../dist/libs/fullcalendar/daygrid/main.min.js?1576401968"></script>
<script src="../dist/libs/fullcalendar/interaction/main.min.js?1576401968"></script>
<script src="../dist/libs/fullcalendar/timegrid/main.min.js?1576401968"></script>
<script src="../dist/libs/fullcalendar/list/main.min.js?1576401968"></script>
<!-- Tabler Core -->
<script src="../dist/js/tabler.min.js?1576401968"></script>
<script src="../dist/js/tabler.min.js?1576701882"></script>
<!-- Tabler Plugins -->
<script src="../dist/js/tabler-charts.min.js?1576401968"></script>
<script src="../dist/js/tabler-charts.min.js?1576701882"></script>
<script>
document.body.style.display = 'block';
</script>

View File

@@ -1,7 +1,7 @@
<!doctype html>
<!--
* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
* @version 1.0-alpha
* @version v1.0.0-alpha
* @link https://github.com/tabler/tabler
* Copyright 2018-2019 The Tabler Authors
* Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -25,404 +25,525 @@
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
<title>Input mask - Documentation - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
<!-- Libs CSS -->
<link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1576401968" rel="stylesheet"/>
<link href="../dist/libs/selectize/dist/css/selectize.css?1576401968" rel="stylesheet"/>
<link href="../dist/libs/fullcalendar/core/main.min.css?1576401968" rel="stylesheet"/>
<link href="../dist/libs/fullcalendar/daygrid/main.min.css?1576401968" rel="stylesheet"/>
<link href="../dist/libs/fullcalendar/timegrid/main.min.css?1576401968" rel="stylesheet"/>
<link href="../dist/libs/fullcalendar/list/main.min.css?1576401968" rel="stylesheet"/>
<link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1576701882" rel="stylesheet"/>
<link href="../dist/libs/selectize/dist/css/selectize.css?1576701882" rel="stylesheet"/>
<link href="../dist/libs/fullcalendar/core/main.min.css?1576701882" rel="stylesheet"/>
<link href="../dist/libs/fullcalendar/daygrid/main.min.css?1576701882" rel="stylesheet"/>
<link href="../dist/libs/fullcalendar/timegrid/main.min.css?1576701882" rel="stylesheet"/>
<link href="../dist/libs/fullcalendar/list/main.min.css?1576701882" rel="stylesheet"/>
<!-- Tabler Core -->
<link href="../dist/css/tabler.min.css?1576401968" rel="stylesheet"/>
<link href="../dist/css/tabler.min.css?1576701882" rel="stylesheet"/>
<!-- Tabler Plugins -->
<link href="../dist/css/tabler-flags.min.css?1576401968" rel="stylesheet"/>
<link href="../dist/css/tabler-charts.min.css?1576401968" rel="stylesheet"/>
<link href="../dist/css/tabler-flags.min.css?1576701882" rel="stylesheet"/>
<link href="../dist/css/tabler-charts.min.css?1576701882" rel="stylesheet"/>
<style>
body { display: none; }
</style>
</head>
<body class="antialiased ">
<div class="layout">
<header class="layout-area-topnav navbar navbar-expand-lg navbar-light">
<div class="container">
<a class="layout-toggler" data-toggle="menubar">
<span class="layout-toggler-icon"></span>
</a>
<a href=".." class="navbar-brand text-reset mr-md-3">
<img src="../img/logo.svg" alt="Tabler" class="d-none d-md-block navbar-brand-logo">
<img src="../img/logo-small.svg" alt="Tabler" class="d-md-none navbar-brand-logo">
</a>
<ul class="nav navbar-menu align-items-center order-1 order-lg-2">
<li class="nav-item dropdown mr-3">
<a class="nav-link text-reset px-2" data-toggle="dropdown">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
<span class="badge badge-pill badge-up bg-primary">4</span>
<body class="antialiased">
<div class="wrapper">
<div class="content">
<header class="topnav topbar">
<div class="container">
<div class="navbar navbar-expand-lg navbar-light">
<a href=".." class="navbar-brand mr-4">
<img src="../img/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-lg">
<img src="../img/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-sm">
</a>
<div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right mt-3 p-0">
<div class="scrollable">
<div class="list list-row">
</div>
</div>
<div class="d-flex px-3 py-2 b-t">
<div class="flex">
<span>6 Notifications</span>
</div>
<a href="#">See all <i class="fa fa-angle-right text-muted"></i></a>
</div>
</div>
</li>
<li class="nav-item d-none d-lg-flex mr-3">
<a href="https://github.com/tabler/tabler" class="btn btn-sm btn-success" target="_blank">Source code</a>
</li>
<li class="nav-item dropdown">
<a href="#" data-toggle="dropdown"
<ul class="nav navbar-menu align-items-center ml-auto">
<li class="nav-item d-none d-lg-flex mr-3">
<a href="https://github.com/tabler/tabler" class="btn btn-sm btn-success" target="_blank">Source code</a>
</li>
<li class="nav-item dropdown">
<a href="#" data-toggle="dropdown"
class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
<span class="avatar" style="background-image: url(../img/avatars/000m.jpg)"></span>
<span class="ml-2 d-none d-lg-block leading-none">
Paweł Kuna
<span class="text-muted d-block mt-1 text-h6">Administrator</span>
</span>
</a>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
Profile
</a>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
Settings
</a>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
Inbox
<span class="badge bg-primary ml-auto">6</span>
</a>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
Message
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
Need help?
</a>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
Sign out
</a>
</div>
</li>
</ul>
</div>
</header>
<div class="layout-area-menu navbar navbar-expand-lg navbar-light">
<div class="container">
<ul class="navbar-nav flex-wrap">
<li class="nav-item">
<a class="nav-link" href="../index.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
</span>
<span class="nav-text">
Dashboard
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../form-elements.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
</span>
<span class="nav-text">
Form elements
</span>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
<span class="avatar" style="background-image: url(../img/avatars/004f.jpg)"></span>
<span class="ml-2 d-none d-lg-block leading-none">
Leesa Beaty
<span class="text-muted d-block mt-1 text-h6">Administrator</span>
</span>
</a>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
Profile
</a>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
Settings
</a>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
Inbox
<span class="badge bg-primary ml-auto">6</span>
</a>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
Message
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
Need help?
</a>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
Sign out
</a>
</div>
</li>
</ul>
</div>
</div>
</header>
<header class="topnav topbar">
<div class="navbar navbar-expand-lg navbar-light">
<div class="container">
<ul class="navbar-nav flex-wrap">
<li class="nav-item">
<a class="nav-link" href="../index.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
</span>
<span class="nav-text">
Dashboard
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../form-elements.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
</span>
<span class="nav-text">
Form elements
</span>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-error" data-toggle="dropdown" role="button"
aria-expanded="false" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
</span>
<span class="nav-text">
Base
</span>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="../buttons.html" >
<span class="nav-text">
Buttons
</span>
</a>
<a class="dropdown-item" href="../cards.html" >
<span class="nav-text">
Cards
</span>
</a>
<a class="dropdown-item" href="../c.html" >
<span class="nav-text">
C
</span>
</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="../charts.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
</span>
<span class="nav-text">
Charts
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../calendar.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
</span>
<span class="nav-text">
Calendar
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../users.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
</span>
<span class="nav-text">
Users
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../gallery.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
</span>
<span class="nav-text">
Gallery
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../layouts.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
</span>
<span class="nav-text">
Layouts
</span>
</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="../docs/index.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
</span>
<span class="nav-text">
Documentation
</span>
</a>
</li>
</ul>
</div>
</div>
<div class="layout-area-menu-backdrop" data-toggle="menubar"></div>
<div class="layout-area-main">
<main class="container my-4 flex-fill">
<!-- Page title -->
<div class="page-title-box">
<div class="row align-items-center">
<div class="col-auto">
<h2 class="page-title">
Documentation
</h2>
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="9" y1="15" x2="15" y2="15"></line></svg>
</span>
<span class="nav-text">
Error pages
</span>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="../400.html" >
<span class="nav-text">
400 page
</span>
</a>
<a class="dropdown-item" href="../401.html" >
<span class="nav-text">
401 page
</span>
</a>
<a class="dropdown-item" href="../403.html" >
<span class="nav-text">
403 page
</span>
</a>
<a class="dropdown-item" href="../404.html" >
<span class="nav-text">
404 page
</span>
</a>
<a class="dropdown-item" href="../500.html" >
<span class="nav-text">
500 page
</span>
</a>
<a class="dropdown-item" href="../503.html" >
<span class="nav-text">
503 page
</span>
</a>
<a class="dropdown-item" href="../maintenance.html" >
<span class="nav-text">
Maintenance page
</span>
</a>
</div>
</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-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
</span>
<span class="nav-text">
Base
</span>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="../buttons.html" >
<span class="nav-text">
Buttons
</span>
</a>
<a class="dropdown-item" href="../cards.html" >
<span class="nav-text">
Cards
</span>
</a>
<a class="dropdown-item" href="../calendar.html" >
<span class="nav-text">
Calendar
</span>
</a>
<a class="dropdown-item" href="../users.html" >
<span class="nav-text">
Users
</span>
</a>
<a class="dropdown-item" href="../gallery.html" >
<span class="nav-text">
Gallery
</span>
</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="../charts.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
</span>
<span class="nav-text">
Charts
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../layouts.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
</span>
<span class="nav-text">
Layouts
</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-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
</span>
<span class="nav-text">
Extra
</span>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="../invoice.html" >
<span class="nav-text">
Invoice
</span>
</a>
</div>
</li>
<li class="nav-item active dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
aria-expanded="true" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
</span>
<span class="nav-text">
Documentation
</span>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="../docs/index.html" >
<span class="nav-text">
index
</span>
</a>
<a class="dropdown-item" href="../docs/alerts.html" >
<span class="nav-text">
Alerts
</span>
</a>
<a class="dropdown-item" href="../docs/autosize.html" >
<span class="nav-text">
Autosize
</span>
</a>
<a class="dropdown-item" href="../docs/avatars.html" >
<span class="nav-text">
Avatars
</span>
</a>
<a class="dropdown-item" href="../docs/badges.html" >
<span class="nav-text">
Badges
</span>
</a>
<a class="dropdown-item" href="../docs/breadcrumb.html" >
<span class="nav-text">
Breadcrumb
</span>
</a>
<a class="dropdown-item" href="../docs/buttons.html" >
<span class="nav-text">
Buttons
</span>
</a>
<a class="dropdown-item" href="../docs/cards.html" >
<span class="nav-text">
Cards
</span>
</a>
<a class="dropdown-item" href="../docs/carousel.html" >
<span class="nav-text">
Carousel
</span>
</a>
<a class="dropdown-item" href="../docs/colors.html" >
<span class="nav-text">
Colors
</span>
</a>
<a class="dropdown-item" href="../docs/cursors.html" >
<span class="nav-text">
Cursors
</span>
</a>
<a class="dropdown-item" href="../docs/charts.html" >
<span class="nav-text">
Charts
</span>
</a>
<a class="dropdown-item" href="../docs/divider.html" >
<span class="nav-text">
Divider
</span>
</a>
<a class="dropdown-item" href="../docs/empty.html" >
<span class="nav-text">
Empty states
</span>
</a>
<a class="dropdown-item" href="../docs/flags.html" >
<span class="nav-text">
Flags
</span>
</a>
<a class="dropdown-item" href="../docs/form-elements.html" >
<span class="nav-text">
Form elements
</span>
</a>
<a class="dropdown-item" href="../docs/form-helpers.html" >
<span class="nav-text">
Form helpers
</span>
</a>
<a class="dropdown-item" href="../docs/input-mask.html" >
<span class="nav-text">
Form input mask
</span>
</a>
<a class="dropdown-item" href="../docs/progress.html" >
<span class="nav-text">
Progress
</span>
</a>
<a class="dropdown-item" href="../docs/ribbons.html" >
<span class="nav-text">
Ribbons
</span>
</a>
<a class="dropdown-item" href="../docs/spinners.html" >
<span class="nav-text">
Spinners
</span>
</a>
<a class="dropdown-item" href="../docs/steps.html" >
<span class="nav-text">
Steps
</span>
</a>
<a class="dropdown-item" href="../docs/tables.html" >
<span class="nav-text">
Tables
</span>
</a>
<a class="dropdown-item" href="../docs/tabs.html" >
<span class="nav-text">
Tabs
</span>
</a>
<a class="dropdown-item" href="../docs/timelines.html" >
<span class="nav-text">
Timelines
</span>
</a>
<a class="dropdown-item" href="../docs/toasts.html" >
<span class="nav-text">
Toasts
</span>
</a>
<a class="dropdown-item" href="../docs/tooltips.html" >
<span class="nav-text">
Tooltips
</span>
</a>
<a class="dropdown-item" href="../docs/typography.html" >
<span class="nav-text">
Typography
</span>
</a>
</div>
</li>
</ul>
<div class="navbar-search d-none d-lg-block">
<form action="." method="get">
<div class="input-icon">
<span class="input-icon-addon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
</span>
<input type="text" class="form-control form-control-light" placeholder="Search for&hellip;">
</div>
</form>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-lg-3 order-lg-1 mb-4">
<a href="https://github.com/tabler/tabler" class="btn btn-block btn-primary mb-4" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon mr-2"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>
Browse source code
</a>
<div class="list-group list-group-transparent mb-0">
<a href="../docs/index.html"
class="list-group-item list-group-item-action">
Introduction
</a>
<a href="../docs/alerts.html"
class="list-group-item list-group-item-action">
Alerts <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
</a>
<a href="../docs/autosize.html"
class="list-group-item list-group-item-action">
Autosize <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
</a>
<a href="../docs/avatars.html"
class="list-group-item list-group-item-action">
Avatars <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
</a>
<a href="../docs/badges.html"
class="list-group-item list-group-item-action">
Badges <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
</a>
<a href="../docs/breadcrumb.html"
class="list-group-item list-group-item-action">
Breadcrumb <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
</a>
<a href="../docs/buttons.html"
class="list-group-item list-group-item-action">
Buttons <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
</a>
<a href="../docs/cards.html"
class="list-group-item list-group-item-action">
Cards <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
</a>
<a href="../docs/carousel.html"
class="list-group-item list-group-item-action">
Carousel
</a>
<a href="../docs/colors.html"
class="list-group-item list-group-item-action">
Colors <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
</a>
<a href="../docs/cursors.html"
class="list-group-item list-group-item-action">
Cursors
</a>
<a href="../docs/charts.html"
class="list-group-item list-group-item-action">
Charts
</a>
<a href="../docs/divider.html"
class="list-group-item list-group-item-action">
Divider <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
</a>
<a href="../docs/empty.html"
class="list-group-item list-group-item-action">
Empty states
</a>
<a href="../docs/flags.html"
class="list-group-item list-group-item-action">
Flags <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
</a>
<a href="../docs/form-elements.html"
class="list-group-item list-group-item-action">
Form Elements
</a>
<a href="../docs/form-helpers.html"
class="list-group-item list-group-item-action">
Form helpers
</a>
<a href="../docs/input-mask.html"
class="list-group-item list-group-item-action active">
Input mask
</a>
<a href="../docs/progress.html"
class="list-group-item list-group-item-action">
Progress
</a>
<a href="../docs/ribbons.html"
class="list-group-item list-group-item-action">
Ribbons
</a>
<a href="../docs/spinners.html"
class="list-group-item list-group-item-action">
Spinners <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
</a>
<a href="../docs/steps.html"
class="list-group-item list-group-item-action">
Steps
</a>
<a href="../docs/tables.html"
class="list-group-item list-group-item-action">
Tables
</a>
<a href="../docs/tabs.html"
class="list-group-item list-group-item-action">
Tabs
</a>
<a href="../docs/timelines.html"
class="list-group-item list-group-item-action">
Timelines
</a>
<a href="../docs/toasts.html"
class="list-group-item list-group-item-action">
Toasts
</a>
<a href="../docs/tooltips.html"
class="list-group-item list-group-item-action">
Tooltips
</a>
<a href="../docs/typography.html"
class="list-group-item list-group-item-action">
Typography
</a>
</header>
<div class="content-page">
<main class="container my-4 flex-fill">
<!-- Page title -->
<div class="page-title-box">
<div class="row align-items-center">
<div class="col-auto">
<h2 class="page-title">
Documentation
</h2>
</div>
</div>
</div>
<div class="col-lg-9">
<div class="card">
<div class="card-body p-md-6 p-xl-7">
<div class="markdown">
<h2 class="h1 mt-0 mb-3">Input mask
</h2>
<div class="example">
<label class="form-label">Telephone mask</label>
<input type="text" name="input-mask" class="form-control" data-mask="(00) 0000-0000" data-mask-visible="true" placeholder="(00) 0000-0000" autocomplete="off" />
</div>
<div class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">&gt;</span>Telephone mask<span class="nt">&lt;/label&gt;</span>
<div class="row justify-content-center">
<div class="col-lg-3 order-lg-1 mb-4">
<a href="https://github.com/tabler/tabler" class="btn btn-block btn-primary mb-4" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon mr-2"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>
Browse source code
</a>
<div class="list-group list-group-transparent mb-0">
<a href="../docs/index.html" class="list-group-item list-group-item-action">
index
</a>
<a href="../docs/alerts.html" class="list-group-item list-group-item-action">
Alerts
</a>
<a href="../docs/autosize.html" class="list-group-item list-group-item-action">
Autosize
</a>
<a href="../docs/avatars.html" class="list-group-item list-group-item-action">
Avatars
</a>
<a href="../docs/badges.html" class="list-group-item list-group-item-action">
Badges
</a>
<a href="../docs/breadcrumb.html" class="list-group-item list-group-item-action">
Breadcrumb
</a>
<a href="../docs/buttons.html" class="list-group-item list-group-item-action">
Buttons
</a>
<a href="../docs/cards.html" class="list-group-item list-group-item-action">
Cards
</a>
<a href="../docs/carousel.html" class="list-group-item list-group-item-action">
Carousel
</a>
<a href="../docs/colors.html" class="list-group-item list-group-item-action">
Colors
</a>
<a href="../docs/cursors.html" class="list-group-item list-group-item-action">
Cursors
</a>
<a href="../docs/charts.html" class="list-group-item list-group-item-action">
Charts
</a>
<a href="../docs/divider.html" class="list-group-item list-group-item-action">
Divider
</a>
<a href="../docs/empty.html" class="list-group-item list-group-item-action">
Empty states
</a>
<a href="../docs/flags.html" class="list-group-item list-group-item-action">
Flags
</a>
<a href="../docs/form-elements.html" class="list-group-item list-group-item-action">
Form elements
</a>
<a href="../docs/form-helpers.html" class="list-group-item list-group-item-action">
Form helpers
</a>
<a href="../docs/input-mask.html" class="list-group-item list-group-item-action active">
Form input mask
</a>
<a href="../docs/progress.html" class="list-group-item list-group-item-action">
Progress
</a>
<a href="../docs/ribbons.html" class="list-group-item list-group-item-action">
Ribbons
<span class="badge bg-green ml-auto">New</span>
</a>
<a href="../docs/spinners.html" class="list-group-item list-group-item-action">
Spinners
</a>
<a href="../docs/steps.html" class="list-group-item list-group-item-action">
Steps
</a>
<a href="../docs/tables.html" class="list-group-item list-group-item-action">
Tables
</a>
<a href="../docs/tabs.html" class="list-group-item list-group-item-action">
Tabs
</a>
<a href="../docs/timelines.html" class="list-group-item list-group-item-action">
Timelines
</a>
<a href="../docs/toasts.html" class="list-group-item list-group-item-action">
Toasts
</a>
<a href="../docs/tooltips.html" class="list-group-item list-group-item-action">
Tooltips
</a>
<a href="../docs/typography.html" class="list-group-item list-group-item-action">
Typography
</a>
</div>
</div>
<div class="col-lg-9">
<div class="card">
<div class="card-body p-md-6 p-xl-7">
<div class="markdown">
<h2 class="h1 mt-0 mb-3">Input mask
</h2>
<div class="example">
<label class="form-label">Telephone mask</label>
<input type="text" name="input-mask" class="form-control" data-mask="(00) 0000-0000" data-mask-visible="true" placeholder="(00) 0000-0000" autocomplete="off" />
</div>
<div class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">&gt;</span>Telephone mask<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">name=</span><span class="s">"input-mask"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">data-mask=</span><span class="s">"(00) 0000-0000"</span> <span class="na">data-mask-visible=</span><span class="s">"true"</span> <span class="na">placeholder=</span><span class="s">"(00) 0000-0000"</span> <span class="na">autocomplete=</span><span class="s">"off"</span><span class="nt">/&gt;</span></code></pre>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
</main>
</div>
</div>
</div>
<script>
window.tabler_colors = {
'blue': '#206bc4',
'azure': '#45aaf2',
'indigo': '#6574cd',
'purple': '#a55eea',
'pink': '#f66d9b',
'red': '#fa4654',
'orange': '#fd9644',
'yellow': '#f1c40f',
'lime': '#7bd235',
'green': '#5eba00',
'teal': '#2bcbba',
'cyan': '#17a2b8',
'gray': '#868e96',
};
</script>
<!-- Libs JS -->
<script src="../dist/libs/jquery/dist/jquery.min.js?1576401968"></script>
<script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1576401968"></script>
<script src="../dist/libs/autosize/dist/autosize.min.js?1576401968"></script>
<script src="../dist/libs/imask/dist/imask.min.js?1576401968"></script>
<script src="../dist/libs/selectize/dist/js/standalone/selectize.min.js?1576401968"></script>
<script src="../dist/libs/apexcharts/dist/apexcharts.min.js?1576401968"></script>
<script src="../dist/libs/jqvmap/dist/jquery.vmap.min.js?1576401968"></script>
<script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.world.js?1576401968"></script>
<script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.usa.js?1576401968"></script>
<script src="../dist/libs/jqvmap/dist/maps/continents/jquery.vmap.europe.js?1576401968"></script>
<script src="../dist/libs/peity/jquery.peity.min.js?1576401968"></script>
<script src="../dist/libs/selectize/dist/js/selectize.min.js?1576401968"></script>
<script src="../dist/libs/fullcalendar/core/main.min.js?1576401968"></script>
<script src="../dist/libs/fullcalendar/daygrid/main.min.js?1576401968"></script>
<script src="../dist/libs/fullcalendar/interaction/main.min.js?1576401968"></script>
<script src="../dist/libs/fullcalendar/timegrid/main.min.js?1576401968"></script>
<script src="../dist/libs/fullcalendar/list/main.min.js?1576401968"></script>
<!-- Tabler Core -->
<script src="../dist/js/tabler.min.js?1576401968"></script>
<script src="../dist/js/tabler.min.js?1576701882"></script>
<!-- Tabler Plugins -->
<script src="../dist/js/tabler-charts.min.js?1576401968"></script>
<script src="../dist/js/tabler-charts.min.js?1576701882"></script>
<script>
document.body.style.display = 'block';
</script>

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

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-alpha
* @version v1.0.0-alpha
* @link https://github.com/tabler/tabler
* Copyright 2018-2019 The Tabler Authors
* Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -26,374 +26,529 @@
<title>Toasts - Documentation - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
<meta name="description" content="The toast component is like an alert box that is only shown for a couple of seconds when something happens (i.e. when the user clicks on a button, submits a form, etc.)."/>
<!-- Libs CSS -->
<link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1576401968" rel="stylesheet"/>
<link href="../dist/libs/selectize/dist/css/selectize.css?1576401968" rel="stylesheet"/>
<link href="../dist/libs/fullcalendar/core/main.min.css?1576401968" rel="stylesheet"/>
<link href="../dist/libs/fullcalendar/daygrid/main.min.css?1576401968" rel="stylesheet"/>
<link href="../dist/libs/fullcalendar/timegrid/main.min.css?1576401968" rel="stylesheet"/>
<link href="../dist/libs/fullcalendar/list/main.min.css?1576401968" rel="stylesheet"/>
<link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1576701882" rel="stylesheet"/>
<link href="../dist/libs/selectize/dist/css/selectize.css?1576701882" rel="stylesheet"/>
<link href="../dist/libs/fullcalendar/core/main.min.css?1576701882" rel="stylesheet"/>
<link href="../dist/libs/fullcalendar/daygrid/main.min.css?1576701882" rel="stylesheet"/>
<link href="../dist/libs/fullcalendar/timegrid/main.min.css?1576701882" rel="stylesheet"/>
<link href="../dist/libs/fullcalendar/list/main.min.css?1576701882" rel="stylesheet"/>
<!-- Tabler Core -->
<link href="../dist/css/tabler.min.css?1576401968" rel="stylesheet"/>
<link href="../dist/css/tabler.min.css?1576701882" rel="stylesheet"/>
<!-- Tabler Plugins -->
<link href="../dist/css/tabler-flags.min.css?1576401968" rel="stylesheet"/>
<link href="../dist/css/tabler-charts.min.css?1576401968" rel="stylesheet"/>
<link href="../dist/css/tabler-flags.min.css?1576701882" rel="stylesheet"/>
<link href="../dist/css/tabler-charts.min.css?1576701882" rel="stylesheet"/>
<style>
body { display: none; }
</style>
</head>
<body class="antialiased ">
<div class="layout">
<header class="layout-area-topnav navbar navbar-expand-lg navbar-light">
<div class="container">
<a class="layout-toggler" data-toggle="menubar">
<span class="layout-toggler-icon"></span>
</a>
<a href=".." class="navbar-brand text-reset mr-md-3">
<img src="../img/logo.svg" alt="Tabler" class="d-none d-md-block navbar-brand-logo">
<img src="../img/logo-small.svg" alt="Tabler" class="d-md-none navbar-brand-logo">
</a>
<ul class="nav navbar-menu align-items-center order-1 order-lg-2">
<li class="nav-item dropdown mr-3">
<a class="nav-link text-reset px-2" data-toggle="dropdown">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
<span class="badge badge-pill badge-up bg-primary">4</span>
<body class="antialiased">
<div class="wrapper">
<div class="content">
<header class="topnav topbar">
<div class="container">
<div class="navbar navbar-expand-lg navbar-light">
<a href=".." class="navbar-brand mr-4">
<img src="../img/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-lg">
<img src="../img/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-sm">
</a>
<div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right mt-3 p-0">
<div class="scrollable">
<div class="list list-row">
</div>
</div>
<div class="d-flex px-3 py-2 b-t">
<div class="flex">
<span>6 Notifications</span>
</div>
<a href="#">See all <i class="fa fa-angle-right text-muted"></i></a>
</div>
</div>
</li>
<li class="nav-item d-none d-lg-flex mr-3">
<a href="https://github.com/tabler/tabler" class="btn btn-sm btn-success" target="_blank">Source code</a>
</li>
<li class="nav-item dropdown">
<a href="#" data-toggle="dropdown"
<ul class="nav navbar-menu align-items-center ml-auto">
<li class="nav-item d-none d-lg-flex mr-3">
<a href="https://github.com/tabler/tabler" class="btn btn-sm btn-success" target="_blank">Source code</a>
</li>
<li class="nav-item dropdown">
<a href="#" data-toggle="dropdown"
class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
<span class="avatar" style="background-image: url(../img/avatars/000m.jpg)"></span>
<span class="ml-2 d-none d-lg-block leading-none">
Paweł Kuna
<span class="text-muted d-block mt-1 text-h6">Administrator</span>
</span>
</a>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
Profile
</a>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
Settings
</a>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
Inbox
<span class="badge bg-primary ml-auto">6</span>
</a>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
Message
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
Need help?
</a>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
Sign out
</a>
</div>
</li>
</ul>
</div>
</header>
<div class="layout-area-menu navbar navbar-expand-lg navbar-light">
<div class="container">
<ul class="navbar-nav flex-wrap">
<li class="nav-item">
<a class="nav-link" href="../index.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
</span>
<span class="nav-text">
Dashboard
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../form-elements.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
</span>
<span class="nav-text">
Form elements
</span>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
<span class="avatar" style="background-image: url(../img/avatars/004f.jpg)"></span>
<span class="ml-2 d-none d-lg-block leading-none">
Leesa Beaty
<span class="text-muted d-block mt-1 text-h6">Administrator</span>
</span>
</a>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
Profile
</a>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
Settings
</a>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
Inbox
<span class="badge bg-primary ml-auto">6</span>
</a>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
Message
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
Need help?
</a>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
Sign out
</a>
</div>
</li>
</ul>
</div>
</div>
</header>
<header class="topnav topbar">
<div class="navbar navbar-expand-lg navbar-light">
<div class="container">
<ul class="navbar-nav flex-wrap">
<li class="nav-item">
<a class="nav-link" href="../index.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
</span>
<span class="nav-text">
Dashboard
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../form-elements.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
</span>
<span class="nav-text">
Form elements
</span>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-error" data-toggle="dropdown" role="button"
aria-expanded="false" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
</span>
<span class="nav-text">
Base
</span>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="../buttons.html" >
<span class="nav-text">
Buttons
</span>
</a>
<a class="dropdown-item" href="../cards.html" >
<span class="nav-text">
Cards
</span>
</a>
<a class="dropdown-item" href="../c.html" >
<span class="nav-text">
C
</span>
</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="../charts.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
</span>
<span class="nav-text">
Charts
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../calendar.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
</span>
<span class="nav-text">
Calendar
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../users.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
</span>
<span class="nav-text">
Users
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../gallery.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
</span>
<span class="nav-text">
Gallery
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../layouts.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
</span>
<span class="nav-text">
Layouts
</span>
</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="../docs/index.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
</span>
<span class="nav-text">
Documentation
</span>
</a>
</li>
</ul>
</div>
</div>
<div class="layout-area-menu-backdrop" data-toggle="menubar"></div>
<div class="layout-area-main">
<main class="container my-4 flex-fill">
<!-- Page title -->
<div class="page-title-box">
<div class="row align-items-center">
<div class="col-auto">
<h2 class="page-title">
Documentation
</h2>
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="9" y1="15" x2="15" y2="15"></line></svg>
</span>
<span class="nav-text">
Error pages
</span>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="../400.html" >
<span class="nav-text">
400 page
</span>
</a>
<a class="dropdown-item" href="../401.html" >
<span class="nav-text">
401 page
</span>
</a>
<a class="dropdown-item" href="../403.html" >
<span class="nav-text">
403 page
</span>
</a>
<a class="dropdown-item" href="../404.html" >
<span class="nav-text">
404 page
</span>
</a>
<a class="dropdown-item" href="../500.html" >
<span class="nav-text">
500 page
</span>
</a>
<a class="dropdown-item" href="../503.html" >
<span class="nav-text">
503 page
</span>
</a>
<a class="dropdown-item" href="../maintenance.html" >
<span class="nav-text">
Maintenance page
</span>
</a>
</div>
</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-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
</span>
<span class="nav-text">
Base
</span>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="../buttons.html" >
<span class="nav-text">
Buttons
</span>
</a>
<a class="dropdown-item" href="../cards.html" >
<span class="nav-text">
Cards
</span>
</a>
<a class="dropdown-item" href="../calendar.html" >
<span class="nav-text">
Calendar
</span>
</a>
<a class="dropdown-item" href="../users.html" >
<span class="nav-text">
Users
</span>
</a>
<a class="dropdown-item" href="../gallery.html" >
<span class="nav-text">
Gallery
</span>
</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="../charts.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
</span>
<span class="nav-text">
Charts
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../layouts.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
</span>
<span class="nav-text">
Layouts
</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-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
</span>
<span class="nav-text">
Extra
</span>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="../invoice.html" >
<span class="nav-text">
Invoice
</span>
</a>
</div>
</li>
<li class="nav-item active dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
aria-expanded="true" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
</span>
<span class="nav-text">
Documentation
</span>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="../docs/index.html" >
<span class="nav-text">
index
</span>
</a>
<a class="dropdown-item" href="../docs/alerts.html" >
<span class="nav-text">
Alerts
</span>
</a>
<a class="dropdown-item" href="../docs/autosize.html" >
<span class="nav-text">
Autosize
</span>
</a>
<a class="dropdown-item" href="../docs/avatars.html" >
<span class="nav-text">
Avatars
</span>
</a>
<a class="dropdown-item" href="../docs/badges.html" >
<span class="nav-text">
Badges
</span>
</a>
<a class="dropdown-item" href="../docs/breadcrumb.html" >
<span class="nav-text">
Breadcrumb
</span>
</a>
<a class="dropdown-item" href="../docs/buttons.html" >
<span class="nav-text">
Buttons
</span>
</a>
<a class="dropdown-item" href="../docs/cards.html" >
<span class="nav-text">
Cards
</span>
</a>
<a class="dropdown-item" href="../docs/carousel.html" >
<span class="nav-text">
Carousel
</span>
</a>
<a class="dropdown-item" href="../docs/colors.html" >
<span class="nav-text">
Colors
</span>
</a>
<a class="dropdown-item" href="../docs/cursors.html" >
<span class="nav-text">
Cursors
</span>
</a>
<a class="dropdown-item" href="../docs/charts.html" >
<span class="nav-text">
Charts
</span>
</a>
<a class="dropdown-item" href="../docs/divider.html" >
<span class="nav-text">
Divider
</span>
</a>
<a class="dropdown-item" href="../docs/empty.html" >
<span class="nav-text">
Empty states
</span>
</a>
<a class="dropdown-item" href="../docs/flags.html" >
<span class="nav-text">
Flags
</span>
</a>
<a class="dropdown-item" href="../docs/form-elements.html" >
<span class="nav-text">
Form elements
</span>
</a>
<a class="dropdown-item" href="../docs/form-helpers.html" >
<span class="nav-text">
Form helpers
</span>
</a>
<a class="dropdown-item" href="../docs/input-mask.html" >
<span class="nav-text">
Form input mask
</span>
</a>
<a class="dropdown-item" href="../docs/progress.html" >
<span class="nav-text">
Progress
</span>
</a>
<a class="dropdown-item" href="../docs/ribbons.html" >
<span class="nav-text">
Ribbons
</span>
</a>
<a class="dropdown-item" href="../docs/spinners.html" >
<span class="nav-text">
Spinners
</span>
</a>
<a class="dropdown-item" href="../docs/steps.html" >
<span class="nav-text">
Steps
</span>
</a>
<a class="dropdown-item" href="../docs/tables.html" >
<span class="nav-text">
Tables
</span>
</a>
<a class="dropdown-item" href="../docs/tabs.html" >
<span class="nav-text">
Tabs
</span>
</a>
<a class="dropdown-item" href="../docs/timelines.html" >
<span class="nav-text">
Timelines
</span>
</a>
<a class="dropdown-item" href="../docs/toasts.html" >
<span class="nav-text">
Toasts
</span>
</a>
<a class="dropdown-item" href="../docs/tooltips.html" >
<span class="nav-text">
Tooltips
</span>
</a>
<a class="dropdown-item" href="../docs/typography.html" >
<span class="nav-text">
Typography
</span>
</a>
</div>
</li>
</ul>
<div class="navbar-search d-none d-lg-block">
<form action="." method="get">
<div class="input-icon">
<span class="input-icon-addon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
</span>
<input type="text" class="form-control form-control-light" placeholder="Search for&hellip;">
</div>
</form>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-lg-3 order-lg-1 mb-4">
<a href="https://github.com/tabler/tabler" class="btn btn-block btn-primary mb-4" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon mr-2"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>
Browse source code
</a>
<div class="list-group list-group-transparent mb-0">
<a href="../docs/index.html"
class="list-group-item list-group-item-action">
Introduction
</a>
<a href="../docs/alerts.html"
class="list-group-item list-group-item-action">
Alerts <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
</a>
<a href="../docs/autosize.html"
class="list-group-item list-group-item-action">
Autosize <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
</a>
<a href="../docs/avatars.html"
class="list-group-item list-group-item-action">
Avatars <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
</a>
<a href="../docs/badges.html"
class="list-group-item list-group-item-action">
Badges <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
</a>
<a href="../docs/breadcrumb.html"
class="list-group-item list-group-item-action">
Breadcrumb <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
</a>
<a href="../docs/buttons.html"
class="list-group-item list-group-item-action">
Buttons <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
</a>
<a href="../docs/cards.html"
class="list-group-item list-group-item-action">
Cards <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
</a>
<a href="../docs/carousel.html"
class="list-group-item list-group-item-action">
Carousel
</a>
<a href="../docs/colors.html"
class="list-group-item list-group-item-action">
Colors <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
</a>
<a href="../docs/cursors.html"
class="list-group-item list-group-item-action">
Cursors
</a>
<a href="../docs/charts.html"
class="list-group-item list-group-item-action">
Charts
</a>
<a href="../docs/divider.html"
class="list-group-item list-group-item-action">
Divider <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
</a>
<a href="../docs/empty.html"
class="list-group-item list-group-item-action">
Empty states
</a>
<a href="../docs/flags.html"
class="list-group-item list-group-item-action">
Flags <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
</a>
<a href="../docs/form-elements.html"
class="list-group-item list-group-item-action">
Form Elements
</a>
<a href="../docs/form-helpers.html"
class="list-group-item list-group-item-action">
Form helpers
</a>
<a href="../docs/input-mask.html"
class="list-group-item list-group-item-action">
Input mask
</a>
<a href="../docs/progress.html"
class="list-group-item list-group-item-action">
Progress
</a>
<a href="../docs/ribbons.html"
class="list-group-item list-group-item-action">
Ribbons
</a>
<a href="../docs/spinners.html"
class="list-group-item list-group-item-action">
Spinners <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
</a>
<a href="../docs/steps.html"
class="list-group-item list-group-item-action">
Steps
</a>
<a href="../docs/tables.html"
class="list-group-item list-group-item-action">
Tables
</a>
<a href="../docs/tabs.html"
class="list-group-item list-group-item-action">
Tabs
</a>
<a href="../docs/timelines.html"
class="list-group-item list-group-item-action">
Timelines
</a>
<a href="../docs/toasts.html"
class="list-group-item list-group-item-action active">
Toasts
</a>
<a href="../docs/tooltips.html"
class="list-group-item list-group-item-action">
Tooltips
</a>
<a href="../docs/typography.html"
class="list-group-item list-group-item-action">
Typography
</a>
</header>
<div class="content-page">
<main class="container my-4 flex-fill">
<!-- Page title -->
<div class="page-title-box">
<div class="row align-items-center">
<div class="col-auto">
<h2 class="page-title">
Documentation
</h2>
</div>
</div>
</div>
<div class="col-lg-9">
<div class="card">
<div class="card-body p-md-6 p-xl-7">
<div class="markdown">
<p class="mb-4 float-right">
<a href="https://getbootstrap.com/docs/4.4/components/toasts/" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon pr-1 text-blue"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>
Bootstrap documentation
</a>
</p>
<h2 class="h1 mt-0 mb-3">Toasts
</h2>
<p>The toast component is like an alert box that is only shown for a couple of seconds when something happens (i.e. when the user clicks on a button, submits a form, etc.).</p>
<h3 id="default-markup">Default markup</h3>
<div class="example">
<div class="toast show" role="alert" aria-live="assertive" aria-atomic="true" data-autohide="false">
<div class="toast-header">
<span class="avatar avatar-sm mr-2" style="background-image: url(../img/avatars/002m.jpg)"></span>
<strong class="mr-auto">Mallory Hulme</strong>
<small>11 mins ago</small>
<button type="button" class="ml-2 close" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
<div class="row justify-content-center">
<div class="col-lg-3 order-lg-1 mb-4">
<a href="https://github.com/tabler/tabler" class="btn btn-block btn-primary mb-4" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon mr-2"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>
Browse source code
</a>
<div class="list-group list-group-transparent mb-0">
<a href="../docs/index.html" class="list-group-item list-group-item-action">
index
</a>
<a href="../docs/alerts.html" class="list-group-item list-group-item-action">
Alerts
</a>
<a href="../docs/autosize.html" class="list-group-item list-group-item-action">
Autosize
</a>
<a href="../docs/avatars.html" class="list-group-item list-group-item-action">
Avatars
</a>
<a href="../docs/badges.html" class="list-group-item list-group-item-action">
Badges
</a>
<a href="../docs/breadcrumb.html" class="list-group-item list-group-item-action">
Breadcrumb
</a>
<a href="../docs/buttons.html" class="list-group-item list-group-item-action">
Buttons
</a>
<a href="../docs/cards.html" class="list-group-item list-group-item-action">
Cards
</a>
<a href="../docs/carousel.html" class="list-group-item list-group-item-action">
Carousel
</a>
<a href="../docs/colors.html" class="list-group-item list-group-item-action">
Colors
</a>
<a href="../docs/cursors.html" class="list-group-item list-group-item-action">
Cursors
</a>
<a href="../docs/charts.html" class="list-group-item list-group-item-action">
Charts
</a>
<a href="../docs/divider.html" class="list-group-item list-group-item-action">
Divider
</a>
<a href="../docs/empty.html" class="list-group-item list-group-item-action">
Empty states
</a>
<a href="../docs/flags.html" class="list-group-item list-group-item-action">
Flags
</a>
<a href="../docs/form-elements.html" class="list-group-item list-group-item-action">
Form elements
</a>
<a href="../docs/form-helpers.html" class="list-group-item list-group-item-action">
Form helpers
</a>
<a href="../docs/input-mask.html" class="list-group-item list-group-item-action">
Form input mask
</a>
<a href="../docs/progress.html" class="list-group-item list-group-item-action">
Progress
</a>
<a href="../docs/ribbons.html" class="list-group-item list-group-item-action">
Ribbons
<span class="badge bg-green ml-auto">New</span>
</a>
<a href="../docs/spinners.html" class="list-group-item list-group-item-action">
Spinners
</a>
<a href="../docs/steps.html" class="list-group-item list-group-item-action">
Steps
</a>
<a href="../docs/tables.html" class="list-group-item list-group-item-action">
Tables
</a>
<a href="../docs/tabs.html" class="list-group-item list-group-item-action">
Tabs
</a>
<a href="../docs/timelines.html" class="list-group-item list-group-item-action">
Timelines
</a>
<a href="../docs/toasts.html" class="list-group-item list-group-item-action active">
Toasts
</a>
<a href="../docs/tooltips.html" class="list-group-item list-group-item-action">
Tooltips
</a>
<a href="../docs/typography.html" class="list-group-item list-group-item-action">
Typography
</a>
</div>
</div>
<div class="col-lg-9">
<div class="card">
<div class="card-body p-md-6 p-xl-7">
<div class="markdown">
<p class="mb-4 float-right">
<a href="https://getbootstrap.com/docs/4.4/components/toasts/" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon pr-1 text-blue"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>
Bootstrap documentation
</a>
</p>
<h2 class="h1 mt-0 mb-3">Toasts
</h2>
<p>The toast component is like an alert box that is only shown for a couple of seconds when something happens (i.e. when the user clicks on a button, submits a form, etc.).</p>
<h3 id="default-markup">Default markup</h3>
<div class="example">
<div class="toast show" role="alert" aria-live="assertive" aria-atomic="true" data-autohide="false">
<div class="toast-header">
<span class="avatar avatar-sm mr-2" style="background-image: url(../img/avatars/002m.jpg)"></span>
<strong class="mr-auto">Mallory Hulme</strong>
<small>11 mins ago</small>
<button type="button" class="ml-2 close" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
</div>
</div>
<div class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"toast show"</span> <span class="na">role=</span><span class="s">"alert"</span> <span class="na">aria-live=</span><span class="s">"assertive"</span> <span class="na">aria-atomic=</span><span class="s">"true"</span> <span class="na">data-autohide=</span><span class="s">"false"</span><span class="nt">&gt;</span>
<div class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"toast show"</span> <span class="na">role=</span><span class="s">"alert"</span> <span class="na">aria-live=</span><span class="s">"assertive"</span> <span class="na">aria-atomic=</span><span class="s">"true"</span> <span class="na">data-autohide=</span><span class="s">"false"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"toast-header"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar avatar-sm mr-2"</span> <span class="na">style=</span><span class="s">"background-image: url(./img/avatars/002m.jpg)"</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;strong</span> <span class="na">class=</span><span class="s">"mr-auto"</span><span class="nt">&gt;</span>Mallory Hulme<span class="nt">&lt;/strong&gt;</span>
@@ -406,54 +561,20 @@
Hello, world! This is a toast message.
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
</main>
</div>
</div>
</div>
<script>
window.tabler_colors = {
'blue': '#206bc4',
'azure': '#45aaf2',
'indigo': '#6574cd',
'purple': '#a55eea',
'pink': '#f66d9b',
'red': '#fa4654',
'orange': '#fd9644',
'yellow': '#f1c40f',
'lime': '#7bd235',
'green': '#5eba00',
'teal': '#2bcbba',
'cyan': '#17a2b8',
'gray': '#868e96',
};
</script>
<!-- Libs JS -->
<script src="../dist/libs/jquery/dist/jquery.min.js?1576401968"></script>
<script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1576401968"></script>
<script src="../dist/libs/autosize/dist/autosize.min.js?1576401968"></script>
<script src="../dist/libs/imask/dist/imask.min.js?1576401968"></script>
<script src="../dist/libs/selectize/dist/js/standalone/selectize.min.js?1576401968"></script>
<script src="../dist/libs/apexcharts/dist/apexcharts.min.js?1576401968"></script>
<script src="../dist/libs/jqvmap/dist/jquery.vmap.min.js?1576401968"></script>
<script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.world.js?1576401968"></script>
<script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.usa.js?1576401968"></script>
<script src="../dist/libs/jqvmap/dist/maps/continents/jquery.vmap.europe.js?1576401968"></script>
<script src="../dist/libs/peity/jquery.peity.min.js?1576401968"></script>
<script src="../dist/libs/selectize/dist/js/selectize.min.js?1576401968"></script>
<script src="../dist/libs/fullcalendar/core/main.min.js?1576401968"></script>
<script src="../dist/libs/fullcalendar/daygrid/main.min.js?1576401968"></script>
<script src="../dist/libs/fullcalendar/interaction/main.min.js?1576401968"></script>
<script src="../dist/libs/fullcalendar/timegrid/main.min.js?1576401968"></script>
<script src="../dist/libs/fullcalendar/list/main.min.js?1576401968"></script>
<!-- Tabler Core -->
<script src="../dist/js/tabler.min.js?1576401968"></script>
<script src="../dist/js/tabler.min.js?1576701882"></script>
<!-- Tabler Plugins -->
<script src="../dist/js/tabler-charts.min.js?1576401968"></script>
<script src="../dist/js/tabler-charts.min.js?1576701882"></script>
<script>
document.body.style.display = 'block';
</script>

View File

@@ -1,7 +1,7 @@
<!doctype html>
<!--
* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
* @version 1.0-alpha
* @version v1.0.0-alpha
* @link https://github.com/tabler/tabler
* Copyright 2018-2019 The Tabler Authors
* Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -26,375 +26,530 @@
<title>Tooltips - Documentation - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
<meta name="description" content="The Tooltip component is small pop-up box that appears when the user moves the mouse pointer over an element."/>
<!-- Libs CSS -->
<link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1576401968" rel="stylesheet"/>
<link href="../dist/libs/selectize/dist/css/selectize.css?1576401968" rel="stylesheet"/>
<link href="../dist/libs/fullcalendar/core/main.min.css?1576401968" rel="stylesheet"/>
<link href="../dist/libs/fullcalendar/daygrid/main.min.css?1576401968" rel="stylesheet"/>
<link href="../dist/libs/fullcalendar/timegrid/main.min.css?1576401968" rel="stylesheet"/>
<link href="../dist/libs/fullcalendar/list/main.min.css?1576401968" rel="stylesheet"/>
<link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1576701882" rel="stylesheet"/>
<link href="../dist/libs/selectize/dist/css/selectize.css?1576701882" rel="stylesheet"/>
<link href="../dist/libs/fullcalendar/core/main.min.css?1576701882" rel="stylesheet"/>
<link href="../dist/libs/fullcalendar/daygrid/main.min.css?1576701882" rel="stylesheet"/>
<link href="../dist/libs/fullcalendar/timegrid/main.min.css?1576701882" rel="stylesheet"/>
<link href="../dist/libs/fullcalendar/list/main.min.css?1576701882" rel="stylesheet"/>
<!-- Tabler Core -->
<link href="../dist/css/tabler.min.css?1576401968" rel="stylesheet"/>
<link href="../dist/css/tabler.min.css?1576701882" rel="stylesheet"/>
<!-- Tabler Plugins -->
<link href="../dist/css/tabler-flags.min.css?1576401968" rel="stylesheet"/>
<link href="../dist/css/tabler-charts.min.css?1576401968" rel="stylesheet"/>
<link href="../dist/css/tabler-flags.min.css?1576701882" rel="stylesheet"/>
<link href="../dist/css/tabler-charts.min.css?1576701882" rel="stylesheet"/>
<style>
body { display: none; }
</style>
</head>
<body class="antialiased ">
<div class="layout">
<header class="layout-area-topnav navbar navbar-expand-lg navbar-light">
<div class="container">
<a class="layout-toggler" data-toggle="menubar">
<span class="layout-toggler-icon"></span>
</a>
<a href=".." class="navbar-brand text-reset mr-md-3">
<img src="../img/logo.svg" alt="Tabler" class="d-none d-md-block navbar-brand-logo">
<img src="../img/logo-small.svg" alt="Tabler" class="d-md-none navbar-brand-logo">
</a>
<ul class="nav navbar-menu align-items-center order-1 order-lg-2">
<li class="nav-item dropdown mr-3">
<a class="nav-link text-reset px-2" data-toggle="dropdown">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
<span class="badge badge-pill badge-up bg-primary">4</span>
<body class="antialiased">
<div class="wrapper">
<div class="content">
<header class="topnav topbar">
<div class="container">
<div class="navbar navbar-expand-lg navbar-light">
<a href=".." class="navbar-brand mr-4">
<img src="../img/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-lg">
<img src="../img/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-sm">
</a>
<div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right mt-3 p-0">
<div class="scrollable">
<div class="list list-row">
</div>
</div>
<div class="d-flex px-3 py-2 b-t">
<div class="flex">
<span>6 Notifications</span>
</div>
<a href="#">See all <i class="fa fa-angle-right text-muted"></i></a>
</div>
</div>
</li>
<li class="nav-item d-none d-lg-flex mr-3">
<a href="https://github.com/tabler/tabler" class="btn btn-sm btn-success" target="_blank">Source code</a>
</li>
<li class="nav-item dropdown">
<a href="#" data-toggle="dropdown"
<ul class="nav navbar-menu align-items-center ml-auto">
<li class="nav-item d-none d-lg-flex mr-3">
<a href="https://github.com/tabler/tabler" class="btn btn-sm btn-success" target="_blank">Source code</a>
</li>
<li class="nav-item dropdown">
<a href="#" data-toggle="dropdown"
class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
<span class="avatar" style="background-image: url(../img/avatars/000m.jpg)"></span>
<span class="ml-2 d-none d-lg-block leading-none">
Paweł Kuna
<span class="text-muted d-block mt-1 text-h6">Administrator</span>
</span>
</a>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
Profile
</a>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
Settings
</a>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
Inbox
<span class="badge bg-primary ml-auto">6</span>
</a>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
Message
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
Need help?
</a>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
Sign out
</a>
</div>
</li>
</ul>
</div>
</header>
<div class="layout-area-menu navbar navbar-expand-lg navbar-light">
<div class="container">
<ul class="navbar-nav flex-wrap">
<li class="nav-item">
<a class="nav-link" href="../index.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
</span>
<span class="nav-text">
Dashboard
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../form-elements.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
</span>
<span class="nav-text">
Form elements
</span>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
<span class="avatar" style="background-image: url(../img/avatars/004f.jpg)"></span>
<span class="ml-2 d-none d-lg-block leading-none">
Leesa Beaty
<span class="text-muted d-block mt-1 text-h6">Administrator</span>
</span>
</a>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
Profile
</a>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
Settings
</a>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
Inbox
<span class="badge bg-primary ml-auto">6</span>
</a>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
Message
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
Need help?
</a>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
Sign out
</a>
</div>
</li>
</ul>
</div>
</div>
</header>
<header class="topnav topbar">
<div class="navbar navbar-expand-lg navbar-light">
<div class="container">
<ul class="navbar-nav flex-wrap">
<li class="nav-item">
<a class="nav-link" href="../index.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
</span>
<span class="nav-text">
Dashboard
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../form-elements.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
</span>
<span class="nav-text">
Form elements
</span>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-error" data-toggle="dropdown" role="button"
aria-expanded="false" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
</span>
<span class="nav-text">
Base
</span>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="../buttons.html" >
<span class="nav-text">
Buttons
</span>
</a>
<a class="dropdown-item" href="../cards.html" >
<span class="nav-text">
Cards
</span>
</a>
<a class="dropdown-item" href="../c.html" >
<span class="nav-text">
C
</span>
</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="../charts.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
</span>
<span class="nav-text">
Charts
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../calendar.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
</span>
<span class="nav-text">
Calendar
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../users.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
</span>
<span class="nav-text">
Users
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../gallery.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
</span>
<span class="nav-text">
Gallery
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../layouts.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
</span>
<span class="nav-text">
Layouts
</span>
</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="../docs/index.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
</span>
<span class="nav-text">
Documentation
</span>
</a>
</li>
</ul>
</div>
</div>
<div class="layout-area-menu-backdrop" data-toggle="menubar"></div>
<div class="layout-area-main">
<main class="container my-4 flex-fill">
<!-- Page title -->
<div class="page-title-box">
<div class="row align-items-center">
<div class="col-auto">
<h2 class="page-title">
Documentation
</h2>
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="9" y1="15" x2="15" y2="15"></line></svg>
</span>
<span class="nav-text">
Error pages
</span>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="../400.html" >
<span class="nav-text">
400 page
</span>
</a>
<a class="dropdown-item" href="../401.html" >
<span class="nav-text">
401 page
</span>
</a>
<a class="dropdown-item" href="../403.html" >
<span class="nav-text">
403 page
</span>
</a>
<a class="dropdown-item" href="../404.html" >
<span class="nav-text">
404 page
</span>
</a>
<a class="dropdown-item" href="../500.html" >
<span class="nav-text">
500 page
</span>
</a>
<a class="dropdown-item" href="../503.html" >
<span class="nav-text">
503 page
</span>
</a>
<a class="dropdown-item" href="../maintenance.html" >
<span class="nav-text">
Maintenance page
</span>
</a>
</div>
</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-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
</span>
<span class="nav-text">
Base
</span>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="../buttons.html" >
<span class="nav-text">
Buttons
</span>
</a>
<a class="dropdown-item" href="../cards.html" >
<span class="nav-text">
Cards
</span>
</a>
<a class="dropdown-item" href="../calendar.html" >
<span class="nav-text">
Calendar
</span>
</a>
<a class="dropdown-item" href="../users.html" >
<span class="nav-text">
Users
</span>
</a>
<a class="dropdown-item" href="../gallery.html" >
<span class="nav-text">
Gallery
</span>
</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="../charts.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
</span>
<span class="nav-text">
Charts
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../layouts.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
</span>
<span class="nav-text">
Layouts
</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-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
</span>
<span class="nav-text">
Extra
</span>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="../invoice.html" >
<span class="nav-text">
Invoice
</span>
</a>
</div>
</li>
<li class="nav-item active dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
aria-expanded="true" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
</span>
<span class="nav-text">
Documentation
</span>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="../docs/index.html" >
<span class="nav-text">
index
</span>
</a>
<a class="dropdown-item" href="../docs/alerts.html" >
<span class="nav-text">
Alerts
</span>
</a>
<a class="dropdown-item" href="../docs/autosize.html" >
<span class="nav-text">
Autosize
</span>
</a>
<a class="dropdown-item" href="../docs/avatars.html" >
<span class="nav-text">
Avatars
</span>
</a>
<a class="dropdown-item" href="../docs/badges.html" >
<span class="nav-text">
Badges
</span>
</a>
<a class="dropdown-item" href="../docs/breadcrumb.html" >
<span class="nav-text">
Breadcrumb
</span>
</a>
<a class="dropdown-item" href="../docs/buttons.html" >
<span class="nav-text">
Buttons
</span>
</a>
<a class="dropdown-item" href="../docs/cards.html" >
<span class="nav-text">
Cards
</span>
</a>
<a class="dropdown-item" href="../docs/carousel.html" >
<span class="nav-text">
Carousel
</span>
</a>
<a class="dropdown-item" href="../docs/colors.html" >
<span class="nav-text">
Colors
</span>
</a>
<a class="dropdown-item" href="../docs/cursors.html" >
<span class="nav-text">
Cursors
</span>
</a>
<a class="dropdown-item" href="../docs/charts.html" >
<span class="nav-text">
Charts
</span>
</a>
<a class="dropdown-item" href="../docs/divider.html" >
<span class="nav-text">
Divider
</span>
</a>
<a class="dropdown-item" href="../docs/empty.html" >
<span class="nav-text">
Empty states
</span>
</a>
<a class="dropdown-item" href="../docs/flags.html" >
<span class="nav-text">
Flags
</span>
</a>
<a class="dropdown-item" href="../docs/form-elements.html" >
<span class="nav-text">
Form elements
</span>
</a>
<a class="dropdown-item" href="../docs/form-helpers.html" >
<span class="nav-text">
Form helpers
</span>
</a>
<a class="dropdown-item" href="../docs/input-mask.html" >
<span class="nav-text">
Form input mask
</span>
</a>
<a class="dropdown-item" href="../docs/progress.html" >
<span class="nav-text">
Progress
</span>
</a>
<a class="dropdown-item" href="../docs/ribbons.html" >
<span class="nav-text">
Ribbons
</span>
</a>
<a class="dropdown-item" href="../docs/spinners.html" >
<span class="nav-text">
Spinners
</span>
</a>
<a class="dropdown-item" href="../docs/steps.html" >
<span class="nav-text">
Steps
</span>
</a>
<a class="dropdown-item" href="../docs/tables.html" >
<span class="nav-text">
Tables
</span>
</a>
<a class="dropdown-item" href="../docs/tabs.html" >
<span class="nav-text">
Tabs
</span>
</a>
<a class="dropdown-item" href="../docs/timelines.html" >
<span class="nav-text">
Timelines
</span>
</a>
<a class="dropdown-item" href="../docs/toasts.html" >
<span class="nav-text">
Toasts
</span>
</a>
<a class="dropdown-item" href="../docs/tooltips.html" >
<span class="nav-text">
Tooltips
</span>
</a>
<a class="dropdown-item" href="../docs/typography.html" >
<span class="nav-text">
Typography
</span>
</a>
</div>
</li>
</ul>
<div class="navbar-search d-none d-lg-block">
<form action="." method="get">
<div class="input-icon">
<span class="input-icon-addon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
</span>
<input type="text" class="form-control form-control-light" placeholder="Search for&hellip;">
</div>
</form>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-lg-3 order-lg-1 mb-4">
<a href="https://github.com/tabler/tabler" class="btn btn-block btn-primary mb-4" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon mr-2"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>
Browse source code
</a>
<div class="list-group list-group-transparent mb-0">
<a href="../docs/index.html"
class="list-group-item list-group-item-action">
Introduction
</a>
<a href="../docs/alerts.html"
class="list-group-item list-group-item-action">
Alerts <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
</a>
<a href="../docs/autosize.html"
class="list-group-item list-group-item-action">
Autosize <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
</a>
<a href="../docs/avatars.html"
class="list-group-item list-group-item-action">
Avatars <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
</a>
<a href="../docs/badges.html"
class="list-group-item list-group-item-action">
Badges <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
</a>
<a href="../docs/breadcrumb.html"
class="list-group-item list-group-item-action">
Breadcrumb <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
</a>
<a href="../docs/buttons.html"
class="list-group-item list-group-item-action">
Buttons <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
</a>
<a href="../docs/cards.html"
class="list-group-item list-group-item-action">
Cards <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
</a>
<a href="../docs/carousel.html"
class="list-group-item list-group-item-action">
Carousel
</a>
<a href="../docs/colors.html"
class="list-group-item list-group-item-action">
Colors <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
</a>
<a href="../docs/cursors.html"
class="list-group-item list-group-item-action">
Cursors
</a>
<a href="../docs/charts.html"
class="list-group-item list-group-item-action">
Charts
</a>
<a href="../docs/divider.html"
class="list-group-item list-group-item-action">
Divider <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
</a>
<a href="../docs/empty.html"
class="list-group-item list-group-item-action">
Empty states
</a>
<a href="../docs/flags.html"
class="list-group-item list-group-item-action">
Flags <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
</a>
<a href="../docs/form-elements.html"
class="list-group-item list-group-item-action">
Form Elements
</a>
<a href="../docs/form-helpers.html"
class="list-group-item list-group-item-action">
Form helpers
</a>
<a href="../docs/input-mask.html"
class="list-group-item list-group-item-action">
Input mask
</a>
<a href="../docs/progress.html"
class="list-group-item list-group-item-action">
Progress
</a>
<a href="../docs/ribbons.html"
class="list-group-item list-group-item-action">
Ribbons
</a>
<a href="../docs/spinners.html"
class="list-group-item list-group-item-action">
Spinners <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
</a>
<a href="../docs/steps.html"
class="list-group-item list-group-item-action">
Steps
</a>
<a href="../docs/tables.html"
class="list-group-item list-group-item-action">
Tables
</a>
<a href="../docs/tabs.html"
class="list-group-item list-group-item-action">
Tabs
</a>
<a href="../docs/timelines.html"
class="list-group-item list-group-item-action">
Timelines
</a>
<a href="../docs/toasts.html"
class="list-group-item list-group-item-action">
Toasts
</a>
<a href="../docs/tooltips.html"
class="list-group-item list-group-item-action active">
Tooltips
</a>
<a href="../docs/typography.html"
class="list-group-item list-group-item-action">
Typography
</a>
</header>
<div class="content-page">
<main class="container my-4 flex-fill">
<!-- Page title -->
<div class="page-title-box">
<div class="row align-items-center">
<div class="col-auto">
<h2 class="page-title">
Documentation
</h2>
</div>
</div>
</div>
<div class="col-lg-9">
<div class="card">
<div class="card-body p-md-6 p-xl-7">
<div class="markdown">
<p class="mb-4 float-right">
<a href="https://getbootstrap.com/docs/4.4/components/tooltips/" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon pr-1 text-blue"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>
Bootstrap documentation
</a>
</p>
<h2 class="h1 mt-0 mb-3">Tooltips
</h2>
<p>The Tooltip component is small pop-up box that appears when the user moves the mouse pointer over an element.</p>
<h3 id="default-markup">Default markup</h3>
<div class="example">
<div class="btn-list">
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
Tooltip on left
</button>
<div class="row justify-content-center">
<div class="col-lg-3 order-lg-1 mb-4">
<a href="https://github.com/tabler/tabler" class="btn btn-block btn-primary mb-4" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon mr-2"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>
Browse source code
</a>
<div class="list-group list-group-transparent mb-0">
<a href="../docs/index.html" class="list-group-item list-group-item-action">
index
</a>
<a href="../docs/alerts.html" class="list-group-item list-group-item-action">
Alerts
</a>
<a href="../docs/autosize.html" class="list-group-item list-group-item-action">
Autosize
</a>
<a href="../docs/avatars.html" class="list-group-item list-group-item-action">
Avatars
</a>
<a href="../docs/badges.html" class="list-group-item list-group-item-action">
Badges
</a>
<a href="../docs/breadcrumb.html" class="list-group-item list-group-item-action">
Breadcrumb
</a>
<a href="../docs/buttons.html" class="list-group-item list-group-item-action">
Buttons
</a>
<a href="../docs/cards.html" class="list-group-item list-group-item-action">
Cards
</a>
<a href="../docs/carousel.html" class="list-group-item list-group-item-action">
Carousel
</a>
<a href="../docs/colors.html" class="list-group-item list-group-item-action">
Colors
</a>
<a href="../docs/cursors.html" class="list-group-item list-group-item-action">
Cursors
</a>
<a href="../docs/charts.html" class="list-group-item list-group-item-action">
Charts
</a>
<a href="../docs/divider.html" class="list-group-item list-group-item-action">
Divider
</a>
<a href="../docs/empty.html" class="list-group-item list-group-item-action">
Empty states
</a>
<a href="../docs/flags.html" class="list-group-item list-group-item-action">
Flags
</a>
<a href="../docs/form-elements.html" class="list-group-item list-group-item-action">
Form elements
</a>
<a href="../docs/form-helpers.html" class="list-group-item list-group-item-action">
Form helpers
</a>
<a href="../docs/input-mask.html" class="list-group-item list-group-item-action">
Form input mask
</a>
<a href="../docs/progress.html" class="list-group-item list-group-item-action">
Progress
</a>
<a href="../docs/ribbons.html" class="list-group-item list-group-item-action">
Ribbons
<span class="badge bg-green ml-auto">New</span>
</a>
<a href="../docs/spinners.html" class="list-group-item list-group-item-action">
Spinners
</a>
<a href="../docs/steps.html" class="list-group-item list-group-item-action">
Steps
</a>
<a href="../docs/tables.html" class="list-group-item list-group-item-action">
Tables
</a>
<a href="../docs/tabs.html" class="list-group-item list-group-item-action">
Tabs
</a>
<a href="../docs/timelines.html" class="list-group-item list-group-item-action">
Timelines
</a>
<a href="../docs/toasts.html" class="list-group-item list-group-item-action">
Toasts
</a>
<a href="../docs/tooltips.html" class="list-group-item list-group-item-action active">
Tooltips
</a>
<a href="../docs/typography.html" class="list-group-item list-group-item-action">
Typography
</a>
</div>
</div>
<div class="col-lg-9">
<div class="card">
<div class="card-body p-md-6 p-xl-7">
<div class="markdown">
<p class="mb-4 float-right">
<a href="https://getbootstrap.com/docs/4.4/components/tooltips/" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon pr-1 text-blue"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>
Bootstrap documentation
</a>
</p>
<h2 class="h1 mt-0 mb-3">Tooltips
</h2>
<p>The Tooltip component is small pop-up box that appears when the user moves the mouse pointer over an element.</p>
<h3 id="default-markup">Default markup</h3>
<div class="example">
<div class="btn-list">
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
Tooltip on left
</button>
</div>
</div>
</div>
<div class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span> <span class="na">data-toggle=</span><span class="s">"tooltip"</span> <span class="na">data-placement=</span><span class="s">"top"</span> <span class="na">title=</span><span class="s">"Tooltip on top"</span><span class="nt">&gt;</span>
<div class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span> <span class="na">data-toggle=</span><span class="s">"tooltip"</span> <span class="na">data-placement=</span><span class="s">"top"</span> <span class="na">title=</span><span class="s">"Tooltip on top"</span><span class="nt">&gt;</span>
Tooltip on top
<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span> <span class="na">data-toggle=</span><span class="s">"tooltip"</span> <span class="na">data-placement=</span><span class="s">"right"</span> <span class="na">title=</span><span class="s">"Tooltip on right"</span><span class="nt">&gt;</span>
@@ -406,67 +561,33 @@
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span> <span class="na">data-toggle=</span><span class="s">"tooltip"</span> <span class="na">data-placement=</span><span class="s">"left"</span> <span class="na">title=</span><span class="s">"Tooltip on left"</span><span class="nt">&gt;</span>
Tooltip on left
<span class="nt">&lt;/button&gt;</span></code></pre>
</div>
<h3 id="tooltip-with-html">Tooltip with HTML</h3>
<div class="example">
<div class="btn-list">
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-html="true" title="&lt;em&gt;Tooltip&lt;/em&gt; &lt;u&gt;with&lt;/u&gt; &lt;b&gt;HTML&lt;/b&gt;">
Tooltip with HTML
</button>
</div>
</div>
<div class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span> <span class="na">data-toggle=</span><span class="s">"tooltip"</span> <span class="na">data-html=</span><span class="s">"true"</span> <span class="na">title=</span><span class="s">"&lt;em&gt;Tooltip&lt;/em&gt; &lt;u&gt;with&lt;/u&gt; &lt;b&gt;HTML&lt;/b&gt;"</span><span class="nt">&gt;</span>
<h3 id="tooltip-with-html">Tooltip with HTML</h3>
<div class="example">
<div class="btn-list">
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-html="true" title="&lt;em&gt;Tooltip&lt;/em&gt; &lt;u&gt;with&lt;/u&gt; &lt;b&gt;HTML&lt;/b&gt;">
Tooltip with HTML
</button>
</div>
</div>
<div class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span> <span class="na">data-toggle=</span><span class="s">"tooltip"</span> <span class="na">data-html=</span><span class="s">"true"</span> <span class="na">title=</span><span class="s">"&lt;em&gt;Tooltip&lt;/em&gt; &lt;u&gt;with&lt;/u&gt; &lt;b&gt;HTML&lt;/b&gt;"</span><span class="nt">&gt;</span>
Tooltip with HTML
<span class="nt">&lt;/button&gt;</span></code></pre>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
</main>
</div>
</div>
</div>
<script>
window.tabler_colors = {
'blue': '#206bc4',
'azure': '#45aaf2',
'indigo': '#6574cd',
'purple': '#a55eea',
'pink': '#f66d9b',
'red': '#fa4654',
'orange': '#fd9644',
'yellow': '#f1c40f',
'lime': '#7bd235',
'green': '#5eba00',
'teal': '#2bcbba',
'cyan': '#17a2b8',
'gray': '#868e96',
};
</script>
<!-- Libs JS -->
<script src="../dist/libs/jquery/dist/jquery.min.js?1576401968"></script>
<script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1576401968"></script>
<script src="../dist/libs/autosize/dist/autosize.min.js?1576401968"></script>
<script src="../dist/libs/imask/dist/imask.min.js?1576401968"></script>
<script src="../dist/libs/selectize/dist/js/standalone/selectize.min.js?1576401968"></script>
<script src="../dist/libs/apexcharts/dist/apexcharts.min.js?1576401968"></script>
<script src="../dist/libs/jqvmap/dist/jquery.vmap.min.js?1576401968"></script>
<script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.world.js?1576401968"></script>
<script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.usa.js?1576401968"></script>
<script src="../dist/libs/jqvmap/dist/maps/continents/jquery.vmap.europe.js?1576401968"></script>
<script src="../dist/libs/peity/jquery.peity.min.js?1576401968"></script>
<script src="../dist/libs/selectize/dist/js/selectize.min.js?1576401968"></script>
<script src="../dist/libs/fullcalendar/core/main.min.js?1576401968"></script>
<script src="../dist/libs/fullcalendar/daygrid/main.min.js?1576401968"></script>
<script src="../dist/libs/fullcalendar/interaction/main.min.js?1576401968"></script>
<script src="../dist/libs/fullcalendar/timegrid/main.min.js?1576401968"></script>
<script src="../dist/libs/fullcalendar/list/main.min.js?1576401968"></script>
<!-- Tabler Core -->
<script src="../dist/js/tabler.min.js?1576401968"></script>
<script src="../dist/js/tabler.min.js?1576701882"></script>
<!-- Tabler Plugins -->
<script src="../dist/js/tabler-charts.min.js?1576401968"></script>
<script src="../dist/js/tabler-charts.min.js?1576701882"></script>
<script>
document.body.style.display = 'block';
</script>

File diff suppressed because it is too large Load Diff