mirror of
https://github.com/tabler/tabler.git
synced 2025-12-26 11:16:12 +04:00
Release v1.0.0-alpha.6
This commit is contained in:
codecalm
@@ -1,7 +1,7 @@
|
||||
<!doctype html>
|
||||
<!--
|
||||
* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
|
||||
* @version 1.0.0-alpha.4
|
||||
* @version 1.0.0-alpha.5
|
||||
* @link https://github.com/tabler/tabler
|
||||
* Copyright 2018-2019 The Tabler Authors
|
||||
* Copyright 2018-2019 codecalm.net Paweł Kuna
|
||||
@@ -12,7 +12,7 @@
|
||||
<meta charset="utf-8"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
|
||||
<title>Progress - Documentation - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
|
||||
<title>Progress bars - Documentation - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
|
||||
<meta name="msapplication-TileColor" content="#206bc4"/>
|
||||
<meta name="theme-color" content="#206bc4"/>
|
||||
@@ -24,7 +24,7 @@
|
||||
<meta name="robots" content="noindex,nofollow,noarchive"/>
|
||||
<link rel="icon" href="../favicon.ico" type="image/x-icon"/>
|
||||
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
|
||||
<meta name="description" content="A progress bar can be used to show a user how far along he is in a process."/>
|
||||
<meta name="description" content="Progress bars are used to provide feedback on an action status and inform users of the current progress. Although seemingly small interface elements, they are extremely hepful in managing users' expectations and preventing them from abandoning a process they have initiated."/>
|
||||
<!-- Libs CSS -->
|
||||
<link href="../dist/libs/jqvmap/dist/jqvmap.min.css" rel="stylesheet"/>
|
||||
<link href="../dist/libs/selectize/dist/css/selectize.css" rel="stylesheet"/>
|
||||
@@ -50,37 +50,104 @@
|
||||
</head>
|
||||
<body class="antialiased">
|
||||
<div class="page">
|
||||
<nav class="navbar navbar-expand-lg navbar-light navbar-primary" id="navbar-primary">
|
||||
<div class="container">
|
||||
<a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal">
|
||||
<img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
|
||||
<img src="../static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
|
||||
<header class="navbar navbar-expand-md navbar-light">
|
||||
<div class="container-xl">
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-menu">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pr-0 pr-md-3">
|
||||
<img src="../static/logo.svg" alt="Tabler" class="navbar-brand-image">
|
||||
</a>
|
||||
<div class="navbar-collapse collapse">
|
||||
<h6 class="navbar-heading">Navigation</h6>
|
||||
<div class="navbar-nav flex-row order-md-last">
|
||||
<div class="nav-item dropdown d-none d-md-flex mr-3">
|
||||
<a href="#" class="nav-link px-0" data-toggle="dropdown" tabindex="-1">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z"/>
|
||||
<path d="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" />
|
||||
<path d="M9 17v1a3 3 0 0 0 6 0v-1" />
|
||||
</svg>
|
||||
<span class="badge bg-red"></span>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right dropdown-menu-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-item dropdown">
|
||||
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-toggle="dropdown">
|
||||
<span class="avatar" style="background-image: url(../static/avatars/000m.jpg)"></span>
|
||||
<div class="d-none d-xl-block pl-2">
|
||||
<div>Paweł Kuna</div>
|
||||
<div class="mt-1 small text-muted">UI Designer</div>
|
||||
</div>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right">
|
||||
<a class="dropdown-item" href="#">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z"/>
|
||||
<path d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
|
||||
<circle cx="12" cy="12" r="3" />
|
||||
</svg>
|
||||
Action
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z"/>
|
||||
<path d="M9 7 h-3a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-3" />
|
||||
<path d="M9 15h3l8.5 -8.5a1.5 1.5 0 0 0 -3 -3l-8.5 8.5v3" />
|
||||
<line x1="16" y1="5" x2="19" y2="8" />
|
||||
</svg>
|
||||
Another action
|
||||
</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z"/>
|
||||
<line x1="12" y1="5" x2="12" y2="19" />
|
||||
<line x1="5" y1="12" x2="19" y2="12" />
|
||||
</svg>
|
||||
Separated link</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="navbar-expand-md">
|
||||
<div class="navbar collapse navbar-collapse navbar-light" id="navbar-menu">
|
||||
<div class="container-xl">
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="../index.html" >
|
||||
<span class="nav-link-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 class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z"/>
|
||||
<polyline points="5 12 3 12 12 3 21 12 19 12" />
|
||||
<path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" />
|
||||
<path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" />
|
||||
</svg>
|
||||
</span>
|
||||
<span class="nav-link-title">
|
||||
Home
|
||||
</span>
|
||||
<span class="nav-link-title">Home</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="../form-elements.html" >
|
||||
<span class="nav-link-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>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button" aria-expanded="false" >
|
||||
<span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z"/>
|
||||
<polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" />
|
||||
<line x1="12" y1="12" x2="20" y2="7.5" />
|
||||
<line x1="12" y1="12" x2="12" y2="21" />
|
||||
<line x1="12" y1="12" x2="4" y2="7.5" />
|
||||
<line x1="16" y1="5.25" x2="8" y2="9.75" />
|
||||
</svg>
|
||||
</span>
|
||||
<span class="nav-link-title">Form elements</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
|
||||
aria-expanded="false" >
|
||||
<span class="nav-link-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 class="nav-link-title">
|
||||
User Interface
|
||||
</span>
|
||||
<span class="nav-link-title">Base</span>
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns dropdown-menu-columns-2">
|
||||
<ul class="dropdown-menu dropdown-menu-columns dropdown-menu-columns-2">
|
||||
<li >
|
||||
<a class="dropdown-item" href="../empty.html" >
|
||||
Empty page
|
||||
@@ -121,6 +188,11 @@
|
||||
Vector maps
|
||||
</a>
|
||||
</li>
|
||||
<li >
|
||||
<a class="dropdown-item" href="../navigation.html" >
|
||||
Navigation
|
||||
</a>
|
||||
</li>
|
||||
<li >
|
||||
<a class="dropdown-item" href="../charts.html" >
|
||||
Charts
|
||||
@@ -174,13 +246,30 @@
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
|
||||
aria-expanded="false" >
|
||||
<span class="nav-link-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>
|
||||
<a class="nav-link" href="../form-elements.html" >
|
||||
<span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z"/>
|
||||
<polyline points="9 11 12 14 20 6" />
|
||||
<path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" />
|
||||
</svg>
|
||||
</span>
|
||||
<span class="nav-link-title">
|
||||
Form elements
|
||||
</span>
|
||||
<span class="nav-link-title">Extra</span>
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-menu-arrow">
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button" aria-expanded="false" >
|
||||
<span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z"/>
|
||||
<path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.179 6.873z" />
|
||||
</svg>
|
||||
</span>
|
||||
<span class="nav-link-title">
|
||||
Extra
|
||||
</span>
|
||||
</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li >
|
||||
<a class="dropdown-item" href="../invoice.html" >
|
||||
Invoice
|
||||
@@ -228,14 +317,89 @@
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
|
||||
aria-expanded="true" >
|
||||
<span class="nav-link-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>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-toggle="dropdown" role="button" aria-expanded="false" >
|
||||
<span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z"/>
|
||||
<rect x="4" y="4" width="6" height="5" rx="2" />
|
||||
<rect x="4" y="13" width="6" height="7" rx="2" />
|
||||
<rect x="14" y="4" width="6" height="7" rx="2" />
|
||||
<rect x="14" y="15" width="6" height="5" rx="2" />
|
||||
</svg>
|
||||
</span>
|
||||
<span class="nav-link-title">
|
||||
Layout
|
||||
</span>
|
||||
<span class="nav-link-title">Docs</span>
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns dropdown-menu-columns-3">
|
||||
<ul class="dropdown-menu">
|
||||
<li >
|
||||
<a class="dropdown-item" href="../layout-horizontal.html" >
|
||||
Horizontal
|
||||
</a>
|
||||
</li>
|
||||
<li >
|
||||
<a class="dropdown-item" href="../layout-vertical.html" >
|
||||
Vertical
|
||||
</a>
|
||||
</li>
|
||||
<li >
|
||||
<a class="dropdown-item" href="../layout-vertical-right.html" >
|
||||
Right vertical
|
||||
</a>
|
||||
</li>
|
||||
<li >
|
||||
<a class="dropdown-item" href="../layout-condensed.html" >
|
||||
Condensed
|
||||
</a>
|
||||
</li>
|
||||
<li >
|
||||
<a class="dropdown-item" href="../layout-condensed-dark.html" >
|
||||
Condensed dark
|
||||
</a>
|
||||
</li>
|
||||
<li >
|
||||
<a class="dropdown-item" href="../layout-combo.html" >
|
||||
Combined
|
||||
</a>
|
||||
</li>
|
||||
<li >
|
||||
<a class="dropdown-item" href="../layout-navbar-dark.html" >
|
||||
Navbar dark
|
||||
</a>
|
||||
</li>
|
||||
<li >
|
||||
<a class="dropdown-item" href="../layout-dark.html" >
|
||||
Dark mode
|
||||
</a>
|
||||
</li>
|
||||
<li >
|
||||
<a class="dropdown-item" href="../layout-fluid.html" >
|
||||
Fluid
|
||||
</a>
|
||||
</li>
|
||||
<li >
|
||||
<a class="dropdown-item" href="../layout-fluid-vertical.html" >
|
||||
Fluid vertical
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item active dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
|
||||
<span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z"/>
|
||||
<polyline points="14 3 14 8 19 8" />
|
||||
<path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" />
|
||||
<line x1="9" y1="9" x2="10" y2="9" />
|
||||
<line x1="9" y1="13" x2="15" y2="13" />
|
||||
<line x1="9" y1="17" x2="15" y2="17" />
|
||||
</svg>
|
||||
</span>
|
||||
<span class="nav-link-title">
|
||||
Docs
|
||||
</span>
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-menu-columns dropdown-menu-columns-3">
|
||||
<li >
|
||||
<a class="dropdown-item" href="../docs/index.html" >
|
||||
Introduction
|
||||
@@ -403,125 +567,26 @@
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item d-none-navbar-vertical">
|
||||
<a href="#" class="nav-link" data-toggle="modal" data-target="#modal-customize">
|
||||
<span class="nav-link-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="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
|
||||
</span>
|
||||
<span class="nav-link-title">Customize</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<h6 class="navbar-heading mt-4">Tools</h6>
|
||||
<div class="navbar-side">
|
||||
<div class="d-none d-xl-block ml-auto d-none-navbar-vertical-narrow">
|
||||
<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" placeholder="Search…">
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-narrow btn-block" data-toggle="modal" data-target="#modal-customize">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" 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="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
|
||||
Customize
|
||||
</a>
|
||||
<a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-wide btn-block btn-icon" data-toggle="modal" data-target="#modal-customize" aria-label="Button">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" 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="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
|
||||
</a>
|
||||
<div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
|
||||
<form action="." method="get">
|
||||
<div class="input-icon">
|
||||
<span class="input-icon-addon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z"/>
|
||||
<circle cx="10" cy="10" r="7" />
|
||||
<line x1="21" y1="21" x2="15" y2="15" />
|
||||
</svg>
|
||||
</span>
|
||||
<input type="text" class="form-control" placeholder="Search…">
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<nav class="navbar navbar-light navbar-secondary navbar-expand" id="navbar-secondary">
|
||||
<div class="container">
|
||||
<a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-vertical">
|
||||
<img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
|
||||
<img src="../static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
|
||||
</a>
|
||||
<form class="form-inline w-50 mr-4 d-none d-md-flex ">
|
||||
<div class="input-icon w-100">
|
||||
<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-flush w-100" placeholder="Search…">
|
||||
</div>
|
||||
</form>
|
||||
<ul class="navbar-nav ml-auto">
|
||||
<li class="nav-item dropdown">
|
||||
<a href="#" class="nav-link px-0" 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"><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>
|
||||
</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-item-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>
|
||||
Action
|
||||
</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-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
|
||||
Another action
|
||||
</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-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
|
||||
Separated link</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a href="#" class="nav-link" data-toggle="dropdown">
|
||||
<span class="flag flag-country-us mr-1"></span>
|
||||
<span class="d-none d-lg-inline">English</span>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right" style="">
|
||||
<a href="#" class="dropdown-item"><span class="flag flag-country-de mr-1"></span>
|
||||
German</a>
|
||||
<a href="#" class="dropdown-item"><span class="flag flag-country-pl mr-1"></span>
|
||||
Polish</a>
|
||||
<a href="#" class="dropdown-item"><span class="flag flag-country-jp mr-1"></span>
|
||||
Japan</a>
|
||||
<a href="#" class="dropdown-item"><span class="flag flag-country-ru mr-1"></span>
|
||||
Russian</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a href="#" class="nav-link px-0" 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>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow dropdown-menu-card" style="max-width: 20rem;">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown pl-3">
|
||||
<a href="#" class="nav-link d-flex lh-1 text-reset p-0 text-left" data-toggle="dropdown">
|
||||
<span class="avatar" style="background-image: url(../static/avatars/000m.jpg)"></span>
|
||||
<div class="d-none d-lg-block pl-2">
|
||||
<div>Paweł Kuna</div>
|
||||
<div class="mt-1 small text-muted">Founder</div>
|
||||
</div>
|
||||
</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-item-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>
|
||||
Action
|
||||
</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-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
|
||||
Another action
|
||||
</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-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
|
||||
Separated link</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="container">
|
||||
<div class="container-xl">
|
||||
<!-- Page title -->
|
||||
<div class="page-header">
|
||||
<div class="row align-items-center">
|
||||
@@ -557,17 +622,22 @@
|
||||
<div class="card-body">
|
||||
<div class="markdown">
|
||||
<div class="d-flex">
|
||||
<h2 class="h1 mt-0 mb-3">Progress</h2>
|
||||
<h2 class="h1 mt-0 mb-3">Progress bars</h2>
|
||||
<p class="ml-auto">
|
||||
<a href="https://getbootstrap.com/docs/4.4/components/progress" 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>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon pr-1 text-blue" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z"/>
|
||||
<path d="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" />
|
||||
<line x1="10" y1="14" x2="20" y2="4" />
|
||||
<polyline points="15 4 20 4 20 9" />
|
||||
</svg>
|
||||
Bootstrap documentation
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
<p>A progress bar can be used to show a user how far along he is in a process.</p>
|
||||
<p>Progress bars are used to provide feedback on an action status and inform users of the current progress. Although seemingly small interface elements, they are extremely hepful in managing users' expectations and preventing them from abandoning a process they have initiated.</p>
|
||||
<h2 id="default-markup">Default markup</h2>
|
||||
<p>To create a default progress bar, add a <code class="highlighter-rouge">.progress</code> class to a <code class="highlighter-rouge"><div></code> element:</p>
|
||||
<p>To create a default progress bar, add a <code class="highlighter-rouge">.progress</code> class to a <code class="highlighter-rouge"><div></code> element. Thanks to that, you will be able to notify users how long they have to wait for a process to complete.</p>
|
||||
<div class="example no_toc_section">
|
||||
<div class="example-content">
|
||||
<div class="progress">
|
||||
@@ -587,7 +657,7 @@
|
||||
</figure>
|
||||
</div>
|
||||
<h2 id="progress-size">Progress size</h2>
|
||||
<p>Using Bootstrap’s typical naming structure, you can create a standard progress, or scale it up to different sizes based on what’s needed.</p>
|
||||
<p>Using Bootstrap’s typical naming structure, you can create a standard progress bar or scale it up or down to different sizes based on what’s needed.</p>
|
||||
<div class="example no_toc_section">
|
||||
<div class="example-content">
|
||||
<div class="progress progress-sm">
|
||||
@@ -607,7 +677,7 @@
|
||||
</figure>
|
||||
</div>
|
||||
<h2 id="progress-without-value">Progress without value</h2>
|
||||
<p>Remove the showed value by adding a class called <code class="highlighter-rouge">.sr-only</code>.</p>
|
||||
<p>Remove the displayed value by adding the <code class="highlighter-rouge">.sr-only</code> class.</p>
|
||||
<div class="example no_toc_section">
|
||||
<div class="example-content">
|
||||
<div class="progress">
|
||||
@@ -627,7 +697,7 @@
|
||||
</figure>
|
||||
</div>
|
||||
<h2 id="indeterminate-progress">Indeterminate progress</h2>
|
||||
<p>To create indeterminate progress add <code class="highlighter-rouge">.progress-bar-indeterminate</code> to the <code class="highlighter-rouge">.progress-bar</code> element.</p>
|
||||
<p>You can create a progress bar which shows indeterminate progress by adding <code class="highlighter-rouge">.progress-bar-indeterminate</code> to the <code class="highlighter-rouge">.progress-bar</code> element.</p>
|
||||
<div class="example no_toc_section">
|
||||
<div class="example-content">
|
||||
<div class="progress progress-sm">
|
||||
@@ -655,7 +725,7 @@
|
||||
</figure>
|
||||
</div>
|
||||
<h2 id="progress-color">Progress color</h2>
|
||||
<p>Customize the color of the progress bar. You can click <a href="./colors.html">here</a> to see the list of available colors.</p>
|
||||
<p>Customize the color of the progress bar to suit your design. Click <a href="./colors.html">here</a> to see the list of available colors.</p>
|
||||
<div class="example no_toc_section">
|
||||
<div class="example-content">
|
||||
<div class="progress progress-sm mb-2">
|
||||
@@ -730,185 +800,11 @@
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal modal-blur fade" id="modal-customize" tabindex="-1" role="dialog" aria-hidden="true">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">Customize Tabler</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" 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="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p class="text-muted">Set preferences that will be saved for your live preview.</p>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Color scheme</label>
|
||||
<div class="form-hint">Light or dark presentation.</div>
|
||||
<div class="btn-group w-100">
|
||||
<button class="btn btn-secondary" data-theme-toggle="theme:light"><svg xmlns="http://www.w3.org/2000/svg" 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="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
|
||||
Light</button>
|
||||
<button class="btn btn-secondary" data-theme-toggle="theme:dark"><svg xmlns="http://www.w3.org/2000/svg" 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 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
|
||||
Dark</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-4 text-muted">
|
||||
You can use the <code>.theme-dark-auto</code> class to automatically adjust the color version to the system settings.
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Navigation position</label>
|
||||
<div class="form-hint">Choose where the main navigation in your project should be located.</div>
|
||||
<div class="btn-group w-100">
|
||||
<button class="btn btn-secondary" data-theme-toggle="navbar-position:horizontal">Topnav</button>
|
||||
<button class="btn btn-secondary" data-theme-toggle="navbar-position:vertical">Sidenav</button>
|
||||
<button class="btn btn-secondary" data-theme-toggle="navbar-position:both">Both</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Sidebar size</label>
|
||||
<div class="form-hint">Standard sidebar width or narrow version with icons only.</div>
|
||||
<div class="btn-group w-100">
|
||||
<button class="btn btn-secondary" data-theme-toggle="navbar-size:wide">Wide</button>
|
||||
<button class="btn btn-secondary" data-theme-toggle="navbar-size:narrow">Narrow</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Sidebar position</label>
|
||||
<div class="form-hint">Choose whether the sidebar should appear on the left or on the right.</div>
|
||||
<div class="btn-group w-100">
|
||||
<button class="btn btn-secondary" data-theme-toggle="navbar-side:left">Left</button>
|
||||
<button class="btn btn-secondary" data-theme-toggle="navbar-side:right">Right</button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="form-label">Navigation color</label>
|
||||
<div class="form-hint">Light or dark version of the sidebar </div>
|
||||
<div class="btn-group w-100">
|
||||
<button class="btn btn-secondary" data-theme-toggle="navbar-color:light">Light</button>
|
||||
<button class="btn btn-secondary" data-theme-toggle="navbar-color:dark">Dark</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Libs JS -->
|
||||
<script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="../dist/libs/jquery/dist/jquery.slim.min.js"></script>
|
||||
<!-- Tabler Core -->
|
||||
<script src="../dist/js/tabler.min.js"></script>
|
||||
<script>
|
||||
(function() {
|
||||
var navbarPrimary = document.getElementById('navbar-primary'),
|
||||
navbarSecondary = document.getElementById('navbar-secondary');
|
||||
var defaults = {
|
||||
theme: 'light',
|
||||
'navbar-position': 'horizontal',
|
||||
'navbar-size': 'wide',
|
||||
'navbar-side': 'left',
|
||||
'navbar-color': 'light',
|
||||
};
|
||||
var eventsClean = {
|
||||
'theme': function () {
|
||||
document.body.classList.remove('theme-dark');
|
||||
},
|
||||
'navbar-position': function () {
|
||||
navbarPrimary.classList.remove('navbar-vertical');
|
||||
navbarSecondary.classList.remove('d-none');
|
||||
},
|
||||
'navbar-size': function () {
|
||||
navbarPrimary.classList.remove('navbar-vertical-narrow');
|
||||
},
|
||||
'navbar-side': function () {
|
||||
navbarPrimary.classList.remove('navbar-right');
|
||||
},
|
||||
'navbar-color': function () {
|
||||
navbarPrimary.classList.remove('navbar-dark');
|
||||
navbarPrimary.classList.add('navbar-light');
|
||||
},
|
||||
};
|
||||
var events = {
|
||||
'theme:light': function () {
|
||||
},
|
||||
'theme:dark': function () {
|
||||
document.body.classList.add('theme-dark');
|
||||
},
|
||||
'navbar-position:vertical': function () {
|
||||
navbarPrimary.classList.add('navbar-vertical');
|
||||
navbarSecondary.classList.add('d-none');
|
||||
},
|
||||
'navbar-position:horizontal': function () {
|
||||
},
|
||||
'navbar-position:both': function () {
|
||||
navbarPrimary.classList.add('navbar-vertical');
|
||||
},
|
||||
'navbar-size:wide': function () {
|
||||
},
|
||||
'navbar-size:narrow': function () {
|
||||
navbarPrimary.classList.add('navbar-vertical-narrow');
|
||||
},
|
||||
'navbar-side:left': function () {
|
||||
},
|
||||
'navbar-side:right': function () {
|
||||
navbarPrimary.classList.add('navbar-right');
|
||||
},
|
||||
'navbar-color:light': function () {
|
||||
},
|
||||
'navbar-color:dark': function () {
|
||||
navbarPrimary.classList.add('navbar-dark');
|
||||
navbarPrimary.classList.remove('navbar-light');
|
||||
},
|
||||
};
|
||||
var updateThemeConfig = function (name) {
|
||||
var key, value;
|
||||
if (name) {
|
||||
[key, value] = name.split(':');
|
||||
setConfig(key, value);
|
||||
}
|
||||
applyConfig();
|
||||
};
|
||||
var disableTransitions = function () {
|
||||
document.body.classList.add('no-transitions');
|
||||
setTimeout(function () {
|
||||
document.body.classList.remove('no-transitions');
|
||||
}, 300);
|
||||
};
|
||||
var getConfig = function () {
|
||||
var config = {};
|
||||
for (var key in defaults) {
|
||||
config[key] = localStorage.getItem('tabler-' + key) || defaults[key];
|
||||
}
|
||||
return config;
|
||||
};
|
||||
var setConfig = function (key, value) {
|
||||
localStorage.setItem('tabler-' + key, value);
|
||||
};
|
||||
var applyConfig = function () {
|
||||
disableTransitions();
|
||||
var config = getConfig();
|
||||
for (var key in config) {
|
||||
var value = config[key];
|
||||
eventsClean[key] && eventsClean[key].call();
|
||||
events[key + ':' + value] && events[key + ':' + value].call();
|
||||
([].slice.call(document.querySelectorAll('[data-theme-toggle^="' + key + '"]'))).map(function (activeTrigger) {
|
||||
activeTrigger.classList.remove('active')
|
||||
});
|
||||
document.querySelector('[data-theme-toggle="' + key + ':' + value + '"]').classList.add('active');
|
||||
}
|
||||
};
|
||||
applyConfig();
|
||||
for (var name in events) {
|
||||
var event = events[name];
|
||||
(function (event, name) {
|
||||
document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
|
||||
updateThemeConfig(name);
|
||||
event.call();
|
||||
e.preventDefault();
|
||||
return false;
|
||||
});
|
||||
})(event, name);
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
<script>
|
||||
document.body.style.display = "block"
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user