gentelella

<!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">  <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>  </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>  <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>  <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> Complete reference for all components available in Gentelella Admin Template <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> Gentelella includes three pre-designed dashboard layouts: <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>Revenue widgets with animated counters</li> <li>Real-time charts showing trends and analytics</li> <li>Activity timeline with user interactions</li> <li>Quick stats cards with icons</li> <li>To-do lists with progress tracking</li> </ul> <div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code> <div class="col-md-3 col-sm-6"> <div class="x_panel tile fixed_height_320"> <div class="x_title"> <h2>Total Revenue</h2> </div> <div class="x_content"> <span class="chart" data-percent="73"> <span class="percent">73 <h3>$52,147</h3> <div class="sidebar-widget"> <h4>Revenue breakdown</h4> <canvas id="revenue-chart"></canvas> </div> </div> </div> </div> </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>Full-width charts for detailed analytics</li> <li>Map integration with geographical data</li> <li>Compact widgets for KPIs</li> <li>News feed 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>Calendar integration with events</li> <li>Weather widget with forecasts</li> <li>Social media stats counters</li> <li>Project timeline 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><div class="tile_count"> <div class="col-md-2 col-sm-4 tile_stats_count"> <span class="count_top"><i class="fa fa-user"> Total Users <div class="count">2500</div> <span class="count_bottom"><i class="green">4% From last Week </div> </div> </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><div class="col-md-4 col-sm-4"> <div class="x_panel tile fixed_height_320 overflow_hidden"> <div class="x_title"> <h2>Network Activities</h2> </div> <div class="x_content"> <table class="countries_list"> <tbody> <tr> <td>United States</td> <td class="fs-15 fw-700 text-right">2,371</td> </tr> </tbody> </table> </div> </div> </div> </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>// Initialize line chart import Chart from 'chart.js/auto'; const ctx = document.getElementById('lineChart').getContext('2d'); const lineChart = new Chart(ctx, { type: 'line', data: { labels: ['January', 'February', 'March', 'April', 'May', 'June'], datasets: [{ label: 'Sales', data: [12, 19, 3, 5, 2, 3], borderColor: '#73879C', backgroundColor: 'rgba(115, 135, 156, 0.1)', tension: 0.4 }] }, options: { responsive: true, plugins: { legend: { position: 'bottom' } } } }); </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><div class="x_panel"> <div class="x_title"> <h2>Monthly Sales</h2> </div> <div class="x_content"> <canvas id="barChart" width="400" height="200"></canvas> </div> </div> </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>const pieChart = new Chart(ctx, { type: 'pie', data: { labels: ['Desktop', 'Mobile', 'Tablet'], datasets: [{ data: [300, 50, 100], backgroundColor: ['#73879C', '#26B99A', '#3498DB'] }] } }); </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>Morris.Line({ element: 'line-chart', data: [ { y: '2023-01', a: 100, b: 90 }, { y: '2023-02', a: 75, b: 65 }, { y: '2023-03', a: 50, b: 40 } ], xkey: 'y', ykeys: ['a', 'b'], labels: ['Series A', 'Series B'] }); </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>Morris.Area({ element: 'area-chart', data: [ { period: '2023-01', sales: 2666, downloads: 2647 }, { period: '2023-02', sales: 2778, downloads: 2294 } ], xkey: 'period', ykeys: ['sales', 'downloads'], labels: ['Sales', 'Downloads'] }); </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>$('.sparkline').sparkline([5,6,7,2,0,-4,-2,4], { type: 'line', width: '100%', height: '30', lineColor: '#26B99A', fillColor: 'rgba(38, 185, 154, 0.3)' }); </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>import Gauge from 'gauge.js'; const gauge = new Gauge(document.getElementById('gauge')).setOptions({ angle: 0.15, lineWidth: 0.2, radiusScale: 1, pointer: { length: 0.6, strokeWidth: 0.035, color: '#000000' }, limitMax: false, limitMin: false, colorStart: '#6FADCF', colorStop: '#8FC0DA', strokeColor: '#E0E0E0', generateGradient: true, highDpiSupport: true }); gauge.maxValue = 100; gauge.setMinValue(0); gauge.animationSpeed = 32; gauge.set(67); </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><div class="form-group row"> <label class="col-form-label col-md-3 col-sm-3">Email</label> <div class="col-md-6 col-sm-6"> <input type="email" class="form-control" placeholder="Enter email"> </div> </div> </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><div class="form-group row"> <label class="col-form-label col-md-3 col-sm-3">Country</label> <div class="col-md-6 col-sm-6"> <select class="form-control"> <option>Choose option</option> <option>United States</option> <option>United Kingdom</option> </select> </div> </div> </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><select class="form-control select2" multiple="multiple"> <option value="AK">Alaska</option> <option value="HI">Hawaii</option> <option value="CA">California</option> </select> </code></pre></div></div> <div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code>// Initialize Select2 $('.select2').select2({ theme: 'bootstrap-5', width: '100%', placeholder: 'Select options...' }); </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><div class="form-group"> <label>Date Range:</label> <div> <input type="text" class="form-control" id="reservation" placeholder="Select date range"> </div> </div> </code></pre></div></div> <div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code>import <span