mirror of https://github.com/ColorlibHQ/gentelella
1499 lines
107 KiB
HTML
1499 lines
107 KiB
HTML
|
|
|
|
<!DOCTYPE html>
|
|
|
|
<html lang="en-US">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
|
|
|
|
<link rel="stylesheet" href="/gentelella/assets/css/just-the-docs-default.css">
|
|
|
|
<link rel="stylesheet" href="/gentelella/assets/css/just-the-docs-head-nav.css" id="jtd-head-nav-stylesheet">
|
|
|
|
<style id="jtd-nav-activation">
|
|
|
|
|
|
|
|
.site-nav > ul.nav-list:first-child > li:not(:nth-child(4)) > a,
|
|
.site-nav > ul.nav-list:first-child > li > ul > li a {
|
|
background-image: none;
|
|
}
|
|
|
|
.site-nav > ul.nav-list:not(:first-child) a,
|
|
.site-nav li.external a {
|
|
background-image: none;
|
|
}
|
|
|
|
.site-nav > ul.nav-list:first-child > li:nth-child(4) > a {
|
|
font-weight: 600;
|
|
text-decoration: none;
|
|
}.site-nav > ul.nav-list:first-child > li:nth-child(4) > button svg {
|
|
transform: rotate(-90deg);
|
|
}.site-nav > ul.nav-list:first-child > li.nav-list-item:nth-child(4) > ul.nav-list {
|
|
display: block;
|
|
}
|
|
</style>
|
|
|
|
|
|
|
|
|
|
<script src="/gentelella/assets/js/vendor/lunr.min.js"></script>
|
|
|
|
|
|
<script src="/gentelella/assets/js/just-the-docs.js"></script>
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
|
|
|
|
|
<link rel="icon" href="/gentelella/favicon.ico" type="image/x-icon">
|
|
|
|
|
|
|
|
<!-- Begin Jekyll SEO tag v2.8.0 -->
|
|
<title>Components Guide | Gentelella Admin Template</title>
|
|
<meta name="generator" content="Jekyll v3.9.5" />
|
|
<meta property="og:title" content="Components Guide" />
|
|
<meta property="og:locale" content="en_US" />
|
|
<meta name="description" content="Modern Bootstrap 5 Admin Dashboard Template with Performance Optimizations" />
|
|
<meta property="og:description" content="Modern Bootstrap 5 Admin Dashboard Template with Performance Optimizations" />
|
|
<link rel="canonical" href="http://localhost:4000/gentelella/components/" />
|
|
<meta property="og:url" content="http://localhost:4000/gentelella/components/" />
|
|
<meta property="og:site_name" content="Gentelella Admin Template" />
|
|
<meta property="og:image" content="http://localhost:4000/gentelella/assets/images/gentelella-preview.jpg" />
|
|
<meta property="og:type" content="website" />
|
|
<meta name="twitter:card" content="summary_large_image" />
|
|
<meta property="twitter:image" content="http://localhost:4000/gentelella/assets/images/gentelella-preview.jpg" />
|
|
<meta property="twitter:title" content="Components Guide" />
|
|
<script type="application/ld+json">
|
|
{"@context":"https://schema.org","@type":"WebPage","description":"Modern Bootstrap 5 Admin Dashboard Template with Performance Optimizations","headline":"Components Guide","image":"http://localhost:4000/gentelella/assets/images/gentelella-preview.jpg","url":"http://localhost:4000/gentelella/components/"}</script>
|
|
<!-- End Jekyll SEO tag -->
|
|
|
|
|
|
|
|
|
|
</head>
|
|
|
|
<body>
|
|
<a class="skip-to-main" href="#main-content">Skip to main content</a>
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
|
<symbol id="svg-link" viewBox="0 0 24 24">
|
|
<title>Link</title>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-link">
|
|
<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
|
|
</svg>
|
|
</symbol>
|
|
|
|
<symbol id="svg-menu" viewBox="0 0 24 24">
|
|
<title>Menu</title>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu">
|
|
<line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line>
|
|
</svg>
|
|
</symbol>
|
|
|
|
<symbol id="svg-arrow-right" viewBox="0 0 24 24">
|
|
<title>Expand</title>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-right">
|
|
<polyline points="9 18 15 12 9 6"></polyline>
|
|
</svg>
|
|
</symbol>
|
|
|
|
<!-- Feather. MIT License: https://github.com/feathericons/feather/blob/master/LICENSE -->
|
|
<symbol id="svg-external-link" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-external-link">
|
|
<title id="svg-external-link-title">(external link)</title>
|
|
<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>
|
|
</symbol>
|
|
|
|
|
|
<symbol id="svg-doc" viewBox="0 0 24 24">
|
|
<title>Document</title>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file">
|
|
<path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path><polyline points="13 2 13 9 20 9"></polyline>
|
|
</svg>
|
|
</symbol>
|
|
|
|
<symbol id="svg-search" viewBox="0 0 24 24">
|
|
<title>Search</title>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search">
|
|
<circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line>
|
|
</svg>
|
|
</symbol>
|
|
|
|
|
|
|
|
<!-- Bootstrap Icons. MIT License: https://github.com/twbs/icons/blob/main/LICENSE.md -->
|
|
<symbol id="svg-copy" viewBox="0 0 16 16">
|
|
<title>Copy</title>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-clipboard" viewBox="0 0 16 16">
|
|
<path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/>
|
|
<path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/>
|
|
</svg>
|
|
</symbol>
|
|
<symbol id="svg-copied" viewBox="0 0 16 16">
|
|
<title>Copied</title>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-clipboard-check-fill" viewBox="0 0 16 16">
|
|
<path d="M6.5 0A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3Zm3 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3Z"/>
|
|
<path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1A2.5 2.5 0 0 1 9.5 5h-3A2.5 2.5 0 0 1 4 2.5v-1Zm6.854 7.354-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 0 1 .708-.708L7.5 10.793l2.646-2.647a.5.5 0 0 1 .708.708Z"/>
|
|
</svg>
|
|
</symbol>
|
|
|
|
|
|
</svg>
|
|
|
|
|
|
<div class="side-bar">
|
|
<div class="site-header" role="banner">
|
|
<a href="/gentelella/" class="site-title lh-tight">
|
|
Gentelella Admin Template
|
|
|
|
</a>
|
|
<button id="menu-button" class="site-button btn-reset" aria-label="Toggle menu" aria-pressed="false">
|
|
<svg viewBox="0 0 24 24" class="icon" aria-hidden="true"><use xlink:href="#svg-menu"></use></svg>
|
|
</button>
|
|
</div>
|
|
|
|
<nav aria-label="Main" id="site-nav" class="site-nav">
|
|
|
|
|
|
<ul class="nav-list"><li class="nav-list-item"><a href="/gentelella/" class="nav-list-link">Gentelella Admin Template Documentation</a></li><li class="nav-list-item"><a href="/gentelella/installation/" class="nav-list-link">Installation Guide</a></li><li class="nav-list-item"><a href="/gentelella/configuration/" class="nav-list-link">Configuration</a></li><li class="nav-list-item"><a href="/gentelella/components/" class="nav-list-link">Components Guide</a></li><li class="nav-list-item"><a href="/gentelella/performance/" class="nav-list-link">Performance Guide</a></li><li class="nav-list-item"><a href="/gentelella/deployment/" class="nav-list-link">Deployment Guide</a></li><li class="nav-list-item"><a href="/gentelella/customization/" class="nav-list-link">Customization Guide</a></li><li class="nav-list-item"><a href="/gentelella/api-integration/" class="nav-list-link">API Integration</a></li></ul>
|
|
|
|
</nav>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<footer class="site-footer">
|
|
This site uses <a href="https://github.com/just-the-docs/just-the-docs">Just the Docs</a>, a documentation theme for Jekyll.
|
|
</footer>
|
|
|
|
</div>
|
|
|
|
|
|
<div class="main" id="top">
|
|
<div id="main-header" class="main-header">
|
|
|
|
|
|
|
|
<div class="search" role="search">
|
|
<div class="search-input-wrap">
|
|
<input type="text" id="search-input" class="search-input" tabindex="0" placeholder="Search Gentelella Admin Template" aria-label="Search Gentelella Admin Template" autocomplete="off">
|
|
<label for="search-input" class="search-label"><svg viewBox="0 0 24 24" class="search-icon"><use xlink:href="#svg-search"></use></svg></label>
|
|
</div>
|
|
<div id="search-results" class="search-results"></div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<nav aria-label="Auxiliary" class="aux-nav">
|
|
<ul class="aux-nav-list">
|
|
|
|
<li class="aux-nav-list-item">
|
|
<a href="//github.com/puikinsh/gentelella" class="site-button"
|
|
|
|
>
|
|
Gentelella on GitHub
|
|
</a>
|
|
</li>
|
|
|
|
<li class="aux-nav-list-item">
|
|
<a href="//colorlib.com" class="site-button"
|
|
|
|
>
|
|
Colorlib
|
|
</a>
|
|
</li>
|
|
|
|
</ul>
|
|
</nav>
|
|
|
|
|
|
</div>
|
|
|
|
<div class="main-content-wrap">
|
|
|
|
<div id="main-content" class="main-content">
|
|
<main>
|
|
|
|
<h1 class="no_toc" id="components-guide">
|
|
|
|
|
|
<a href="#components-guide" class="anchor-heading" aria-labelledby="components-guide"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Components Guide
|
|
|
|
|
|
</h1>
|
|
|
|
|
|
<p class="fs-6 fw-300">Complete reference for all components available in Gentelella Admin Template</p>
|
|
<h2 class="no_toc text-delta" id="table-of-contents">
|
|
|
|
|
|
<a href="#table-of-contents" class="anchor-heading" aria-labelledby="table-of-contents"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Table of contents
|
|
|
|
|
|
</h2>
|
|
|
|
|
|
<ol id="markdown-toc">
|
|
<li><a href="#dashboard-components" id="markdown-toc-dashboard-components">Dashboard Components</a> <ol>
|
|
<li><a href="#dashboard-layouts" id="markdown-toc-dashboard-layouts">Dashboard Layouts</a> <ol>
|
|
<li><a href="#main-dashboard-indexhtml" id="markdown-toc-main-dashboard-indexhtml">Main Dashboard (<code class="language-plaintext highlighter-rouge">index.html</code>)</a></li>
|
|
<li><a href="#dashboard-2-index2html" id="markdown-toc-dashboard-2-index2html">Dashboard 2 (<code class="language-plaintext highlighter-rouge">index2.html</code>)</a></li>
|
|
<li><a href="#dashboard-3-index3html" id="markdown-toc-dashboard-3-index3html">Dashboard 3 (<code class="language-plaintext highlighter-rouge">index3.html</code>)</a></li>
|
|
</ol>
|
|
</li>
|
|
<li><a href="#widget-cards" id="markdown-toc-widget-cards">Widget Cards</a> <ol>
|
|
<li><a href="#tile-widgets" id="markdown-toc-tile-widgets">Tile Widgets</a></li>
|
|
<li><a href="#info-box-widgets" id="markdown-toc-info-box-widgets">Info Box Widgets</a></li>
|
|
</ol>
|
|
</li>
|
|
</ol>
|
|
</li>
|
|
<li><a href="#chart-components" id="markdown-toc-chart-components">Chart Components</a> <ol>
|
|
<li><a href="#chartjs-integration" id="markdown-toc-chartjs-integration">Chart.js Integration</a> <ol>
|
|
<li><a href="#line-charts" id="markdown-toc-line-charts">Line Charts</a></li>
|
|
<li><a href="#bar-charts" id="markdown-toc-bar-charts">Bar Charts</a></li>
|
|
<li><a href="#pie-charts" id="markdown-toc-pie-charts">Pie Charts</a></li>
|
|
</ol>
|
|
</li>
|
|
<li><a href="#morrisjs-charts" id="markdown-toc-morrisjs-charts">Morris.js Charts</a> <ol>
|
|
<li><a href="#line-charts-1" id="markdown-toc-line-charts-1">Line Charts</a></li>
|
|
<li><a href="#area-charts" id="markdown-toc-area-charts">Area Charts</a></li>
|
|
</ol>
|
|
</li>
|
|
<li><a href="#sparkline-charts" id="markdown-toc-sparkline-charts">Sparkline Charts</a></li>
|
|
<li><a href="#gauge-charts" id="markdown-toc-gauge-charts">Gauge Charts</a></li>
|
|
</ol>
|
|
</li>
|
|
<li><a href="#form-components" id="markdown-toc-form-components">Form Components</a> <ol>
|
|
<li><a href="#basic-form-elements" id="markdown-toc-basic-form-elements">Basic Form Elements</a> <ol>
|
|
<li><a href="#input-fields" id="markdown-toc-input-fields">Input Fields</a></li>
|
|
<li><a href="#select-dropdowns" id="markdown-toc-select-dropdowns">Select Dropdowns</a></li>
|
|
</ol>
|
|
</li>
|
|
<li><a href="#advanced-form-components" id="markdown-toc-advanced-form-components">Advanced Form Components</a> <ol>
|
|
<li><a href="#select2-enhanced-dropdowns" id="markdown-toc-select2-enhanced-dropdowns">Select2 Enhanced Dropdowns</a></li>
|
|
<li><a href="#datetime-pickers" id="markdown-toc-datetime-pickers">Date/Time Pickers</a></li>
|
|
<li><a href="#range-sliders" id="markdown-toc-range-sliders">Range Sliders</a></li>
|
|
<li><a href="#file-upload-with-dropzone" id="markdown-toc-file-upload-with-dropzone">File Upload with Dropzone</a></li>
|
|
<li><a href="#rich-text-editor" id="markdown-toc-rich-text-editor">Rich Text Editor</a></li>
|
|
</ol>
|
|
</li>
|
|
<li><a href="#form-validation" id="markdown-toc-form-validation">Form Validation</a> <ol>
|
|
<li><a href="#bootstrap-validation" id="markdown-toc-bootstrap-validation">Bootstrap Validation</a></li>
|
|
<li><a href="#parsleyjs-validation" id="markdown-toc-parsleyjs-validation">Parsley.js Validation</a></li>
|
|
</ol>
|
|
</li>
|
|
</ol>
|
|
</li>
|
|
<li><a href="#table-components" id="markdown-toc-table-components">Table Components</a> <ol>
|
|
<li><a href="#basic-tables" id="markdown-toc-basic-tables">Basic Tables</a> <ol>
|
|
<li><a href="#responsive-table" id="markdown-toc-responsive-table">Responsive Table</a></li>
|
|
</ol>
|
|
</li>
|
|
<li><a href="#datatables-integration" id="markdown-toc-datatables-integration">DataTables Integration</a> <ol>
|
|
<li><a href="#basic-datatable" id="markdown-toc-basic-datatable">Basic DataTable</a></li>
|
|
<li><a href="#advanced-datatable-features" id="markdown-toc-advanced-datatable-features">Advanced DataTable Features</a></li>
|
|
</ol>
|
|
</li>
|
|
</ol>
|
|
</li>
|
|
<li><a href="#ui-elements" id="markdown-toc-ui-elements">UI Elements</a> <ol>
|
|
<li><a href="#navigation-components" id="markdown-toc-navigation-components">Navigation Components</a> <ol>
|
|
<li><a href="#sidebar-navigation" id="markdown-toc-sidebar-navigation">Sidebar Navigation</a></li>
|
|
<li><a href="#breadcrumbs" id="markdown-toc-breadcrumbs">Breadcrumbs</a></li>
|
|
</ol>
|
|
</li>
|
|
<li><a href="#modal-components" id="markdown-toc-modal-components">Modal Components</a> <ol>
|
|
<li><a href="#basic-modal" id="markdown-toc-basic-modal">Basic Modal</a></li>
|
|
<li><a href="#large-modal-with-form" id="markdown-toc-large-modal-with-form">Large Modal with Form</a></li>
|
|
</ol>
|
|
</li>
|
|
<li><a href="#alert-components" id="markdown-toc-alert-components">Alert Components</a> <ol>
|
|
<li><a href="#bootstrap-alerts" id="markdown-toc-bootstrap-alerts">Bootstrap Alerts</a></li>
|
|
<li><a href="#pnotify-notifications" id="markdown-toc-pnotify-notifications">PNotify Notifications</a></li>
|
|
</ol>
|
|
</li>
|
|
<li><a href="#progress-components" id="markdown-toc-progress-components">Progress Components</a> <ol>
|
|
<li><a href="#progress-bars" id="markdown-toc-progress-bars">Progress Bars</a></li>
|
|
<li><a href="#animated-progress-with-javascript" id="markdown-toc-animated-progress-with-javascript">Animated Progress with JavaScript</a></li>
|
|
</ol>
|
|
</li>
|
|
</ol>
|
|
</li>
|
|
<li><a href="#map-components" id="markdown-toc-map-components">Map Components</a> <ol>
|
|
<li><a href="#jvectormap-integration" id="markdown-toc-jvectormap-integration">jVectorMap Integration</a> <ol>
|
|
<li><a href="#world-map" id="markdown-toc-world-map">World Map</a></li>
|
|
<li><a href="#regional-map" id="markdown-toc-regional-map">Regional Map</a></li>
|
|
</ol>
|
|
</li>
|
|
</ol>
|
|
</li>
|
|
<li><a href="#calendar-components" id="markdown-toc-calendar-components">Calendar Components</a> <ol>
|
|
<li><a href="#fullcalendar-integration" id="markdown-toc-fullcalendar-integration">FullCalendar Integration</a></li>
|
|
</ol>
|
|
</li>
|
|
<li><a href="#media-components" id="markdown-toc-media-components">Media Components</a> <ol>
|
|
<li><a href="#image-gallery" id="markdown-toc-image-gallery">Image Gallery</a></li>
|
|
</ol>
|
|
</li>
|
|
<li><a href="#next-steps" id="markdown-toc-next-steps">Next Steps</a></li>
|
|
</ol><hr />
|
|
<h2 id="dashboard-components">
|
|
|
|
|
|
<a href="#dashboard-components" class="anchor-heading" aria-labelledby="dashboard-components"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Dashboard Components
|
|
|
|
|
|
</h2>
|
|
|
|
<h3 id="dashboard-layouts">
|
|
|
|
|
|
<a href="#dashboard-layouts" class="anchor-heading" aria-labelledby="dashboard-layouts"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Dashboard Layouts
|
|
|
|
|
|
</h3>
|
|
|
|
|
|
<p>Gentelella includes three pre-designed dashboard layouts:</p>
|
|
<h4 id="main-dashboard-indexhtml">
|
|
|
|
|
|
<a href="#main-dashboard-indexhtml" class="anchor-heading" aria-labelledby="main-dashboard-indexhtml"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Main Dashboard (<code class="language-plaintext highlighter-rouge">index.html</code>)
|
|
|
|
|
|
</h4>
|
|
|
|
<ul>
|
|
<li><strong>Revenue widgets</strong> with animated counters</li>
|
|
<li><strong>Real-time charts</strong> showing trends and analytics</li>
|
|
<li><strong>Activity timeline</strong> with user interactions</li>
|
|
<li><strong>Quick stats</strong> cards with icons</li>
|
|
<li><strong>To-do lists</strong> with progress tracking</li>
|
|
</ul>
|
|
|
|
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Revenue Widget Example --></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-3 col-sm-6"</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"x_panel tile fixed_height_320"</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"x_title"</span><span class="nt">></span>
|
|
<span class="nt"><h2></span>Total Revenue<span class="nt"></h2></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"x_content"</span><span class="nt">></span>
|
|
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"chart"</span> <span class="na">data-percent=</span><span class="s">"73"</span><span class="nt">></span>
|
|
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"percent"</span><span class="nt">></span>73<span class="nt"></span></span>
|
|
<span class="nt"></span></span>
|
|
<span class="nt"><h3></span>$52,147<span class="nt"></h3></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"sidebar-widget"</span><span class="nt">></span>
|
|
<span class="nt"><h4></span>Revenue breakdown<span class="nt"></h4></span>
|
|
<span class="nt"><canvas</span> <span class="na">id=</span><span class="s">"revenue-chart"</span><span class="nt">></canvas></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span>
|
|
</code></pre></div></div>
|
|
<h4 id="dashboard-2-index2html">
|
|
|
|
|
|
<a href="#dashboard-2-index2html" class="anchor-heading" aria-labelledby="dashboard-2-index2html"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Dashboard 2 (<code class="language-plaintext highlighter-rouge">index2.html</code>)
|
|
|
|
|
|
</h4>
|
|
|
|
<ul>
|
|
<li><strong>Full-width charts</strong> for detailed analytics</li>
|
|
<li><strong>Map integration</strong> with geographical data</li>
|
|
<li><strong>Compact widgets</strong> for KPIs</li>
|
|
<li><strong>News feed</strong> with updates</li>
|
|
</ul>
|
|
<h4 id="dashboard-3-index3html">
|
|
|
|
|
|
<a href="#dashboard-3-index3html" class="anchor-heading" aria-labelledby="dashboard-3-index3html"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Dashboard 3 (<code class="language-plaintext highlighter-rouge">index3.html</code>)
|
|
|
|
|
|
</h4>
|
|
|
|
<ul>
|
|
<li><strong>Calendar integration</strong> with events</li>
|
|
<li><strong>Weather widget</strong> with forecasts</li>
|
|
<li><strong>Social media stats</strong> counters</li>
|
|
<li><strong>Project timeline</strong> view</li>
|
|
</ul>
|
|
<h3 id="widget-cards">
|
|
|
|
|
|
<a href="#widget-cards" class="anchor-heading" aria-labelledby="widget-cards"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Widget Cards
|
|
|
|
|
|
</h3>
|
|
|
|
<h4 id="tile-widgets">
|
|
|
|
|
|
<a href="#tile-widgets" class="anchor-heading" aria-labelledby="tile-widgets"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Tile Widgets
|
|
|
|
|
|
</h4>
|
|
|
|
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><div</span> <span class="na">class=</span><span class="s">"tile_count"</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-2 col-sm-4 tile_stats_count"</span><span class="nt">></span>
|
|
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"count_top"</span><span class="nt">><i</span> <span class="na">class=</span><span class="s">"fa fa-user"</span><span class="nt">></i></span> Total Users<span class="nt"></span></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"count"</span><span class="nt">></span>2500<span class="nt"></div></span>
|
|
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"count_bottom"</span><span class="nt">><i</span> <span class="na">class=</span><span class="s">"green"</span><span class="nt">></span>4% <span class="nt"></i></span> From last Week<span class="nt"></span></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span>
|
|
</code></pre></div></div>
|
|
<h4 id="info-box-widgets">
|
|
|
|
|
|
<a href="#info-box-widgets" class="anchor-heading" aria-labelledby="info-box-widgets"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Info Box Widgets
|
|
|
|
|
|
</h4>
|
|
|
|
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-4 col-sm-4"</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"x_panel tile fixed_height_320 overflow_hidden"</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"x_title"</span><span class="nt">></span>
|
|
<span class="nt"><h2></span>Network Activities<span class="nt"></h2></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"x_content"</span><span class="nt">></span>
|
|
<span class="nt"><table</span> <span class="na">class=</span><span class="s">"countries_list"</span><span class="nt">></span>
|
|
<span class="nt"><tbody></span>
|
|
<span class="nt"><tr></span>
|
|
<span class="nt"><td></span>United States<span class="nt"></td></span>
|
|
<span class="nt"><td</span> <span class="na">class=</span><span class="s">"fs-15 fw-700 text-right"</span><span class="nt">></span>2,371<span class="nt"></td></span>
|
|
<span class="nt"></tr></span>
|
|
<span class="nt"></tbody></span>
|
|
<span class="nt"></table></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span>
|
|
</code></pre></div></div><hr />
|
|
<h2 id="chart-components">
|
|
|
|
|
|
<a href="#chart-components" class="anchor-heading" aria-labelledby="chart-components"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Chart Components
|
|
|
|
|
|
</h2>
|
|
|
|
<h3 id="chartjs-integration">
|
|
|
|
|
|
<a href="#chartjs-integration" class="anchor-heading" aria-labelledby="chartjs-integration"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Chart.js Integration
|
|
|
|
|
|
</h3>
|
|
|
|
<h4 id="line-charts">
|
|
|
|
|
|
<a href="#line-charts" class="anchor-heading" aria-labelledby="line-charts"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Line Charts
|
|
|
|
|
|
</h4>
|
|
|
|
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// Initialize line chart</span>
|
|
<span class="k">import</span> <span class="nx">Chart</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">chart.js/auto</span><span class="dl">'</span><span class="p">;</span>
|
|
|
|
<span class="kd">const</span> <span class="nx">ctx</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">lineChart</span><span class="dl">'</span><span class="p">).</span><span class="nx">getContext</span><span class="p">(</span><span class="dl">'</span><span class="s1">2d</span><span class="dl">'</span><span class="p">);</span>
|
|
<span class="kd">const</span> <span class="nx">lineChart</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Chart</span><span class="p">(</span><span class="nx">ctx</span><span class="p">,</span> <span class="p">{</span>
|
|
<span class="na">type</span><span class="p">:</span> <span class="dl">'</span><span class="s1">line</span><span class="dl">'</span><span class="p">,</span>
|
|
<span class="na">data</span><span class="p">:</span> <span class="p">{</span>
|
|
<span class="na">labels</span><span class="p">:</span> <span class="p">[</span><span class="dl">'</span><span class="s1">January</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">February</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">March</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">April</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">May</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">June</span><span class="dl">'</span><span class="p">],</span>
|
|
<span class="na">datasets</span><span class="p">:</span> <span class="p">[{</span>
|
|
<span class="na">label</span><span class="p">:</span> <span class="dl">'</span><span class="s1">Sales</span><span class="dl">'</span><span class="p">,</span>
|
|
<span class="na">data</span><span class="p">:</span> <span class="p">[</span><span class="mi">12</span><span class="p">,</span> <span class="mi">19</span><span class="p">,</span> <span class="mi">3</span><span class="p">,</span> <span class="mi">5</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">],</span>
|
|
<span class="na">borderColor</span><span class="p">:</span> <span class="dl">'</span><span class="s1">#73879C</span><span class="dl">'</span><span class="p">,</span>
|
|
<span class="na">backgroundColor</span><span class="p">:</span> <span class="dl">'</span><span class="s1">rgba(115, 135, 156, 0.1)</span><span class="dl">'</span><span class="p">,</span>
|
|
<span class="na">tension</span><span class="p">:</span> <span class="mf">0.4</span>
|
|
<span class="p">}]</span>
|
|
<span class="p">},</span>
|
|
<span class="na">options</span><span class="p">:</span> <span class="p">{</span>
|
|
<span class="na">responsive</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
|
|
<span class="na">plugins</span><span class="p">:</span> <span class="p">{</span>
|
|
<span class="na">legend</span><span class="p">:</span> <span class="p">{</span>
|
|
<span class="na">position</span><span class="p">:</span> <span class="dl">'</span><span class="s1">bottom</span><span class="dl">'</span>
|
|
<span class="p">}</span>
|
|
<span class="p">}</span>
|
|
<span class="p">}</span>
|
|
<span class="p">});</span>
|
|
</code></pre></div></div>
|
|
<h4 id="bar-charts">
|
|
|
|
|
|
<a href="#bar-charts" class="anchor-heading" aria-labelledby="bar-charts"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Bar Charts
|
|
|
|
|
|
</h4>
|
|
|
|
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><div</span> <span class="na">class=</span><span class="s">"x_panel"</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"x_title"</span><span class="nt">></span>
|
|
<span class="nt"><h2></span>Monthly Sales<span class="nt"></h2></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"x_content"</span><span class="nt">></span>
|
|
<span class="nt"><canvas</span> <span class="na">id=</span><span class="s">"barChart"</span> <span class="na">width=</span><span class="s">"400"</span> <span class="na">height=</span><span class="s">"200"</span><span class="nt">></canvas></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span>
|
|
</code></pre></div></div>
|
|
<h4 id="pie-charts">
|
|
|
|
|
|
<a href="#pie-charts" class="anchor-heading" aria-labelledby="pie-charts"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Pie Charts
|
|
|
|
|
|
</h4>
|
|
|
|
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">const</span> <span class="nx">pieChart</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Chart</span><span class="p">(</span><span class="nx">ctx</span><span class="p">,</span> <span class="p">{</span>
|
|
<span class="na">type</span><span class="p">:</span> <span class="dl">'</span><span class="s1">pie</span><span class="dl">'</span><span class="p">,</span>
|
|
<span class="na">data</span><span class="p">:</span> <span class="p">{</span>
|
|
<span class="na">labels</span><span class="p">:</span> <span class="p">[</span><span class="dl">'</span><span class="s1">Desktop</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">Mobile</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">Tablet</span><span class="dl">'</span><span class="p">],</span>
|
|
<span class="na">datasets</span><span class="p">:</span> <span class="p">[{</span>
|
|
<span class="na">data</span><span class="p">:</span> <span class="p">[</span><span class="mi">300</span><span class="p">,</span> <span class="mi">50</span><span class="p">,</span> <span class="mi">100</span><span class="p">],</span>
|
|
<span class="na">backgroundColor</span><span class="p">:</span> <span class="p">[</span><span class="dl">'</span><span class="s1">#73879C</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">#26B99A</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">#3498DB</span><span class="dl">'</span><span class="p">]</span>
|
|
<span class="p">}]</span>
|
|
<span class="p">}</span>
|
|
<span class="p">});</span>
|
|
</code></pre></div></div>
|
|
<h3 id="morrisjs-charts">
|
|
|
|
|
|
<a href="#morrisjs-charts" class="anchor-heading" aria-labelledby="morrisjs-charts"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Morris.js Charts
|
|
|
|
|
|
</h3>
|
|
|
|
<h4 id="line-charts-1">
|
|
|
|
|
|
<a href="#line-charts-1" class="anchor-heading" aria-labelledby="line-charts-1"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Line Charts
|
|
|
|
|
|
</h4>
|
|
|
|
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nx">Morris</span><span class="p">.</span><span class="nx">Line</span><span class="p">({</span>
|
|
<span class="na">element</span><span class="p">:</span> <span class="dl">'</span><span class="s1">line-chart</span><span class="dl">'</span><span class="p">,</span>
|
|
<span class="na">data</span><span class="p">:</span> <span class="p">[</span>
|
|
<span class="p">{</span> <span class="na">y</span><span class="p">:</span> <span class="dl">'</span><span class="s1">2023-01</span><span class="dl">'</span><span class="p">,</span> <span class="na">a</span><span class="p">:</span> <span class="mi">100</span><span class="p">,</span> <span class="na">b</span><span class="p">:</span> <span class="mi">90</span> <span class="p">},</span>
|
|
<span class="p">{</span> <span class="na">y</span><span class="p">:</span> <span class="dl">'</span><span class="s1">2023-02</span><span class="dl">'</span><span class="p">,</span> <span class="na">a</span><span class="p">:</span> <span class="mi">75</span><span class="p">,</span> <span class="na">b</span><span class="p">:</span> <span class="mi">65</span> <span class="p">},</span>
|
|
<span class="p">{</span> <span class="na">y</span><span class="p">:</span> <span class="dl">'</span><span class="s1">2023-03</span><span class="dl">'</span><span class="p">,</span> <span class="na">a</span><span class="p">:</span> <span class="mi">50</span><span class="p">,</span> <span class="na">b</span><span class="p">:</span> <span class="mi">40</span> <span class="p">}</span>
|
|
<span class="p">],</span>
|
|
<span class="na">xkey</span><span class="p">:</span> <span class="dl">'</span><span class="s1">y</span><span class="dl">'</span><span class="p">,</span>
|
|
<span class="na">ykeys</span><span class="p">:</span> <span class="p">[</span><span class="dl">'</span><span class="s1">a</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">b</span><span class="dl">'</span><span class="p">],</span>
|
|
<span class="na">labels</span><span class="p">:</span> <span class="p">[</span><span class="dl">'</span><span class="s1">Series A</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">Series B</span><span class="dl">'</span><span class="p">]</span>
|
|
<span class="p">});</span>
|
|
</code></pre></div></div>
|
|
<h4 id="area-charts">
|
|
|
|
|
|
<a href="#area-charts" class="anchor-heading" aria-labelledby="area-charts"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Area Charts
|
|
|
|
|
|
</h4>
|
|
|
|
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nx">Morris</span><span class="p">.</span><span class="nx">Area</span><span class="p">({</span>
|
|
<span class="na">element</span><span class="p">:</span> <span class="dl">'</span><span class="s1">area-chart</span><span class="dl">'</span><span class="p">,</span>
|
|
<span class="na">data</span><span class="p">:</span> <span class="p">[</span>
|
|
<span class="p">{</span> <span class="na">period</span><span class="p">:</span> <span class="dl">'</span><span class="s1">2023-01</span><span class="dl">'</span><span class="p">,</span> <span class="na">sales</span><span class="p">:</span> <span class="mi">2666</span><span class="p">,</span> <span class="na">downloads</span><span class="p">:</span> <span class="mi">2647</span> <span class="p">},</span>
|
|
<span class="p">{</span> <span class="na">period</span><span class="p">:</span> <span class="dl">'</span><span class="s1">2023-02</span><span class="dl">'</span><span class="p">,</span> <span class="na">sales</span><span class="p">:</span> <span class="mi">2778</span><span class="p">,</span> <span class="na">downloads</span><span class="p">:</span> <span class="mi">2294</span> <span class="p">}</span>
|
|
<span class="p">],</span>
|
|
<span class="na">xkey</span><span class="p">:</span> <span class="dl">'</span><span class="s1">period</span><span class="dl">'</span><span class="p">,</span>
|
|
<span class="na">ykeys</span><span class="p">:</span> <span class="p">[</span><span class="dl">'</span><span class="s1">sales</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">downloads</span><span class="dl">'</span><span class="p">],</span>
|
|
<span class="na">labels</span><span class="p">:</span> <span class="p">[</span><span class="dl">'</span><span class="s1">Sales</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">Downloads</span><span class="dl">'</span><span class="p">]</span>
|
|
<span class="p">});</span>
|
|
</code></pre></div></div>
|
|
<h3 id="sparkline-charts">
|
|
|
|
|
|
<a href="#sparkline-charts" class="anchor-heading" aria-labelledby="sparkline-charts"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Sparkline Charts
|
|
|
|
|
|
</h3>
|
|
|
|
|
|
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">.sparkline</span><span class="dl">'</span><span class="p">).</span><span class="nx">sparkline</span><span class="p">([</span><span class="mi">5</span><span class="p">,</span><span class="mi">6</span><span class="p">,</span><span class="mi">7</span><span class="p">,</span><span class="mi">2</span><span class="p">,</span><span class="mi">0</span><span class="p">,</span><span class="o">-</span><span class="mi">4</span><span class="p">,</span><span class="o">-</span><span class="mi">2</span><span class="p">,</span><span class="mi">4</span><span class="p">],</span> <span class="p">{</span>
|
|
<span class="na">type</span><span class="p">:</span> <span class="dl">'</span><span class="s1">line</span><span class="dl">'</span><span class="p">,</span>
|
|
<span class="na">width</span><span class="p">:</span> <span class="dl">'</span><span class="s1">100%</span><span class="dl">'</span><span class="p">,</span>
|
|
<span class="na">height</span><span class="p">:</span> <span class="dl">'</span><span class="s1">30</span><span class="dl">'</span><span class="p">,</span>
|
|
<span class="na">lineColor</span><span class="p">:</span> <span class="dl">'</span><span class="s1">#26B99A</span><span class="dl">'</span><span class="p">,</span>
|
|
<span class="na">fillColor</span><span class="p">:</span> <span class="dl">'</span><span class="s1">rgba(38, 185, 154, 0.3)</span><span class="dl">'</span>
|
|
<span class="p">});</span>
|
|
</code></pre></div></div>
|
|
<h3 id="gauge-charts">
|
|
|
|
|
|
<a href="#gauge-charts" class="anchor-heading" aria-labelledby="gauge-charts"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Gauge Charts
|
|
|
|
|
|
</h3>
|
|
|
|
|
|
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">import</span> <span class="nx">Gauge</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">gauge.js</span><span class="dl">'</span><span class="p">;</span>
|
|
|
|
<span class="kd">const</span> <span class="nx">gauge</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Gauge</span><span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">gauge</span><span class="dl">'</span><span class="p">)).</span><span class="nx">setOptions</span><span class="p">({</span>
|
|
<span class="na">angle</span><span class="p">:</span> <span class="mf">0.15</span><span class="p">,</span>
|
|
<span class="na">lineWidth</span><span class="p">:</span> <span class="mf">0.2</span><span class="p">,</span>
|
|
<span class="na">radiusScale</span><span class="p">:</span> <span class="mi">1</span><span class="p">,</span>
|
|
<span class="na">pointer</span><span class="p">:</span> <span class="p">{</span>
|
|
<span class="na">length</span><span class="p">:</span> <span class="mf">0.6</span><span class="p">,</span>
|
|
<span class="na">strokeWidth</span><span class="p">:</span> <span class="mf">0.035</span><span class="p">,</span>
|
|
<span class="na">color</span><span class="p">:</span> <span class="dl">'</span><span class="s1">#000000</span><span class="dl">'</span>
|
|
<span class="p">},</span>
|
|
<span class="na">limitMax</span><span class="p">:</span> <span class="kc">false</span><span class="p">,</span>
|
|
<span class="na">limitMin</span><span class="p">:</span> <span class="kc">false</span><span class="p">,</span>
|
|
<span class="na">colorStart</span><span class="p">:</span> <span class="dl">'</span><span class="s1">#6FADCF</span><span class="dl">'</span><span class="p">,</span>
|
|
<span class="na">colorStop</span><span class="p">:</span> <span class="dl">'</span><span class="s1">#8FC0DA</span><span class="dl">'</span><span class="p">,</span>
|
|
<span class="na">strokeColor</span><span class="p">:</span> <span class="dl">'</span><span class="s1">#E0E0E0</span><span class="dl">'</span><span class="p">,</span>
|
|
<span class="na">generateGradient</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
|
|
<span class="na">highDpiSupport</span><span class="p">:</span> <span class="kc">true</span>
|
|
<span class="p">});</span>
|
|
|
|
<span class="nx">gauge</span><span class="p">.</span><span class="nx">maxValue</span> <span class="o">=</span> <span class="mi">100</span><span class="p">;</span>
|
|
<span class="nx">gauge</span><span class="p">.</span><span class="nx">setMinValue</span><span class="p">(</span><span class="mi">0</span><span class="p">);</span>
|
|
<span class="nx">gauge</span><span class="p">.</span><span class="nx">animationSpeed</span> <span class="o">=</span> <span class="mi">32</span><span class="p">;</span>
|
|
<span class="nx">gauge</span><span class="p">.</span><span class="kd">set</span><span class="p">(</span><span class="mi">67</span><span class="p">);</span>
|
|
</code></pre></div></div><hr />
|
|
<h2 id="form-components">
|
|
|
|
|
|
<a href="#form-components" class="anchor-heading" aria-labelledby="form-components"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Form Components
|
|
|
|
|
|
</h2>
|
|
|
|
<h3 id="basic-form-elements">
|
|
|
|
|
|
<a href="#basic-form-elements" class="anchor-heading" aria-labelledby="basic-form-elements"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Basic Form Elements
|
|
|
|
|
|
</h3>
|
|
|
|
<h4 id="input-fields">
|
|
|
|
|
|
<a href="#input-fields" class="anchor-heading" aria-labelledby="input-fields"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Input Fields
|
|
|
|
|
|
</h4>
|
|
|
|
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group row"</span><span class="nt">></span>
|
|
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"col-form-label col-md-3 col-sm-3"</span><span class="nt">></span>Email<span class="nt"></label></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-6 col-sm-6"</span><span class="nt">></span>
|
|
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"email"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">placeholder=</span><span class="s">"Enter email"</span><span class="nt">></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span>
|
|
</code></pre></div></div>
|
|
<h4 id="select-dropdowns">
|
|
|
|
|
|
<a href="#select-dropdowns" class="anchor-heading" aria-labelledby="select-dropdowns"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Select Dropdowns
|
|
|
|
|
|
</h4>
|
|
|
|
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group row"</span><span class="nt">></span>
|
|
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"col-form-label col-md-3 col-sm-3"</span><span class="nt">></span>Country<span class="nt"></label></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-6 col-sm-6"</span><span class="nt">></span>
|
|
<span class="nt"><select</span> <span class="na">class=</span><span class="s">"form-control"</span><span class="nt">></span>
|
|
<span class="nt"><option></span>Choose option<span class="nt"></option></span>
|
|
<span class="nt"><option></span>United States<span class="nt"></option></span>
|
|
<span class="nt"><option></span>United Kingdom<span class="nt"></option></span>
|
|
<span class="nt"></select></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span>
|
|
</code></pre></div></div>
|
|
<h3 id="advanced-form-components">
|
|
|
|
|
|
<a href="#advanced-form-components" class="anchor-heading" aria-labelledby="advanced-form-components"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Advanced Form Components
|
|
|
|
|
|
</h3>
|
|
|
|
<h4 id="select2-enhanced-dropdowns">
|
|
|
|
|
|
<a href="#select2-enhanced-dropdowns" class="anchor-heading" aria-labelledby="select2-enhanced-dropdowns"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Select2 Enhanced Dropdowns
|
|
|
|
|
|
</h4>
|
|
|
|
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><select</span> <span class="na">class=</span><span class="s">"form-control select2"</span> <span class="na">multiple=</span><span class="s">"multiple"</span><span class="nt">></span>
|
|
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"AK"</span><span class="nt">></span>Alaska<span class="nt"></option></span>
|
|
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"HI"</span><span class="nt">></span>Hawaii<span class="nt"></option></span>
|
|
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"CA"</span><span class="nt">></span>California<span class="nt"></option></span>
|
|
<span class="nt"></select></span>
|
|
</code></pre></div></div>
|
|
|
|
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// Initialize Select2</span>
|
|
<span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">.select2</span><span class="dl">'</span><span class="p">).</span><span class="nx">select2</span><span class="p">({</span>
|
|
<span class="na">theme</span><span class="p">:</span> <span class="dl">'</span><span class="s1">bootstrap-5</span><span class="dl">'</span><span class="p">,</span>
|
|
<span class="na">width</span><span class="p">:</span> <span class="dl">'</span><span class="s1">100%</span><span class="dl">'</span><span class="p">,</span>
|
|
<span class="na">placeholder</span><span class="p">:</span> <span class="dl">'</span><span class="s1">Select options...</span><span class="dl">'</span>
|
|
<span class="p">});</span>
|
|
</code></pre></div></div>
|
|
<h4 id="datetime-pickers">
|
|
|
|
|
|
<a href="#datetime-pickers" class="anchor-heading" aria-labelledby="datetime-pickers"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Date/Time Pickers
|
|
|
|
|
|
</h4>
|
|
|
|
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">></span>
|
|
<span class="nt"><label></span>Date Range:<span class="nt"></label></span>
|
|
<span class="nt"><div></span>
|
|
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"reservation"</span>
|
|
<span class="na">placeholder=</span><span class="s">"Select date range"</span><span class="nt">></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span>
|
|
</code></pre></div></div>
|
|
|
|
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">import</span> <span class="p">{</span> <span class="nx">DateTime</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">tempus-dominus</span><span class="dl">'</span><span class="p">;</span>
|
|
|
|
<span class="k">new</span> <span class="nx">DateTime</span><span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">reservation</span><span class="dl">'</span><span class="p">),</span> <span class="p">{</span>
|
|
<span class="na">display</span><span class="p">:</span> <span class="p">{</span>
|
|
<span class="na">components</span><span class="p">:</span> <span class="p">{</span>
|
|
<span class="na">calendar</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
|
|
<span class="na">date</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
|
|
<span class="na">month</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
|
|
<span class="na">year</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
|
|
<span class="na">decades</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
|
|
<span class="na">clock</span><span class="p">:</span> <span class="kc">false</span>
|
|
<span class="p">}</span>
|
|
<span class="p">}</span>
|
|
<span class="p">});</span>
|
|
</code></pre></div></div>
|
|
<h4 id="range-sliders">
|
|
|
|
|
|
<a href="#range-sliders" class="anchor-heading" aria-labelledby="range-sliders"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Range Sliders
|
|
|
|
|
|
</h4>
|
|
|
|
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">></span>
|
|
<span class="nt"><label></span>Price Range:<span class="nt"></label></span>
|
|
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">id=</span><span class="s">"range-slider"</span> <span class="na">value=</span><span class="s">""</span> <span class="na">name=</span><span class="s">"range"</span><span class="nt">></span>
|
|
<span class="nt"></div></span>
|
|
</code></pre></div></div>
|
|
|
|
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nx">$</span><span class="p">(</span><span class="dl">"</span><span class="s2">#range-slider</span><span class="dl">"</span><span class="p">).</span><span class="nx">ionRangeSlider</span><span class="p">({</span>
|
|
<span class="na">type</span><span class="p">:</span> <span class="dl">"</span><span class="s2">double</span><span class="dl">"</span><span class="p">,</span>
|
|
<span class="na">min</span><span class="p">:</span> <span class="mi">0</span><span class="p">,</span>
|
|
<span class="na">max</span><span class="p">:</span> <span class="mi">1000</span><span class="p">,</span>
|
|
<span class="na">from</span><span class="p">:</span> <span class="mi">200</span><span class="p">,</span>
|
|
<span class="na">to</span><span class="p">:</span> <span class="mi">500</span><span class="p">,</span>
|
|
<span class="na">prefix</span><span class="p">:</span> <span class="dl">"</span><span class="s2">$</span><span class="dl">"</span>
|
|
<span class="p">});</span>
|
|
</code></pre></div></div>
|
|
<h4 id="file-upload-with-dropzone">
|
|
|
|
|
|
<a href="#file-upload-with-dropzone" class="anchor-heading" aria-labelledby="file-upload-with-dropzone"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> File Upload with Dropzone
|
|
|
|
|
|
</h4>
|
|
|
|
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><div</span> <span class="na">class=</span><span class="s">"dropzone"</span> <span class="na">id=</span><span class="s">"file-dropzone"</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"dz-message"</span><span class="nt">></span>
|
|
<span class="nt"><h3></span>Drop files here or click to upload<span class="nt"></h3></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span>
|
|
</code></pre></div></div>
|
|
|
|
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">import</span> <span class="nx">Dropzone</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">dropzone</span><span class="dl">'</span><span class="p">;</span>
|
|
|
|
<span class="k">new</span> <span class="nx">Dropzone</span><span class="p">(</span><span class="dl">"</span><span class="s2">#file-dropzone</span><span class="dl">"</span><span class="p">,</span> <span class="p">{</span>
|
|
<span class="na">url</span><span class="p">:</span> <span class="dl">"</span><span class="s2">/upload</span><span class="dl">"</span><span class="p">,</span>
|
|
<span class="na">maxFilesize</span><span class="p">:</span> <span class="mi">10</span><span class="p">,</span>
|
|
<span class="na">acceptedFiles</span><span class="p">:</span> <span class="dl">"</span><span class="s2">.jpeg,.jpg,.png,.gif</span><span class="dl">"</span>
|
|
<span class="p">});</span>
|
|
</code></pre></div></div>
|
|
<h4 id="rich-text-editor">
|
|
|
|
|
|
<a href="#rich-text-editor" class="anchor-heading" aria-labelledby="rich-text-editor"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Rich Text Editor
|
|
|
|
|
|
</h4>
|
|
|
|
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">></span>
|
|
<span class="nt"><label></span>Content:<span class="nt"></label></span>
|
|
<span class="nt"><div</span> <span class="na">id=</span><span class="s">"editor"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">style=</span><span class="s">"height: 300px;"</span><span class="nt">></span>
|
|
<span class="nt"><p></span>Initial content...<span class="nt"></p></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span>
|
|
</code></pre></div></div>
|
|
<h3 id="form-validation">
|
|
|
|
|
|
<a href="#form-validation" class="anchor-heading" aria-labelledby="form-validation"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Form Validation
|
|
|
|
|
|
</h3>
|
|
|
|
<h4 id="bootstrap-validation">
|
|
|
|
|
|
<a href="#bootstrap-validation" class="anchor-heading" aria-labelledby="bootstrap-validation"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Bootstrap Validation
|
|
|
|
|
|
</h4>
|
|
|
|
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><form</span> <span class="na">class=</span><span class="s">"needs-validation"</span> <span class="na">novalidate</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">></span>
|
|
<span class="nt"><label</span> <span class="na">for=</span><span class="s">"validationCustom01"</span><span class="nt">></span>First name<span class="nt"></label></span>
|
|
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"validationCustom01"</span>
|
|
<span class="na">placeholder=</span><span class="s">"First name"</span> <span class="na">required</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"invalid-feedback"</span><span class="nt">></span>
|
|
Please provide a valid first name.
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">type=</span><span class="s">"submit"</span><span class="nt">></span>Submit<span class="nt"></button></span>
|
|
<span class="nt"></form></span>
|
|
</code></pre></div></div>
|
|
<h4 id="parsleyjs-validation">
|
|
|
|
|
|
<a href="#parsleyjs-validation" class="anchor-heading" aria-labelledby="parsleyjs-validation"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Parsley.js Validation
|
|
|
|
|
|
</h4>
|
|
|
|
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><form</span> <span class="na">data-parsley-validate</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">></span>
|
|
<span class="nt"><label></span>Email *<span class="nt"></label></span>
|
|
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"email"</span> <span class="na">class=</span><span class="s">"form-control"</span>
|
|
<span class="na">data-parsley-type=</span><span class="s">"email"</span> <span class="na">required</span><span class="nt">></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">></span>
|
|
<span class="nt"><label></span>Password *<span class="nt"></label></span>
|
|
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"password"</span> <span class="na">class=</span><span class="s">"form-control"</span>
|
|
<span class="na">data-parsley-minlength=</span><span class="s">"6"</span> <span class="na">required</span><span class="nt">></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></form></span>
|
|
</code></pre></div></div><hr />
|
|
<h2 id="table-components">
|
|
|
|
|
|
<a href="#table-components" class="anchor-heading" aria-labelledby="table-components"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Table Components
|
|
|
|
|
|
</h2>
|
|
|
|
<h3 id="basic-tables">
|
|
|
|
|
|
<a href="#basic-tables" class="anchor-heading" aria-labelledby="basic-tables"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Basic Tables
|
|
|
|
|
|
</h3>
|
|
|
|
<h4 id="responsive-table">
|
|
|
|
|
|
<a href="#responsive-table" class="anchor-heading" aria-labelledby="responsive-table"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Responsive Table
|
|
|
|
|
|
</h4>
|
|
|
|
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><div</span> <span class="na">class=</span><span class="s">"table-responsive"</span><span class="nt">></span>
|
|
<span class="nt"><table</span> <span class="na">class=</span><span class="s">"table table-striped table-bordered"</span><span class="nt">></span>
|
|
<span class="nt"><thead></span>
|
|
<span class="nt"><tr></span>
|
|
<span class="nt"><th></span>Name<span class="nt"></th></span>
|
|
<span class="nt"><th></span>Position<span class="nt"></th></span>
|
|
<span class="nt"><th></span>Office<span class="nt"></th></span>
|
|
<span class="nt"><th></span>Salary<span class="nt"></th></span>
|
|
<span class="nt"></tr></span>
|
|
<span class="nt"></thead></span>
|
|
<span class="nt"><tbody></span>
|
|
<span class="nt"><tr></span>
|
|
<span class="nt"><td></span>Tiger Nixon<span class="nt"></td></span>
|
|
<span class="nt"><td></span>System Architect<span class="nt"></td></span>
|
|
<span class="nt"><td></span>Edinburgh<span class="nt"></td></span>
|
|
<span class="nt"><td></span>$320,800<span class="nt"></td></span>
|
|
<span class="nt"></tr></span>
|
|
<span class="nt"></tbody></span>
|
|
<span class="nt"></table></span>
|
|
<span class="nt"></div></span>
|
|
</code></pre></div></div>
|
|
<h3 id="datatables-integration">
|
|
|
|
|
|
<a href="#datatables-integration" class="anchor-heading" aria-labelledby="datatables-integration"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> DataTables Integration
|
|
|
|
|
|
</h3>
|
|
|
|
<h4 id="basic-datatable">
|
|
|
|
|
|
<a href="#basic-datatable" class="anchor-heading" aria-labelledby="basic-datatable"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Basic DataTable
|
|
|
|
|
|
</h4>
|
|
|
|
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><table</span> <span class="na">id=</span><span class="s">"datatable"</span> <span class="na">class=</span><span class="s">"table table-striped table-bordered"</span>
|
|
<span class="na">style=</span><span class="s">"width:100%"</span><span class="nt">></span>
|
|
<span class="nt"><thead></span>
|
|
<span class="nt"><tr></span>
|
|
<span class="nt"><th></span>Name<span class="nt"></th></span>
|
|
<span class="nt"><th></span>Position<span class="nt"></th></span>
|
|
<span class="nt"><th></span>Office<span class="nt"></th></span>
|
|
<span class="nt"><th></span>Age<span class="nt"></th></span>
|
|
<span class="nt"><th></span>Start date<span class="nt"></th></span>
|
|
<span class="nt"><th></span>Salary<span class="nt"></th></span>
|
|
<span class="nt"></tr></span>
|
|
<span class="nt"></thead></span>
|
|
<span class="nt"></table></span>
|
|
</code></pre></div></div>
|
|
|
|
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">#datatable</span><span class="dl">'</span><span class="p">).</span><span class="nx">DataTable</span><span class="p">({</span>
|
|
<span class="na">ajax</span><span class="p">:</span> <span class="dl">'</span><span class="s1">/api/employees</span><span class="dl">'</span><span class="p">,</span>
|
|
<span class="na">columns</span><span class="p">:</span> <span class="p">[</span>
|
|
<span class="p">{</span> <span class="na">data</span><span class="p">:</span> <span class="dl">'</span><span class="s1">name</span><span class="dl">'</span> <span class="p">},</span>
|
|
<span class="p">{</span> <span class="na">data</span><span class="p">:</span> <span class="dl">'</span><span class="s1">position</span><span class="dl">'</span> <span class="p">},</span>
|
|
<span class="p">{</span> <span class="na">data</span><span class="p">:</span> <span class="dl">'</span><span class="s1">office</span><span class="dl">'</span> <span class="p">},</span>
|
|
<span class="p">{</span> <span class="na">data</span><span class="p">:</span> <span class="dl">'</span><span class="s1">age</span><span class="dl">'</span> <span class="p">},</span>
|
|
<span class="p">{</span> <span class="na">data</span><span class="p">:</span> <span class="dl">'</span><span class="s1">start_date</span><span class="dl">'</span> <span class="p">},</span>
|
|
<span class="p">{</span> <span class="na">data</span><span class="p">:</span> <span class="dl">'</span><span class="s1">salary</span><span class="dl">'</span> <span class="p">}</span>
|
|
<span class="p">],</span>
|
|
<span class="na">responsive</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
|
|
<span class="na">pageLength</span><span class="p">:</span> <span class="mi">25</span><span class="p">,</span>
|
|
<span class="na">dom</span><span class="p">:</span> <span class="dl">'</span><span class="s1">Bfrtip</span><span class="dl">'</span><span class="p">,</span>
|
|
<span class="na">buttons</span><span class="p">:</span> <span class="p">[</span><span class="dl">'</span><span class="s1">copy</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">csv</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">excel</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">pdf</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">print</span><span class="dl">'</span><span class="p">]</span>
|
|
<span class="p">});</span>
|
|
</code></pre></div></div>
|
|
<h4 id="advanced-datatable-features">
|
|
|
|
|
|
<a href="#advanced-datatable-features" class="anchor-heading" aria-labelledby="advanced-datatable-features"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Advanced DataTable Features
|
|
|
|
|
|
</h4>
|
|
|
|
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">#advanced-datatable</span><span class="dl">'</span><span class="p">).</span><span class="nx">DataTable</span><span class="p">({</span>
|
|
<span class="na">processing</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
|
|
<span class="na">serverSide</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
|
|
<span class="na">ajax</span><span class="p">:</span> <span class="p">{</span>
|
|
<span class="na">url</span><span class="p">:</span> <span class="dl">'</span><span class="s1">/api/data</span><span class="dl">'</span><span class="p">,</span>
|
|
<span class="na">type</span><span class="p">:</span> <span class="dl">'</span><span class="s1">POST</span><span class="dl">'</span>
|
|
<span class="p">},</span>
|
|
<span class="na">columns</span><span class="p">:</span> <span class="p">[</span>
|
|
<span class="p">{</span> <span class="na">data</span><span class="p">:</span> <span class="dl">'</span><span class="s1">id</span><span class="dl">'</span><span class="p">,</span> <span class="na">searchable</span><span class="p">:</span> <span class="kc">false</span> <span class="p">},</span>
|
|
<span class="p">{</span> <span class="na">data</span><span class="p">:</span> <span class="dl">'</span><span class="s1">name</span><span class="dl">'</span> <span class="p">},</span>
|
|
<span class="p">{</span> <span class="na">data</span><span class="p">:</span> <span class="dl">'</span><span class="s1">email</span><span class="dl">'</span> <span class="p">},</span>
|
|
<span class="p">{</span>
|
|
<span class="na">data</span><span class="p">:</span> <span class="dl">'</span><span class="s1">actions</span><span class="dl">'</span><span class="p">,</span>
|
|
<span class="na">orderable</span><span class="p">:</span> <span class="kc">false</span><span class="p">,</span>
|
|
<span class="na">searchable</span><span class="p">:</span> <span class="kc">false</span><span class="p">,</span>
|
|
<span class="na">render</span><span class="p">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">data</span><span class="p">,</span> <span class="nx">type</span><span class="p">,</span> <span class="nx">row</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="k">return</span> <span class="s2">`
|
|
<button class="btn btn-sm btn-primary edit-btn" data-id="</span><span class="p">${</span><span class="nx">row</span><span class="p">.</span><span class="nx">id</span><span class="p">}</span><span class="s2">">Edit</button>
|
|
<button class="btn btn-sm btn-danger delete-btn" data-id="</span><span class="p">${</span><span class="nx">row</span><span class="p">.</span><span class="nx">id</span><span class="p">}</span><span class="s2">">Delete</button>
|
|
`</span><span class="p">;</span>
|
|
<span class="p">}</span>
|
|
<span class="p">}</span>
|
|
<span class="p">],</span>
|
|
<span class="na">order</span><span class="p">:</span> <span class="p">[[</span><span class="mi">0</span><span class="p">,</span> <span class="dl">'</span><span class="s1">desc</span><span class="dl">'</span><span class="p">]],</span>
|
|
<span class="na">pageLength</span><span class="p">:</span> <span class="mi">50</span><span class="p">,</span>
|
|
<span class="na">lengthMenu</span><span class="p">:</span> <span class="p">[[</span><span class="mi">10</span><span class="p">,</span> <span class="mi">25</span><span class="p">,</span> <span class="mi">50</span><span class="p">,</span> <span class="mi">100</span><span class="p">,</span> <span class="o">-</span><span class="mi">1</span><span class="p">],</span> <span class="p">[</span><span class="mi">10</span><span class="p">,</span> <span class="mi">25</span><span class="p">,</span> <span class="mi">50</span><span class="p">,</span> <span class="mi">100</span><span class="p">,</span> <span class="dl">"</span><span class="s2">All</span><span class="dl">"</span><span class="p">]]</span>
|
|
<span class="p">});</span>
|
|
</code></pre></div></div><hr />
|
|
<h2 id="ui-elements">
|
|
|
|
|
|
<a href="#ui-elements" class="anchor-heading" aria-labelledby="ui-elements"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> UI Elements
|
|
|
|
|
|
</h2>
|
|
|
|
<h3 id="navigation-components">
|
|
|
|
|
|
<a href="#navigation-components" class="anchor-heading" aria-labelledby="navigation-components"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Navigation Components
|
|
|
|
|
|
</h3>
|
|
|
|
<h4 id="sidebar-navigation">
|
|
|
|
|
|
<a href="#sidebar-navigation" class="anchor-heading" aria-labelledby="sidebar-navigation"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Sidebar Navigation
|
|
|
|
|
|
</h4>
|
|
|
|
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-3 left_col"</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"left_col scroll-view"</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"navbar nav_title"</span> <span class="na">style=</span><span class="s">"border: 0;"</span><span class="nt">></span>
|
|
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"index.html"</span> <span class="na">class=</span><span class="s">"site_title"</span><span class="nt">></span>
|
|
<span class="nt"><i</span> <span class="na">class=</span><span class="s">"fa fa-paw"</span><span class="nt">></i></span> <span class="nt"><span></span>Gentelella!<span class="nt"></span></span>
|
|
<span class="nt"></a></span>
|
|
<span class="nt"></div></span>
|
|
|
|
<span class="nt"><div</span> <span class="na">id=</span><span class="s">"sidebar-menu"</span> <span class="na">class=</span><span class="s">"main_menu_side hidden-print main_menu"</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"menu_section"</span><span class="nt">></span>
|
|
<span class="nt"><h3></span>General<span class="nt"></h3></span>
|
|
<span class="nt"><ul</span> <span class="na">class=</span><span class="s">"nav side-menu"</span><span class="nt">></span>
|
|
<span class="nt"><li><a><i</span> <span class="na">class=</span><span class="s">"fa fa-home"</span><span class="nt">></i></span> Home <span class="nt"><span</span> <span class="na">class=</span><span class="s">"fa fa-chevron-down"</span><span class="nt">></span></a></span>
|
|
<span class="nt"><ul</span> <span class="na">class=</span><span class="s">"nav child_menu"</span><span class="nt">></span>
|
|
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"index.html"</span><span class="nt">></span>Dashboard<span class="nt"></a></li></span>
|
|
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"index2.html"</span><span class="nt">></span>Dashboard2<span class="nt"></a></li></span>
|
|
<span class="nt"></ul></span>
|
|
<span class="nt"></li></span>
|
|
<span class="nt"></ul></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span>
|
|
</code></pre></div></div>
|
|
<h4 id="breadcrumbs">
|
|
|
|
|
|
<a href="#breadcrumbs" class="anchor-heading" aria-labelledby="breadcrumbs"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Breadcrumbs
|
|
|
|
|
|
</h4>
|
|
|
|
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><div</span> <span class="na">class=</span><span class="s">"page-title"</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"title_left"</span><span class="nt">></span>
|
|
<span class="nt"><h3></span>Form Elements<span class="nt"></h3></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"title_right"</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-5 col-sm-5 form-group pull-right top_search"</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group"</span><span class="nt">></span>
|
|
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">placeholder=</span><span class="s">"Search for..."</span><span class="nt">></span>
|
|
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"input-group-btn"</span><span class="nt">></span>
|
|
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"btn btn-default"</span> <span class="na">type=</span><span class="s">"button"</span><span class="nt">></span>Go!<span class="nt"></button></span>
|
|
<span class="nt"></span></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span>
|
|
</code></pre></div></div>
|
|
<h3 id="modal-components">
|
|
|
|
|
|
<a href="#modal-components" class="anchor-heading" aria-labelledby="modal-components"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Modal Components
|
|
|
|
|
|
</h3>
|
|
|
|
<h4 id="basic-modal">
|
|
|
|
|
|
<a href="#basic-modal" class="anchor-heading" aria-labelledby="basic-modal"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Basic Modal
|
|
|
|
|
|
</h4>
|
|
|
|
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal fade"</span> <span class="na">id=</span><span class="s">"exampleModal"</span> <span class="na">tabindex=</span><span class="s">"-1"</span> <span class="na">role=</span><span class="s">"dialog"</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal-dialog"</span> <span class="na">role=</span><span class="s">"document"</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal-content"</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal-header"</span><span class="nt">></span>
|
|
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"close"</span> <span class="na">data-dismiss=</span><span class="s">"modal"</span><span class="nt">></span>
|
|
<span class="nt"><span</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></span><span class="ni">&times;</span><span class="nt"></span></span>
|
|
<span class="nt"></button></span>
|
|
<span class="nt"><h4</span> <span class="na">class=</span><span class="s">"modal-title"</span><span class="nt">></span>Modal title<span class="nt"></h4></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal-body"</span><span class="nt">></span>
|
|
<span class="nt"><p></span>Modal body content...<span class="nt"></p></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal-footer"</span><span class="nt">></span>
|
|
<span class="nt"><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-dismiss=</span><span class="s">"modal"</span><span class="nt">></span>Close<span class="nt"></button></span>
|
|
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">></span>Save changes<span class="nt"></button></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span>
|
|
</code></pre></div></div>
|
|
<h4 id="large-modal-with-form">
|
|
|
|
|
|
<a href="#large-modal-with-form" class="anchor-heading" aria-labelledby="large-modal-with-form"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Large Modal with Form
|
|
|
|
|
|
</h4>
|
|
|
|
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal fade bs-example-modal-lg"</span> <span class="na">tabindex=</span><span class="s">"-1"</span> <span class="na">role=</span><span class="s">"dialog"</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal-dialog modal-lg"</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal-content"</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal-header"</span><span class="nt">></span>
|
|
<span class="nt"><h4</span> <span class="na">class=</span><span class="s">"modal-title"</span><span class="nt">></span>Large Modal<span class="nt"></h4></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal-body"</span><span class="nt">></span>
|
|
<span class="nt"><form></span>
|
|
<span class="c"><!-- Form content --></span>
|
|
<span class="nt"></form></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span>
|
|
</code></pre></div></div>
|
|
<h3 id="alert-components">
|
|
|
|
|
|
<a href="#alert-components" class="anchor-heading" aria-labelledby="alert-components"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Alert Components
|
|
|
|
|
|
</h3>
|
|
|
|
<h4 id="bootstrap-alerts">
|
|
|
|
|
|
<a href="#bootstrap-alerts" class="anchor-heading" aria-labelledby="bootstrap-alerts"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Bootstrap Alerts
|
|
|
|
|
|
</h4>
|
|
|
|
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><div</span> <span class="na">class=</span><span class="s">"alert alert-success alert-dismissible"</span><span class="nt">></span>
|
|
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"close"</span> <span class="na">data-dismiss=</span><span class="s">"alert"</span><span class="nt">></span>
|
|
<span class="nt"><span</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></span><span class="ni">&times;</span><span class="nt"></span></span>
|
|
<span class="nt"></button></span>
|
|
<span class="nt"><strong></span>Success!<span class="nt"></strong></span> This is a success alert.
|
|
<span class="nt"></div></span>
|
|
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"alert alert-danger alert-dismissible"</span><span class="nt">></span>
|
|
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"close"</span> <span class="na">data-dismiss=</span><span class="s">"alert"</span><span class="nt">></span>
|
|
<span class="nt"><span</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></span><span class="ni">&times;</span><span class="nt"></span></span>
|
|
<span class="nt"></button></span>
|
|
<span class="nt"><strong></span>Error!<span class="nt"></strong></span> Something went wrong.
|
|
<span class="nt"></div></span>
|
|
</code></pre></div></div>
|
|
<h4 id="pnotify-notifications">
|
|
|
|
|
|
<a href="#pnotify-notifications" class="anchor-heading" aria-labelledby="pnotify-notifications"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> PNotify Notifications
|
|
|
|
|
|
</h4>
|
|
|
|
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">import</span> <span class="nx">PNotify</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">pnotify</span><span class="dl">'</span><span class="p">;</span>
|
|
|
|
<span class="c1">// Success notification</span>
|
|
<span class="k">new</span> <span class="nx">PNotify</span><span class="p">({</span>
|
|
<span class="na">title</span><span class="p">:</span> <span class="dl">'</span><span class="s1">Success!</span><span class="dl">'</span><span class="p">,</span>
|
|
<span class="na">text</span><span class="p">:</span> <span class="dl">'</span><span class="s1">Your changes have been saved.</span><span class="dl">'</span><span class="p">,</span>
|
|
<span class="na">type</span><span class="p">:</span> <span class="dl">'</span><span class="s1">success</span><span class="dl">'</span><span class="p">,</span>
|
|
<span class="na">styling</span><span class="p">:</span> <span class="dl">'</span><span class="s1">bootstrap4</span><span class="dl">'</span>
|
|
<span class="p">});</span>
|
|
|
|
<span class="c1">// Error notification</span>
|
|
<span class="k">new</span> <span class="nx">PNotify</span><span class="p">({</span>
|
|
<span class="na">title</span><span class="p">:</span> <span class="dl">'</span><span class="s1">Error!</span><span class="dl">'</span><span class="p">,</span>
|
|
<span class="na">text</span><span class="p">:</span> <span class="dl">'</span><span class="s1">An error occurred while processing your request.</span><span class="dl">'</span><span class="p">,</span>
|
|
<span class="na">type</span><span class="p">:</span> <span class="dl">'</span><span class="s1">error</span><span class="dl">'</span><span class="p">,</span>
|
|
<span class="na">styling</span><span class="p">:</span> <span class="dl">'</span><span class="s1">bootstrap4</span><span class="dl">'</span>
|
|
<span class="p">});</span>
|
|
</code></pre></div></div>
|
|
<h3 id="progress-components">
|
|
|
|
|
|
<a href="#progress-components" class="anchor-heading" aria-labelledby="progress-components"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Progress Components
|
|
|
|
|
|
</h3>
|
|
|
|
<h4 id="progress-bars">
|
|
|
|
|
|
<a href="#progress-bars" class="anchor-heading" aria-labelledby="progress-bars"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Progress Bars
|
|
|
|
|
|
</h4>
|
|
|
|
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><div</span> <span class="na">class=</span><span class="s">"progress"</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"progress-bar progress-bar-success"</span> <span class="na">role=</span><span class="s">"progressbar"</span>
|
|
<span class="na">aria-valuenow=</span><span class="s">"40"</span> <span class="na">aria-valuemin=</span><span class="s">"0"</span> <span class="na">aria-valuemax=</span><span class="s">"100"</span> <span class="na">style=</span><span class="s">"width:40%"</span><span class="nt">></span>
|
|
40% Complete (success)
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span>
|
|
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"progress"</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"progress-bar progress-bar-striped progress-bar-animated"</span>
|
|
<span class="na">role=</span><span class="s">"progressbar"</span> <span class="na">aria-valuenow=</span><span class="s">"75"</span> <span class="na">aria-valuemin=</span><span class="s">"0"</span>
|
|
<span class="na">aria-valuemax=</span><span class="s">"100"</span> <span class="na">style=</span><span class="s">"width:75%"</span><span class="nt">></span>
|
|
75%
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span>
|
|
</code></pre></div></div>
|
|
<h4 id="animated-progress-with-javascript">
|
|
|
|
|
|
<a href="#animated-progress-with-javascript" class="anchor-heading" aria-labelledby="animated-progress-with-javascript"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Animated Progress with JavaScript
|
|
|
|
|
|
</h4>
|
|
|
|
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">function</span> <span class="nx">animateProgress</span><span class="p">(</span><span class="nx">selector</span><span class="p">,</span> <span class="nx">targetPercentage</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="kd">const</span> <span class="nx">progressBar</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="nx">selector</span><span class="p">);</span>
|
|
<span class="kd">let</span> <span class="nx">currentPercentage</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
|
|
|
|
<span class="kd">const</span> <span class="nx">interval</span> <span class="o">=</span> <span class="nx">setInterval</span><span class="p">(()</span> <span class="o">=></span> <span class="p">{</span>
|
|
<span class="k">if</span> <span class="p">(</span><span class="nx">currentPercentage</span> <span class="o">>=</span> <span class="nx">targetPercentage</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="nx">clearInterval</span><span class="p">(</span><span class="nx">interval</span><span class="p">);</span>
|
|
<span class="k">return</span><span class="p">;</span>
|
|
<span class="p">}</span>
|
|
|
|
<span class="nx">currentPercentage</span><span class="o">++</span><span class="p">;</span>
|
|
<span class="nx">progressBar</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">width</span> <span class="o">=</span> <span class="nx">currentPercentage</span> <span class="o">+</span> <span class="dl">'</span><span class="s1">%</span><span class="dl">'</span><span class="p">;</span>
|
|
<span class="nx">progressBar</span><span class="p">.</span><span class="nx">textContent</span> <span class="o">=</span> <span class="nx">currentPercentage</span> <span class="o">+</span> <span class="dl">'</span><span class="s1">%</span><span class="dl">'</span><span class="p">;</span>
|
|
<span class="p">},</span> <span class="mi">20</span><span class="p">);</span>
|
|
<span class="p">}</span>
|
|
|
|
<span class="c1">// Usage</span>
|
|
<span class="nx">animateProgress</span><span class="p">(</span><span class="dl">'</span><span class="s1">.progress-bar</span><span class="dl">'</span><span class="p">,</span> <span class="mi">85</span><span class="p">);</span>
|
|
</code></pre></div></div><hr />
|
|
<h2 id="map-components">
|
|
|
|
|
|
<a href="#map-components" class="anchor-heading" aria-labelledby="map-components"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Map Components
|
|
|
|
|
|
</h2>
|
|
|
|
<h3 id="jvectormap-integration">
|
|
|
|
|
|
<a href="#jvectormap-integration" class="anchor-heading" aria-labelledby="jvectormap-integration"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> jVectorMap Integration
|
|
|
|
|
|
</h3>
|
|
|
|
<h4 id="world-map">
|
|
|
|
|
|
<a href="#world-map" class="anchor-heading" aria-labelledby="world-map"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> World Map
|
|
|
|
|
|
</h4>
|
|
|
|
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><div</span> <span class="na">id=</span><span class="s">"world-map"</span> <span class="na">style=</span><span class="s">"height: 400px;"</span><span class="nt">></div></span>
|
|
</code></pre></div></div>
|
|
|
|
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">#world-map</span><span class="dl">'</span><span class="p">).</span><span class="nx">vectorMap</span><span class="p">({</span>
|
|
<span class="na">map</span><span class="p">:</span> <span class="dl">'</span><span class="s1">world_mill</span><span class="dl">'</span><span class="p">,</span>
|
|
<span class="na">backgroundColor</span><span class="p">:</span> <span class="dl">'</span><span class="s1">transparent</span><span class="dl">'</span><span class="p">,</span>
|
|
<span class="na">regionStyle</span><span class="p">:</span> <span class="p">{</span>
|
|
<span class="na">initial</span><span class="p">:</span> <span class="p">{</span>
|
|
<span class="na">fill</span><span class="p">:</span> <span class="dl">'</span><span class="s1">#73879C</span><span class="dl">'</span><span class="p">,</span>
|
|
<span class="dl">"</span><span class="s2">fill-opacity</span><span class="dl">"</span><span class="p">:</span> <span class="mi">1</span><span class="p">,</span>
|
|
<span class="na">stroke</span><span class="p">:</span> <span class="dl">'</span><span class="s1">#fff</span><span class="dl">'</span><span class="p">,</span>
|
|
<span class="dl">"</span><span class="s2">stroke-width</span><span class="dl">"</span><span class="p">:</span> <span class="mi">1</span><span class="p">,</span>
|
|
<span class="dl">"</span><span class="s2">stroke-opacity</span><span class="dl">"</span><span class="p">:</span> <span class="mi">1</span>
|
|
<span class="p">}</span>
|
|
<span class="p">},</span>
|
|
<span class="na">series</span><span class="p">:</span> <span class="p">{</span>
|
|
<span class="na">regions</span><span class="p">:</span> <span class="p">[{</span>
|
|
<span class="na">values</span><span class="p">:</span> <span class="p">{</span>
|
|
<span class="dl">"</span><span class="s2">US</span><span class="dl">"</span><span class="p">:</span> <span class="mi">298</span><span class="p">,</span>
|
|
<span class="dl">"</span><span class="s2">SA</span><span class="dl">"</span><span class="p">:</span> <span class="mi">200</span><span class="p">,</span>
|
|
<span class="dl">"</span><span class="s2">AU</span><span class="dl">"</span><span class="p">:</span> <span class="mi">760</span><span class="p">,</span>
|
|
<span class="dl">"</span><span class="s2">IN</span><span class="dl">"</span><span class="p">:</span> <span class="mi">2000000</span><span class="p">,</span>
|
|
<span class="dl">"</span><span class="s2">GB</span><span class="dl">"</span><span class="p">:</span> <span class="mi">120</span>
|
|
<span class="p">},</span>
|
|
<span class="na">scale</span><span class="p">:</span> <span class="p">[</span><span class="dl">'</span><span class="s1">#26B99A</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">#E74C3C</span><span class="dl">'</span><span class="p">],</span>
|
|
<span class="na">normalizeFunction</span><span class="p">:</span> <span class="dl">'</span><span class="s1">polynomial</span><span class="dl">'</span>
|
|
<span class="p">}]</span>
|
|
<span class="p">}</span>
|
|
<span class="p">});</span>
|
|
</code></pre></div></div>
|
|
<h4 id="regional-map">
|
|
|
|
|
|
<a href="#regional-map" class="anchor-heading" aria-labelledby="regional-map"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Regional Map
|
|
|
|
|
|
</h4>
|
|
|
|
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">#usa-map</span><span class="dl">'</span><span class="p">).</span><span class="nx">vectorMap</span><span class="p">({</span>
|
|
<span class="na">map</span><span class="p">:</span> <span class="dl">'</span><span class="s1">us_aea</span><span class="dl">'</span><span class="p">,</span>
|
|
<span class="na">backgroundColor</span><span class="p">:</span> <span class="dl">'</span><span class="s1">transparent</span><span class="dl">'</span><span class="p">,</span>
|
|
<span class="na">regionsSelectable</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
|
|
<span class="na">series</span><span class="p">:</span> <span class="p">{</span>
|
|
<span class="na">regions</span><span class="p">:</span> <span class="p">[{</span>
|
|
<span class="na">values</span><span class="p">:</span> <span class="p">{</span>
|
|
<span class="dl">"</span><span class="s2">US-CA</span><span class="dl">"</span><span class="p">:</span> <span class="mi">200</span><span class="p">,</span>
|
|
<span class="dl">"</span><span class="s2">US-TX</span><span class="dl">"</span><span class="p">:</span> <span class="mi">300</span><span class="p">,</span>
|
|
<span class="dl">"</span><span class="s2">US-NY</span><span class="dl">"</span><span class="p">:</span> <span class="mi">250</span>
|
|
<span class="p">},</span>
|
|
<span class="na">scale</span><span class="p">:</span> <span class="p">[</span><span class="dl">'</span><span class="s1">#3498DB</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">#E74C3C</span><span class="dl">'</span><span class="p">]</span>
|
|
<span class="p">}]</span>
|
|
<span class="p">}</span>
|
|
<span class="p">});</span>
|
|
</code></pre></div></div><hr />
|
|
<h2 id="calendar-components">
|
|
|
|
|
|
<a href="#calendar-components" class="anchor-heading" aria-labelledby="calendar-components"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Calendar Components
|
|
|
|
|
|
</h2>
|
|
|
|
<h3 id="fullcalendar-integration">
|
|
|
|
|
|
<a href="#fullcalendar-integration" class="anchor-heading" aria-labelledby="fullcalendar-integration"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> FullCalendar Integration
|
|
|
|
|
|
</h3>
|
|
|
|
|
|
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><div</span> <span class="na">id=</span><span class="s">"calendar"</span><span class="nt">></div></span>
|
|
</code></pre></div></div>
|
|
|
|
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Calendar</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">@fullcalendar/core</span><span class="dl">'</span><span class="p">;</span>
|
|
<span class="k">import</span> <span class="nx">dayGridPlugin</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">@fullcalendar/daygrid</span><span class="dl">'</span><span class="p">;</span>
|
|
<span class="k">import</span> <span class="nx">timeGridPlugin</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">@fullcalendar/timegrid</span><span class="dl">'</span><span class="p">;</span>
|
|
<span class="k">import</span> <span class="nx">interactionPlugin</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">@fullcalendar/interaction</span><span class="dl">'</span><span class="p">;</span>
|
|
|
|
<span class="kd">const</span> <span class="nx">calendarEl</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">calendar</span><span class="dl">'</span><span class="p">);</span>
|
|
<span class="kd">const</span> <span class="nx">calendar</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Calendar</span><span class="p">(</span><span class="nx">calendarEl</span><span class="p">,</span> <span class="p">{</span>
|
|
<span class="na">plugins</span><span class="p">:</span> <span class="p">[</span><span class="nx">dayGridPlugin</span><span class="p">,</span> <span class="nx">timeGridPlugin</span><span class="p">,</span> <span class="nx">interactionPlugin</span><span class="p">],</span>
|
|
<span class="na">headerToolbar</span><span class="p">:</span> <span class="p">{</span>
|
|
<span class="na">left</span><span class="p">:</span> <span class="dl">'</span><span class="s1">prev,next today</span><span class="dl">'</span><span class="p">,</span>
|
|
<span class="na">center</span><span class="p">:</span> <span class="dl">'</span><span class="s1">title</span><span class="dl">'</span><span class="p">,</span>
|
|
<span class="na">right</span><span class="p">:</span> <span class="dl">'</span><span class="s1">dayGridMonth,timeGridWeek,timeGridDay</span><span class="dl">'</span>
|
|
<span class="p">},</span>
|
|
<span class="na">initialDate</span><span class="p">:</span> <span class="k">new</span> <span class="nb">Date</span><span class="p">(),</span>
|
|
<span class="na">navLinks</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
|
|
<span class="na">selectable</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
|
|
<span class="na">selectMirror</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
|
|
<span class="na">select</span><span class="p">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">arg</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="kd">const</span> <span class="nx">title</span> <span class="o">=</span> <span class="nx">prompt</span><span class="p">(</span><span class="dl">'</span><span class="s1">Event Title:</span><span class="dl">'</span><span class="p">);</span>
|
|
<span class="k">if</span> <span class="p">(</span><span class="nx">title</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="nx">calendar</span><span class="p">.</span><span class="nx">addEvent</span><span class="p">({</span>
|
|
<span class="na">title</span><span class="p">:</span> <span class="nx">title</span><span class="p">,</span>
|
|
<span class="na">start</span><span class="p">:</span> <span class="nx">arg</span><span class="p">.</span><span class="nx">start</span><span class="p">,</span>
|
|
<span class="na">end</span><span class="p">:</span> <span class="nx">arg</span><span class="p">.</span><span class="nx">end</span><span class="p">,</span>
|
|
<span class="na">allDay</span><span class="p">:</span> <span class="nx">arg</span><span class="p">.</span><span class="nx">allDay</span>
|
|
<span class="p">});</span>
|
|
<span class="p">}</span>
|
|
<span class="nx">calendar</span><span class="p">.</span><span class="nx">unselect</span><span class="p">();</span>
|
|
<span class="p">},</span>
|
|
<span class="na">eventClick</span><span class="p">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">arg</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="k">if</span> <span class="p">(</span><span class="nx">confirm</span><span class="p">(</span><span class="dl">'</span><span class="s1">Are you sure you want to delete this event?</span><span class="dl">'</span><span class="p">))</span> <span class="p">{</span>
|
|
<span class="nx">arg</span><span class="p">.</span><span class="nx">event</span><span class="p">.</span><span class="nx">remove</span><span class="p">();</span>
|
|
<span class="p">}</span>
|
|
<span class="p">},</span>
|
|
<span class="na">editable</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
|
|
<span class="na">dayMaxEvents</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
|
|
<span class="na">events</span><span class="p">:</span> <span class="p">[</span>
|
|
<span class="p">{</span>
|
|
<span class="na">title</span><span class="p">:</span> <span class="dl">'</span><span class="s1">All Day Event</span><span class="dl">'</span><span class="p">,</span>
|
|
<span class="na">start</span><span class="p">:</span> <span class="dl">'</span><span class="s1">2023-01-01</span><span class="dl">'</span>
|
|
<span class="p">},</span>
|
|
<span class="p">{</span>
|
|
<span class="na">title</span><span class="p">:</span> <span class="dl">'</span><span class="s1">Long Event</span><span class="dl">'</span><span class="p">,</span>
|
|
<span class="na">start</span><span class="p">:</span> <span class="dl">'</span><span class="s1">2023-01-07</span><span class="dl">'</span><span class="p">,</span>
|
|
<span class="na">end</span><span class="p">:</span> <span class="dl">'</span><span class="s1">2023-01-10</span><span class="dl">'</span>
|
|
<span class="p">}</span>
|
|
<span class="p">]</span>
|
|
<span class="p">});</span>
|
|
|
|
<span class="nx">calendar</span><span class="p">.</span><span class="nx">render</span><span class="p">();</span>
|
|
</code></pre></div></div><hr />
|
|
<h2 id="media-components">
|
|
|
|
|
|
<a href="#media-components" class="anchor-heading" aria-labelledby="media-components"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Media Components
|
|
|
|
|
|
</h2>
|
|
|
|
<h3 id="image-gallery">
|
|
|
|
|
|
<a href="#image-gallery" class="anchor-heading" aria-labelledby="image-gallery"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Image Gallery
|
|
|
|
|
|
</h3>
|
|
|
|
|
|
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-4"</span><span class="nt">></span>
|
|
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"images/large1.jpg"</span> <span class="na">class=</span><span class="s">"fancybox"</span> <span class="na">rel=</span><span class="s">"gallery1"</span>
|
|
<span class="na">title=</span><span class="s">"Image 1"</span><span class="nt">></span>
|
|
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"images/thumb1.jpg"</span> <span class="na">class=</span><span class="s">"img-responsive"</span> <span class="na">alt=</span><span class="s">""</span><span class="nt">></span>
|
|
<span class="nt"></a></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-4"</span><span class="nt">></span>
|
|
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"images/large2.jpg"</span> <span class="na">class=</span><span class="s">"fancybox"</span> <span class="na">rel=</span><span class="s">"gallery1"</span>
|
|
<span class="na">title=</span><span class="s">"Image 2"</span><span class="nt">></span>
|
|
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"images/thumb2.jpg"</span> <span class="na">class=</span><span class="s">"img-responsive"</span> <span class="na">alt=</span><span class="s">""</span><span class="nt">></span>
|
|
<span class="nt"></a></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span>
|
|
</code></pre></div></div>
|
|
|
|
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">.fancybox</span><span class="dl">'</span><span class="p">).</span><span class="nx">fancybox</span><span class="p">({</span>
|
|
<span class="na">openEffect</span><span class="p">:</span> <span class="dl">'</span><span class="s1">elastic</span><span class="dl">'</span><span class="p">,</span>
|
|
<span class="na">closeEffect</span><span class="p">:</span> <span class="dl">'</span><span class="s1">elastic</span><span class="dl">'</span><span class="p">,</span>
|
|
<span class="na">helpers</span><span class="p">:</span> <span class="p">{</span>
|
|
<span class="na">title</span><span class="p">:</span> <span class="p">{</span>
|
|
<span class="na">type</span><span class="p">:</span> <span class="dl">'</span><span class="s1">inside</span><span class="dl">'</span>
|
|
<span class="p">}</span>
|
|
<span class="p">}</span>
|
|
<span class="p">});</span>
|
|
</code></pre></div></div><hr />
|
|
<h2 id="next-steps">
|
|
|
|
|
|
<a href="#next-steps" class="anchor-heading" aria-labelledby="next-steps"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Next Steps
|
|
|
|
|
|
</h2>
|
|
|
|
|
|
<ul>
|
|
<li><strong><a href="/gentelella/docs/customization/">Customization Guide</a></strong> - Learn how to customize these components</li>
|
|
<li><strong><a href="/gentelella/docs/performance/">Performance Guide</a></strong> - Optimize component loading</li>
|
|
<li><strong><a href="/gentelella/docs/api/">API Reference</a></strong> - Detailed API documentation</li>
|
|
<li><strong><a href="/gentelella/docs/examples/">Examples</a></strong> - See components in action</li>
|
|
</ul><hr />
|
|
|
|
<p class="highlight">💡 <strong>Pro Tip</strong>: Use the smart loading system to load only the components you need on each page. This significantly improves performance while maintaining functionality.</p>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</main>
|
|
|
|
|
|
<hr>
|
|
<footer>
|
|
|
|
<p><a href="#top" id="back-to-top">Back to top</a></p>
|
|
|
|
|
|
<p class="text-small text-grey-dk-100 mb-0">Copyright © {{ 'now' | date: '%Y' }} Colorlib. Distributed under the <a href="https://github.com/puikinsh/gentelella/blob/master/LICENSE.txt">MIT license</a>.</p>
|
|
|
|
|
|
</footer>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="search-overlay"></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</body>
|
|
</html>
|
|
|