mirror of https://github.com/ColorlibHQ/gentelella
837 lines
17 KiB
Markdown
837 lines
17 KiB
Markdown
---
|
|
layout: default
|
|
title: Components Guide
|
|
nav_order: 4
|
|
---
|
|
|
|
# Components Guide
|
|
{: .no_toc }
|
|
|
|
Complete reference for all components available in Gentelella Admin Template
|
|
{: .fs-6 .fw-300 }
|
|
|
|
## Table of contents
|
|
{: .no_toc .text-delta }
|
|
|
|
1. TOC
|
|
{:toc}
|
|
|
|
---
|
|
|
|
## Dashboard Components
|
|
|
|
### Dashboard Layouts
|
|
|
|
Gentelella includes three pre-designed dashboard layouts:
|
|
|
|
#### Main Dashboard (`index.html`)
|
|
- **Revenue widgets** with animated counters
|
|
- **Real-time charts** showing trends and analytics
|
|
- **Activity timeline** with user interactions
|
|
- **Quick stats** cards with icons
|
|
- **To-do lists** with progress tracking
|
|
|
|
```html
|
|
<!-- Revenue Widget Example -->
|
|
<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</span>
|
|
</span>
|
|
<h3>$52,147</h3>
|
|
<div class="sidebar-widget">
|
|
<h4>Revenue breakdown</h4>
|
|
<canvas id="revenue-chart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
```
|
|
|
|
#### Dashboard 2 (`index2.html`)
|
|
- **Full-width charts** for detailed analytics
|
|
- **Map integration** with geographical data
|
|
- **Compact widgets** for KPIs
|
|
- **News feed** with updates
|
|
|
|
#### Dashboard 3 (`index3.html`)
|
|
- **Calendar integration** with events
|
|
- **Weather widget** with forecasts
|
|
- **Social media stats** counters
|
|
- **Project timeline** view
|
|
|
|
### Widget Cards
|
|
|
|
#### Tile Widgets
|
|
```html
|
|
<div class="tile_count">
|
|
<div class="col-md-2 col-sm-4 tile_stats_count">
|
|
<span class="count_top"><i class="fa fa-user"></i> Total Users</span>
|
|
<div class="count">2500</div>
|
|
<span class="count_bottom"><i class="green">4% </i> From last Week</span>
|
|
</div>
|
|
</div>
|
|
```
|
|
|
|
#### Info Box Widgets
|
|
```html
|
|
<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>
|
|
```
|
|
|
|
---
|
|
|
|
## Chart Components
|
|
|
|
### Chart.js Integration
|
|
|
|
#### Line Charts
|
|
```javascript
|
|
// 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'
|
|
}
|
|
}
|
|
}
|
|
});
|
|
```
|
|
|
|
#### Bar Charts
|
|
```html
|
|
<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>
|
|
```
|
|
|
|
#### Pie Charts
|
|
```javascript
|
|
const pieChart = new Chart(ctx, {
|
|
type: 'pie',
|
|
data: {
|
|
labels: ['Desktop', 'Mobile', 'Tablet'],
|
|
datasets: [{
|
|
data: [300, 50, 100],
|
|
backgroundColor: ['#73879C', '#26B99A', '#3498DB']
|
|
}]
|
|
}
|
|
});
|
|
```
|
|
|
|
### Morris.js Charts
|
|
|
|
#### Line Charts
|
|
```javascript
|
|
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']
|
|
});
|
|
```
|
|
|
|
#### Area Charts
|
|
```javascript
|
|
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']
|
|
});
|
|
```
|
|
|
|
### Sparkline Charts
|
|
|
|
```javascript
|
|
$('.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)'
|
|
});
|
|
```
|
|
|
|
### Gauge Charts
|
|
|
|
```javascript
|
|
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);
|
|
```
|
|
|
|
---
|
|
|
|
## Form Components
|
|
|
|
### Basic Form Elements
|
|
|
|
#### Input Fields
|
|
```html
|
|
<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>
|
|
```
|
|
|
|
#### Select Dropdowns
|
|
```html
|
|
<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>
|
|
```
|
|
|
|
### Advanced Form Components
|
|
|
|
#### Select2 Enhanced Dropdowns
|
|
```html
|
|
<select class="form-control select2" multiple="multiple">
|
|
<option value="AK">Alaska</option>
|
|
<option value="HI">Hawaii</option>
|
|
<option value="CA">California</option>
|
|
</select>
|
|
```
|
|
|
|
```javascript
|
|
// Initialize Select2
|
|
$('.select2').select2({
|
|
theme: 'bootstrap-5',
|
|
width: '100%',
|
|
placeholder: 'Select options...'
|
|
});
|
|
```
|
|
|
|
#### Date/Time Pickers
|
|
```html
|
|
<div class="form-group">
|
|
<label>Date Range:</label>
|
|
<div>
|
|
<input type="text" class="form-control" id="reservation"
|
|
placeholder="Select date range">
|
|
</div>
|
|
</div>
|
|
```
|
|
|
|
```javascript
|
|
import { DateTime } from 'tempus-dominus';
|
|
|
|
new DateTime(document.getElementById('reservation'), {
|
|
display: {
|
|
components: {
|
|
calendar: true,
|
|
date: true,
|
|
month: true,
|
|
year: true,
|
|
decades: true,
|
|
clock: false
|
|
}
|
|
}
|
|
});
|
|
```
|
|
|
|
#### Range Sliders
|
|
```html
|
|
<div class="form-group">
|
|
<label>Price Range:</label>
|
|
<input type="text" id="range-slider" value="" name="range">
|
|
</div>
|
|
```
|
|
|
|
```javascript
|
|
$("#range-slider").ionRangeSlider({
|
|
type: "double",
|
|
min: 0,
|
|
max: 1000,
|
|
from: 200,
|
|
to: 500,
|
|
prefix: "$"
|
|
});
|
|
```
|
|
|
|
#### File Upload with Dropzone
|
|
```html
|
|
<div class="dropzone" id="file-dropzone">
|
|
<div class="dz-message">
|
|
<h3>Drop files here or click to upload</h3>
|
|
</div>
|
|
</div>
|
|
```
|
|
|
|
```javascript
|
|
import Dropzone from 'dropzone';
|
|
|
|
new Dropzone("#file-dropzone", {
|
|
url: "/upload",
|
|
maxFilesize: 10,
|
|
acceptedFiles: ".jpeg,.jpg,.png,.gif"
|
|
});
|
|
```
|
|
|
|
#### Rich Text Editor
|
|
```html
|
|
<div class="form-group">
|
|
<label>Content:</label>
|
|
<div id="editor" class="form-control" style="height: 300px;">
|
|
<p>Initial content...</p>
|
|
</div>
|
|
</div>
|
|
```
|
|
|
|
### Form Validation
|
|
|
|
#### Bootstrap Validation
|
|
```html
|
|
<form class="needs-validation" novalidate>
|
|
<div class="form-group">
|
|
<label for="validationCustom01">First name</label>
|
|
<input type="text" class="form-control" id="validationCustom01"
|
|
placeholder="First name" required>
|
|
<div class="invalid-feedback">
|
|
Please provide a valid first name.
|
|
</div>
|
|
</div>
|
|
<button class="btn btn-primary" type="submit">Submit</button>
|
|
</form>
|
|
```
|
|
|
|
#### Parsley.js Validation
|
|
```html
|
|
<form data-parsley-validate>
|
|
<div class="form-group">
|
|
<label>Email *</label>
|
|
<input type="email" class="form-control"
|
|
data-parsley-type="email" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Password *</label>
|
|
<input type="password" class="form-control"
|
|
data-parsley-minlength="6" required>
|
|
</div>
|
|
</form>
|
|
```
|
|
|
|
---
|
|
|
|
## Table Components
|
|
|
|
### Basic Tables
|
|
|
|
#### Responsive Table
|
|
```html
|
|
<div class="table-responsive">
|
|
<table class="table table-striped table-bordered">
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Position</th>
|
|
<th>Office</th>
|
|
<th>Salary</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>Tiger Nixon</td>
|
|
<td>System Architect</td>
|
|
<td>Edinburgh</td>
|
|
<td>$320,800</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
```
|
|
|
|
### DataTables Integration
|
|
|
|
#### Basic DataTable
|
|
```html
|
|
<table id="datatable" class="table table-striped table-bordered"
|
|
style="width:100%">
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Position</th>
|
|
<th>Office</th>
|
|
<th>Age</th>
|
|
<th>Start date</th>
|
|
<th>Salary</th>
|
|
</tr>
|
|
</thead>
|
|
</table>
|
|
```
|
|
|
|
```javascript
|
|
$('#datatable').DataTable({
|
|
ajax: '/api/employees',
|
|
columns: [
|
|
{ data: 'name' },
|
|
{ data: 'position' },
|
|
{ data: 'office' },
|
|
{ data: 'age' },
|
|
{ data: 'start_date' },
|
|
{ data: 'salary' }
|
|
],
|
|
responsive: true,
|
|
pageLength: 25,
|
|
dom: 'Bfrtip',
|
|
buttons: ['copy', 'csv', 'excel', 'pdf', 'print']
|
|
});
|
|
```
|
|
|
|
#### Advanced DataTable Features
|
|
```javascript
|
|
$('#advanced-datatable').DataTable({
|
|
processing: true,
|
|
serverSide: true,
|
|
ajax: {
|
|
url: '/api/data',
|
|
type: 'POST'
|
|
},
|
|
columns: [
|
|
{ data: 'id', searchable: false },
|
|
{ data: 'name' },
|
|
{ data: 'email' },
|
|
{
|
|
data: 'actions',
|
|
orderable: false,
|
|
searchable: false,
|
|
render: function(data, type, row) {
|
|
return `
|
|
<button class="btn btn-sm btn-primary edit-btn" data-id="${row.id}">Edit</button>
|
|
<button class="btn btn-sm btn-danger delete-btn" data-id="${row.id}">Delete</button>
|
|
`;
|
|
}
|
|
}
|
|
],
|
|
order: [[0, 'desc']],
|
|
pageLength: 50,
|
|
lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]]
|
|
});
|
|
```
|
|
|
|
---
|
|
|
|
## UI Elements
|
|
|
|
### Navigation Components
|
|
|
|
#### Sidebar Navigation
|
|
```html
|
|
<div class="col-md-3 left_col">
|
|
<div class="left_col scroll-view">
|
|
<div class="navbar nav_title" style="border: 0;">
|
|
<a href="index.html" class="site_title">
|
|
<i class="fa fa-paw"></i> <span>Gentelella!</span>
|
|
</a>
|
|
</div>
|
|
|
|
<div id="sidebar-menu" class="main_menu_side hidden-print main_menu">
|
|
<div class="menu_section">
|
|
<h3>General</h3>
|
|
<ul class="nav side-menu">
|
|
<li><a><i class="fa fa-home"></i> Home <span class="fa fa-chevron-down"></span></a>
|
|
<ul class="nav child_menu">
|
|
<li><a href="index.html">Dashboard</a></li>
|
|
<li><a href="index2.html">Dashboard2</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
```
|
|
|
|
#### Breadcrumbs
|
|
```html
|
|
<div class="page-title">
|
|
<div class="title_left">
|
|
<h3>Form Elements</h3>
|
|
</div>
|
|
<div class="title_right">
|
|
<div class="col-md-5 col-sm-5 form-group pull-right top_search">
|
|
<div class="input-group">
|
|
<input type="text" class="form-control" placeholder="Search for...">
|
|
<span class="input-group-btn">
|
|
<button class="btn btn-default" type="button">Go!</button>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
```
|
|
|
|
### Modal Components
|
|
|
|
#### Basic Modal
|
|
```html
|
|
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog">
|
|
<div class="modal-dialog" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<button type="button" class="close" data-dismiss="modal">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
<h4 class="modal-title">Modal title</h4>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>Modal body content...</p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
|
<button type="button" class="btn btn-primary">Save changes</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
```
|
|
|
|
#### Large Modal with Form
|
|
```html
|
|
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog">
|
|
<div class="modal-dialog modal-lg">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h4 class="modal-title">Large Modal</h4>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form>
|
|
<!-- Form content -->
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
```
|
|
|
|
### Alert Components
|
|
|
|
#### Bootstrap Alerts
|
|
```html
|
|
<div class="alert alert-success alert-dismissible">
|
|
<button type="button" class="close" data-dismiss="alert">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
<strong>Success!</strong> This is a success alert.
|
|
</div>
|
|
|
|
<div class="alert alert-danger alert-dismissible">
|
|
<button type="button" class="close" data-dismiss="alert">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
<strong>Error!</strong> Something went wrong.
|
|
</div>
|
|
```
|
|
|
|
#### PNotify Notifications
|
|
```javascript
|
|
import PNotify from 'pnotify';
|
|
|
|
// Success notification
|
|
new PNotify({
|
|
title: 'Success!',
|
|
text: 'Your changes have been saved.',
|
|
type: 'success',
|
|
styling: 'bootstrap4'
|
|
});
|
|
|
|
// Error notification
|
|
new PNotify({
|
|
title: 'Error!',
|
|
text: 'An error occurred while processing your request.',
|
|
type: 'error',
|
|
styling: 'bootstrap4'
|
|
});
|
|
```
|
|
|
|
### Progress Components
|
|
|
|
#### Progress Bars
|
|
```html
|
|
<div class="progress">
|
|
<div class="progress-bar progress-bar-success" role="progressbar"
|
|
aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
|
|
40% Complete (success)
|
|
</div>
|
|
</div>
|
|
|
|
<div class="progress">
|
|
<div class="progress-bar progress-bar-striped progress-bar-animated"
|
|
role="progressbar" aria-valuenow="75" aria-valuemin="0"
|
|
aria-valuemax="100" style="width:75%">
|
|
75%
|
|
</div>
|
|
</div>
|
|
```
|
|
|
|
#### Animated Progress with JavaScript
|
|
```javascript
|
|
function animateProgress(selector, targetPercentage) {
|
|
const progressBar = document.querySelector(selector);
|
|
let currentPercentage = 0;
|
|
|
|
const interval = setInterval(() => {
|
|
if (currentPercentage >= targetPercentage) {
|
|
clearInterval(interval);
|
|
return;
|
|
}
|
|
|
|
currentPercentage++;
|
|
progressBar.style.width = currentPercentage + '%';
|
|
progressBar.textContent = currentPercentage + '%';
|
|
}, 20);
|
|
}
|
|
|
|
// Usage
|
|
animateProgress('.progress-bar', 85);
|
|
```
|
|
|
|
---
|
|
|
|
## Map Components
|
|
|
|
### jVectorMap Integration
|
|
|
|
#### World Map
|
|
```html
|
|
<div id="world-map" style="height: 400px;"></div>
|
|
```
|
|
|
|
```javascript
|
|
$('#world-map').vectorMap({
|
|
map: 'world_mill',
|
|
backgroundColor: 'transparent',
|
|
regionStyle: {
|
|
initial: {
|
|
fill: '#73879C',
|
|
"fill-opacity": 1,
|
|
stroke: '#fff',
|
|
"stroke-width": 1,
|
|
"stroke-opacity": 1
|
|
}
|
|
},
|
|
series: {
|
|
regions: [{
|
|
values: {
|
|
"US": 298,
|
|
"SA": 200,
|
|
"AU": 760,
|
|
"IN": 2000000,
|
|
"GB": 120
|
|
},
|
|
scale: ['#26B99A', '#E74C3C'],
|
|
normalizeFunction: 'polynomial'
|
|
}]
|
|
}
|
|
});
|
|
```
|
|
|
|
#### Regional Map
|
|
```javascript
|
|
$('#usa-map').vectorMap({
|
|
map: 'us_aea',
|
|
backgroundColor: 'transparent',
|
|
regionsSelectable: true,
|
|
series: {
|
|
regions: [{
|
|
values: {
|
|
"US-CA": 200,
|
|
"US-TX": 300,
|
|
"US-NY": 250
|
|
},
|
|
scale: ['#3498DB', '#E74C3C']
|
|
}]
|
|
}
|
|
});
|
|
```
|
|
|
|
---
|
|
|
|
## Calendar Components
|
|
|
|
### FullCalendar Integration
|
|
|
|
```html
|
|
<div id="calendar"></div>
|
|
```
|
|
|
|
```javascript
|
|
import { Calendar } from '@fullcalendar/core';
|
|
import dayGridPlugin from '@fullcalendar/daygrid';
|
|
import timeGridPlugin from '@fullcalendar/timegrid';
|
|
import interactionPlugin from '@fullcalendar/interaction';
|
|
|
|
const calendarEl = document.getElementById('calendar');
|
|
const calendar = new Calendar(calendarEl, {
|
|
plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin],
|
|
headerToolbar: {
|
|
left: 'prev,next today',
|
|
center: 'title',
|
|
right: 'dayGridMonth,timeGridWeek,timeGridDay'
|
|
},
|
|
initialDate: new Date(),
|
|
navLinks: true,
|
|
selectable: true,
|
|
selectMirror: true,
|
|
select: function(arg) {
|
|
const title = prompt('Event Title:');
|
|
if (title) {
|
|
calendar.addEvent({
|
|
title: title,
|
|
start: arg.start,
|
|
end: arg.end,
|
|
allDay: arg.allDay
|
|
});
|
|
}
|
|
calendar.unselect();
|
|
},
|
|
eventClick: function(arg) {
|
|
if (confirm('Are you sure you want to delete this event?')) {
|
|
arg.event.remove();
|
|
}
|
|
},
|
|
editable: true,
|
|
dayMaxEvents: true,
|
|
events: [
|
|
{
|
|
title: 'All Day Event',
|
|
start: '2023-01-01'
|
|
},
|
|
{
|
|
title: 'Long Event',
|
|
start: '2023-01-07',
|
|
end: '2023-01-10'
|
|
}
|
|
]
|
|
});
|
|
|
|
calendar.render();
|
|
```
|
|
|
|
---
|
|
|
|
## Media Components
|
|
|
|
### Image Gallery
|
|
|
|
```html
|
|
<div class="row">
|
|
<div class="col-md-4">
|
|
<a href="images/large1.jpg" class="fancybox" rel="gallery1"
|
|
title="Image 1">
|
|
<img src="images/thumb1.jpg" class="img-responsive" alt="">
|
|
</a>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<a href="images/large2.jpg" class="fancybox" rel="gallery1"
|
|
title="Image 2">
|
|
<img src="images/thumb2.jpg" class="img-responsive" alt="">
|
|
</a>
|
|
</div>
|
|
</div>
|
|
```
|
|
|
|
```javascript
|
|
$('.fancybox').fancybox({
|
|
openEffect: 'elastic',
|
|
closeEffect: 'elastic',
|
|
helpers: {
|
|
title: {
|
|
type: 'inside'
|
|
}
|
|
}
|
|
});
|
|
```
|
|
|
|
---
|
|
|
|
## Next Steps
|
|
|
|
- **[Customization Guide]({{ site.baseurl }}/docs/customization/)** - Learn how to customize these components
|
|
- **[Performance Guide]({{ site.baseurl }}/docs/performance/)** - Optimize component loading
|
|
- **[API Reference]({{ site.baseurl }}/docs/api/)** - Detailed API documentation
|
|
- **[Examples]({{ site.baseurl }}/docs/examples/)** - See components in action
|
|
|
|
---
|
|
|
|
{: .highlight }
|
|
💡 **Pro Tip**: Use the smart loading system to load only the components you need on each page. This significantly improves performance while maintaining functionality. |