admin-lte 4.0.0-rc7 → 4.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +69 -0
- package/README.md +202 -102
- package/dist/UI/general.html +330 -129
- package/dist/UI/icons.html +330 -129
- package/dist/UI/timeline.html +330 -129
- package/dist/css/adminlte.css +2798 -1167
- package/dist/css/adminlte.css.map +1 -1
- package/dist/css/adminlte.min.css +2 -2
- package/dist/css/adminlte.min.css.map +1 -1
- package/dist/css/adminlte.rtl.css +2798 -1167
- package/dist/css/adminlte.rtl.css.map +1 -1
- package/dist/css/adminlte.rtl.min.css +2 -2
- package/dist/css/adminlte.rtl.min.css.map +1 -1
- package/dist/docs/browser-support.html +287 -399
- package/dist/docs/color-mode.html +268 -384
- package/dist/docs/components/main-header.html +264 -376
- package/dist/docs/components/main-sidebar.html +279 -391
- package/dist/docs/customization.html +1080 -0
- package/dist/docs/deployment.html +1145 -0
- package/dist/docs/faq.html +883 -411
- package/dist/docs/getting-started.html +991 -0
- package/dist/docs/how-to-contribute.html +361 -464
- package/dist/docs/index.html +16 -0
- package/dist/docs/integrations.html +1231 -0
- package/dist/docs/introduction.html +479 -448
- package/dist/docs/javascript/accessibility.html +387 -493
- package/dist/docs/javascript/card-widget.html +472 -452
- package/dist/docs/javascript/direct-chat.html +350 -423
- package/dist/docs/javascript/fullscreen.html +374 -418
- package/dist/docs/javascript/layout.html +371 -438
- package/dist/docs/javascript/plugins-overview.html +1144 -0
- package/dist/docs/javascript/pushmenu.html +511 -494
- package/dist/docs/javascript/treeview.html +492 -402
- package/dist/docs/layout-blueprint.html +1087 -0
- package/dist/docs/layout.html +313 -417
- package/dist/docs/license.html +278 -389
- package/dist/docs/migration.html +1149 -0
- package/dist/docs/recipes.html +1185 -0
- package/dist/docs/rtl.html +957 -0
- package/dist/examples/lockscreen.html +91 -1
- package/dist/examples/login-v2.html +91 -1
- package/dist/examples/login.html +91 -1
- package/dist/examples/register-v2.html +91 -1
- package/dist/examples/register.html +91 -1
- package/dist/forms/elements.html +1405 -0
- package/dist/forms/{general.html → layout.html} +401 -489
- package/dist/forms/validation.html +1275 -0
- package/dist/forms/wizard.html +1410 -0
- package/dist/generate/theme.html +160 -4
- package/dist/index.html +330 -129
- package/dist/index2.html +333 -129
- package/dist/index3.html +330 -129
- package/dist/js/adminlte.js +8 -5
- package/dist/js/adminlte.js.map +1 -1
- package/dist/js/adminlte.min.js +2 -2
- package/dist/js/adminlte.min.js.map +1 -1
- package/dist/layout/collapsed-sidebar-without-hover.html +330 -129
- package/dist/layout/collapsed-sidebar.html +330 -129
- package/dist/layout/fixed-complete.html +330 -129
- package/dist/layout/fixed-footer.html +330 -129
- package/dist/layout/fixed-header.html +330 -129
- package/dist/layout/fixed-sidebar.html +330 -129
- package/dist/layout/layout-custom-area.html +330 -129
- package/dist/layout/layout-rtl.html +330 -129
- package/dist/layout/logo-switch.html +160 -4
- package/dist/layout/sidebar-mini.html +330 -129
- package/dist/layout/unfixed-sidebar.html +330 -129
- package/dist/mailbox/compose.html +1151 -0
- package/dist/mailbox/inbox.html +1509 -0
- package/dist/mailbox/read.html +1202 -0
- package/dist/pages/404.html +239 -0
- package/dist/pages/500.html +227 -0
- package/dist/pages/calendar.html +1266 -0
- package/dist/pages/chat.html +1427 -0
- package/dist/pages/faq.html +1383 -0
- package/dist/pages/file-manager.html +1835 -0
- package/dist/pages/invoice.html +1199 -0
- package/dist/pages/kanban.html +1439 -0
- package/dist/pages/maintenance.html +230 -0
- package/dist/pages/pricing.html +1279 -0
- package/dist/pages/profile.html +1382 -0
- package/dist/pages/projects.html +1644 -0
- package/dist/pages/settings.html +1387 -0
- package/dist/tables/data.html +1319 -0
- package/dist/tables/simple.html +330 -129
- package/dist/widgets/cards.html +330 -129
- package/dist/widgets/info-box.html +330 -129
- package/dist/widgets/small-box.html +330 -129
- package/github-issue-response.md +40 -0
- package/netlify.toml +16 -0
- package/package.json +31 -24
- package/src/scss/_app-header.scss +27 -0
- package/src/scss/_app-sidebar.scss +24 -30
- package/src/scss/_bootstrap-variables.scss +11 -4
- package/src/scss/_docs.scss +816 -0
- package/src/scss/_table.scss +4 -4
- package/src/scss/adminlte.scss +4 -1
- package/src/ts/accessibility.ts +9 -1
- package/src/ts/adminlte.ts +1 -1
- package/src/ts/fullscreen.ts +8 -4
- package/src/ts/push-menu.ts +66 -5
- package/.claude/settings.local.json +0 -37
- package/CLAUDE.md +0 -79
- package/release.md +0 -75
|
@@ -5,6 +5,32 @@
|
|
|
5
5
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
6
6
|
<title>Treeview Plugin | AdminLTE 4</title>
|
|
7
7
|
|
|
8
|
+
<!--begin::Theme Init (prevents flash of incorrect theme on load, #6043)-->
|
|
9
|
+
<script>
|
|
10
|
+
(() => {
|
|
11
|
+
'use strict';
|
|
12
|
+
const STORAGE_KEY = 'lte-theme';
|
|
13
|
+
let stored = null;
|
|
14
|
+
try {
|
|
15
|
+
stored = localStorage.getItem(STORAGE_KEY);
|
|
16
|
+
} catch {
|
|
17
|
+
// localStorage may be unavailable (private mode, sandboxed iframe).
|
|
18
|
+
}
|
|
19
|
+
const prefersDark = globalThis.matchMedia('(prefers-color-scheme: dark)').matches;
|
|
20
|
+
// Mirror the resolution in _scripts.astro: explicit "dark"/"light" win,
|
|
21
|
+
// otherwise ("auto" or unset) fall back to the OS preference.
|
|
22
|
+
let resolved = 'light';
|
|
23
|
+
if (stored === 'dark' || stored === 'light') {
|
|
24
|
+
resolved = stored;
|
|
25
|
+
} else if (prefersDark) {
|
|
26
|
+
resolved = 'dark';
|
|
27
|
+
}
|
|
28
|
+
document.documentElement.setAttribute('data-bs-theme', resolved);
|
|
29
|
+
document.documentElement.style.colorScheme = resolved;
|
|
30
|
+
})();
|
|
31
|
+
</script>
|
|
32
|
+
<!--end::Theme Init-->
|
|
33
|
+
|
|
8
34
|
<!--begin::Accessibility Meta Tags-->
|
|
9
35
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
|
|
10
36
|
<meta name="color-scheme" content="light dark" />
|
|
@@ -64,7 +90,7 @@
|
|
|
64
90
|
</head>
|
|
65
91
|
<!--end::Head-->
|
|
66
92
|
<!--begin::Body-->
|
|
67
|
-
<body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
|
|
93
|
+
<body class="layout-fixed sidebar-expand-lg bg-body-tertiary docs-page">
|
|
68
94
|
<!--begin::App Wrapper-->
|
|
69
95
|
<div class="app-wrapper">
|
|
70
96
|
<!--begin::Header-->
|
|
@@ -78,11 +104,18 @@
|
|
|
78
104
|
<i class="bi bi-list"></i>
|
|
79
105
|
</a>
|
|
80
106
|
</li>
|
|
107
|
+
|
|
81
108
|
<li class="nav-item d-none d-md-block">
|
|
82
|
-
<a href="
|
|
109
|
+
<a href="../../docs/introduction.html" class="nav-link">
|
|
110
|
+
<i class="bi bi-book me-1" aria-hidden="true"></i>
|
|
111
|
+
Documentation
|
|
112
|
+
</a>
|
|
83
113
|
</li>
|
|
84
114
|
<li class="nav-item d-none d-md-block">
|
|
85
|
-
<a href="
|
|
115
|
+
<a href="../../index.html" class="nav-link">
|
|
116
|
+
<i class="bi bi-arrow-left me-1" aria-hidden="true"></i>
|
|
117
|
+
Back to live preview
|
|
118
|
+
</a>
|
|
86
119
|
</li>
|
|
87
120
|
</ul>
|
|
88
121
|
<!--end::Start Navbar Links-->
|
|
@@ -220,11 +253,70 @@
|
|
|
220
253
|
<li class="nav-item">
|
|
221
254
|
<a class="nav-link" href="#" data-lte-toggle="fullscreen">
|
|
222
255
|
<i data-lte-icon="maximize" class="bi bi-arrows-fullscreen"></i>
|
|
223
|
-
<i data-lte-icon="minimize" class="bi bi-fullscreen-exit
|
|
256
|
+
<i data-lte-icon="minimize" class="bi bi-fullscreen-exit d-none"></i>
|
|
224
257
|
</a>
|
|
225
258
|
</li>
|
|
226
259
|
<!--end::Fullscreen Toggle-->
|
|
227
260
|
|
|
261
|
+
<!--begin::Color Mode Toggle (#6010)-->
|
|
262
|
+
<li class="nav-item dropdown">
|
|
263
|
+
<a
|
|
264
|
+
class="nav-link"
|
|
265
|
+
href="#"
|
|
266
|
+
id="bd-theme"
|
|
267
|
+
aria-label="Toggle color scheme"
|
|
268
|
+
data-bs-toggle="dropdown"
|
|
269
|
+
aria-expanded="false"
|
|
270
|
+
>
|
|
271
|
+
<i class="bi bi-sun-fill" data-lte-theme-icon="light"></i>
|
|
272
|
+
<i class="bi bi-moon-fill d-none" data-lte-theme-icon="dark"></i>
|
|
273
|
+
<i class="bi bi-circle-half d-none" data-lte-theme-icon="auto"></i>
|
|
274
|
+
</a>
|
|
275
|
+
<ul
|
|
276
|
+
class="dropdown-menu dropdown-menu-end"
|
|
277
|
+
aria-labelledby="bd-theme"
|
|
278
|
+
style="--bs-dropdown-min-width: 8rem"
|
|
279
|
+
>
|
|
280
|
+
<li>
|
|
281
|
+
<button
|
|
282
|
+
type="button"
|
|
283
|
+
class="dropdown-item d-flex align-items-center"
|
|
284
|
+
data-bs-theme-value="light"
|
|
285
|
+
aria-pressed="false"
|
|
286
|
+
>
|
|
287
|
+
<i class="bi bi-sun-fill me-2"></i>
|
|
288
|
+
Light
|
|
289
|
+
<i class="bi bi-check-lg ms-auto d-none"></i>
|
|
290
|
+
</button>
|
|
291
|
+
</li>
|
|
292
|
+
<li>
|
|
293
|
+
<button
|
|
294
|
+
type="button"
|
|
295
|
+
class="dropdown-item d-flex align-items-center"
|
|
296
|
+
data-bs-theme-value="dark"
|
|
297
|
+
aria-pressed="false"
|
|
298
|
+
>
|
|
299
|
+
<i class="bi bi-moon-fill me-2"></i>
|
|
300
|
+
Dark
|
|
301
|
+
<i class="bi bi-check-lg ms-auto d-none"></i>
|
|
302
|
+
</button>
|
|
303
|
+
</li>
|
|
304
|
+
<li>
|
|
305
|
+
<button
|
|
306
|
+
type="button"
|
|
307
|
+
class="dropdown-item d-flex align-items-center active"
|
|
308
|
+
data-bs-theme-value="auto"
|
|
309
|
+
aria-pressed="true"
|
|
310
|
+
>
|
|
311
|
+
<i class="bi bi-circle-half me-2"></i>
|
|
312
|
+
Auto
|
|
313
|
+
<i class="bi bi-check-lg ms-auto d-none"></i>
|
|
314
|
+
</button>
|
|
315
|
+
</li>
|
|
316
|
+
</ul>
|
|
317
|
+
</li>
|
|
318
|
+
<!--end::Color Mode Toggle-->
|
|
319
|
+
|
|
228
320
|
<!--begin::User Menu Dropdown-->
|
|
229
321
|
<li class="nav-item dropdown user-menu">
|
|
230
322
|
<a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
|
|
@@ -281,326 +373,83 @@
|
|
|
281
373
|
<!--end::Container-->
|
|
282
374
|
</nav>
|
|
283
375
|
<!--end::Header-->
|
|
284
|
-
<!--begin::Sidebar-->
|
|
376
|
+
<!--begin::Sidebar (docs mode)-->
|
|
285
377
|
<aside class="app-sidebar bg-body-secondary shadow" data-bs-theme="dark">
|
|
286
378
|
<!--begin::Sidebar Brand-->
|
|
287
379
|
<div class="sidebar-brand">
|
|
288
|
-
|
|
289
|
-
<a href="../../index.html" class="brand-link">
|
|
290
|
-
<!--begin::Brand Image-->
|
|
380
|
+
<a href="../../docs/introduction.html" class="brand-link">
|
|
291
381
|
<img
|
|
292
382
|
src="../../assets/img/AdminLTELogo.png"
|
|
293
383
|
alt="AdminLTE Logo"
|
|
294
384
|
class="brand-image opacity-75 shadow"
|
|
295
385
|
/>
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
<!--end::Brand Text-->
|
|
386
|
+
<span class="brand-text fw-light">
|
|
387
|
+
AdminLTE 4 <span class="opacity-75">· Docs</span>
|
|
388
|
+
</span>
|
|
300
389
|
</a>
|
|
301
|
-
<!--end::Brand Link-->
|
|
302
390
|
</div>
|
|
303
391
|
<!--end::Sidebar Brand-->
|
|
304
392
|
<!--begin::Sidebar Wrapper-->
|
|
305
393
|
<div class="sidebar-wrapper">
|
|
306
|
-
<nav class="mt-2">
|
|
394
|
+
<nav class="mt-2" aria-label="Documentation navigation">
|
|
307
395
|
<!--begin::Sidebar Menu-->
|
|
308
396
|
<ul
|
|
309
397
|
class="nav sidebar-menu flex-column"
|
|
310
398
|
data-lte-toggle="treeview"
|
|
311
|
-
role="navigation"
|
|
312
|
-
aria-label="Main navigation"
|
|
313
399
|
data-accordion="false"
|
|
314
|
-
id="navigation"
|
|
400
|
+
id="docs-navigation"
|
|
315
401
|
>
|
|
402
|
+
<li class="nav-header">START HERE</li>
|
|
316
403
|
<li class="nav-item">
|
|
317
|
-
<a href="
|
|
318
|
-
<i class="nav-icon bi bi-
|
|
319
|
-
<p>
|
|
320
|
-
Dashboard
|
|
321
|
-
<i class="nav-arrow bi bi-chevron-right"></i>
|
|
322
|
-
</p>
|
|
323
|
-
</a>
|
|
324
|
-
<ul class="nav nav-treeview">
|
|
325
|
-
<li class="nav-item">
|
|
326
|
-
<a href="../../index.html" class="nav-link">
|
|
327
|
-
<i class="nav-icon bi bi-circle"></i>
|
|
328
|
-
<p>Dashboard v1</p>
|
|
329
|
-
</a>
|
|
330
|
-
</li>
|
|
331
|
-
<li class="nav-item">
|
|
332
|
-
<a href="../../index2.html" class="nav-link">
|
|
333
|
-
<i class="nav-icon bi bi-circle"></i>
|
|
334
|
-
<p>Dashboard v2</p>
|
|
335
|
-
</a>
|
|
336
|
-
</li>
|
|
337
|
-
<li class="nav-item">
|
|
338
|
-
<a href="../../index3.html" class="nav-link">
|
|
339
|
-
<i class="nav-icon bi bi-circle"></i>
|
|
340
|
-
<p>Dashboard v3</p>
|
|
341
|
-
</a>
|
|
342
|
-
</li>
|
|
343
|
-
</ul>
|
|
344
|
-
</li>
|
|
345
|
-
<li class="nav-item">
|
|
346
|
-
<a href="../../generate/theme.html" class="nav-link">
|
|
347
|
-
<i class="nav-icon bi bi-palette"></i>
|
|
348
|
-
<p>Theme Generate</p>
|
|
404
|
+
<a href="../../docs/introduction.html" class="nav-link">
|
|
405
|
+
<i class="nav-icon bi bi-download"></i>
|
|
406
|
+
<p>Installation</p>
|
|
349
407
|
</a>
|
|
350
408
|
</li>
|
|
351
409
|
<li class="nav-item">
|
|
352
|
-
<a href="
|
|
353
|
-
<i class="nav-icon bi bi-
|
|
354
|
-
<p>
|
|
355
|
-
Widgets
|
|
356
|
-
<i class="nav-arrow bi bi-chevron-right"></i>
|
|
357
|
-
</p>
|
|
410
|
+
<a href="../../docs/getting-started.html" class="nav-link">
|
|
411
|
+
<i class="nav-icon bi bi-rocket-takeoff"></i>
|
|
412
|
+
<p>Getting Started</p>
|
|
358
413
|
</a>
|
|
359
|
-
<ul class="nav nav-treeview">
|
|
360
|
-
<li class="nav-item">
|
|
361
|
-
<a href="../../widgets/small-box.html" class="nav-link">
|
|
362
|
-
<i class="nav-icon bi bi-circle"></i>
|
|
363
|
-
<p>Small Box</p>
|
|
364
|
-
</a>
|
|
365
|
-
</li>
|
|
366
|
-
<li class="nav-item">
|
|
367
|
-
<a href="../../widgets/info-box.html" class="nav-link">
|
|
368
|
-
<i class="nav-icon bi bi-circle"></i>
|
|
369
|
-
<p>info Box</p>
|
|
370
|
-
</a>
|
|
371
|
-
</li>
|
|
372
|
-
<li class="nav-item">
|
|
373
|
-
<a href="../../widgets/cards.html" class="nav-link">
|
|
374
|
-
<i class="nav-icon bi bi-circle"></i>
|
|
375
|
-
<p>Cards</p>
|
|
376
|
-
</a>
|
|
377
|
-
</li>
|
|
378
|
-
</ul>
|
|
379
414
|
</li>
|
|
415
|
+
|
|
416
|
+
<li class="nav-header">FOUNDATIONS</li>
|
|
380
417
|
<li class="nav-item">
|
|
381
|
-
<a href="
|
|
382
|
-
<i class="nav-icon bi bi-
|
|
383
|
-
<p>
|
|
384
|
-
Layout Options
|
|
385
|
-
<span class="nav-badge badge text-bg-secondary me-3">7</span>
|
|
386
|
-
<i class="nav-arrow bi bi-chevron-right"></i>
|
|
387
|
-
</p>
|
|
418
|
+
<a href="../../docs/layout.html" class="nav-link">
|
|
419
|
+
<i class="nav-icon bi bi-grip-horizontal"></i>
|
|
420
|
+
<p>Layout Classes</p>
|
|
388
421
|
</a>
|
|
389
|
-
<ul class="nav nav-treeview">
|
|
390
|
-
<li class="nav-item">
|
|
391
|
-
<a href="../../layout/unfixed-sidebar.html" class="nav-link">
|
|
392
|
-
<i class="nav-icon bi bi-circle"></i>
|
|
393
|
-
<p>Default Sidebar</p>
|
|
394
|
-
</a>
|
|
395
|
-
</li>
|
|
396
|
-
<li class="nav-item">
|
|
397
|
-
<a href="../../layout/fixed-sidebar.html" class="nav-link">
|
|
398
|
-
<i class="nav-icon bi bi-circle"></i>
|
|
399
|
-
<p>Fixed Sidebar</p>
|
|
400
|
-
</a>
|
|
401
|
-
</li>
|
|
402
|
-
<li class="nav-item">
|
|
403
|
-
<a href="../../layout/fixed-header.html" class="nav-link">
|
|
404
|
-
<i class="nav-icon bi bi-circle"></i>
|
|
405
|
-
<p>Fixed Header</p>
|
|
406
|
-
</a>
|
|
407
|
-
</li>
|
|
408
|
-
<li class="nav-item">
|
|
409
|
-
<a href="../../layout/fixed-footer.html" class="nav-link">
|
|
410
|
-
<i class="nav-icon bi bi-circle"></i>
|
|
411
|
-
<p>Fixed Footer</p>
|
|
412
|
-
</a>
|
|
413
|
-
</li>
|
|
414
|
-
<li class="nav-item">
|
|
415
|
-
<a href="../../layout/fixed-complete.html" class="nav-link">
|
|
416
|
-
<i class="nav-icon bi bi-circle"></i>
|
|
417
|
-
<p>Fixed Complete</p>
|
|
418
|
-
</a>
|
|
419
|
-
</li>
|
|
420
|
-
<li class="nav-item">
|
|
421
|
-
<a href="../../layout/layout-custom-area.html" class="nav-link">
|
|
422
|
-
<i class="nav-icon bi bi-circle"></i>
|
|
423
|
-
<p>Layout <small>+ Custom Area </small></p>
|
|
424
|
-
</a>
|
|
425
|
-
</li>
|
|
426
|
-
<li class="nav-item">
|
|
427
|
-
<a href="../../layout/sidebar-mini.html" class="nav-link">
|
|
428
|
-
<i class="nav-icon bi bi-circle"></i>
|
|
429
|
-
<p>Sidebar Mini</p>
|
|
430
|
-
</a>
|
|
431
|
-
</li>
|
|
432
|
-
<li class="nav-item">
|
|
433
|
-
<a href="../../layout/collapsed-sidebar.html" class="nav-link">
|
|
434
|
-
<i class="nav-icon bi bi-circle"></i>
|
|
435
|
-
<p>Sidebar Mini <small>+ Collapsed</small></p>
|
|
436
|
-
</a>
|
|
437
|
-
</li>
|
|
438
|
-
<li class="nav-item">
|
|
439
|
-
<a href="../../layout/collapsed-sidebar-without-hover.html" class="nav-link">
|
|
440
|
-
<i class="nav-icon bi bi-circle"></i>
|
|
441
|
-
<p>Sidebar Mini <small>+ Collapsed + No Hover</small></p>
|
|
442
|
-
</a>
|
|
443
|
-
</li>
|
|
444
|
-
<li class="nav-item">
|
|
445
|
-
<a href="../../layout/logo-switch.html" class="nav-link">
|
|
446
|
-
<i class="nav-icon bi bi-circle"></i>
|
|
447
|
-
<p>Sidebar Mini <small>+ Logo Switch</small></p>
|
|
448
|
-
</a>
|
|
449
|
-
</li>
|
|
450
|
-
<li class="nav-item">
|
|
451
|
-
<a href="../../layout/layout-rtl.html" class="nav-link">
|
|
452
|
-
<i class="nav-icon bi bi-circle"></i>
|
|
453
|
-
<p>Layout RTL</p>
|
|
454
|
-
</a>
|
|
455
|
-
</li>
|
|
456
|
-
</ul>
|
|
457
422
|
</li>
|
|
458
423
|
<li class="nav-item">
|
|
459
|
-
<a href="
|
|
460
|
-
<i class="nav-icon bi bi-
|
|
461
|
-
<p>
|
|
462
|
-
UI Elements
|
|
463
|
-
<i class="nav-arrow bi bi-chevron-right"></i>
|
|
464
|
-
</p>
|
|
424
|
+
<a href="../../docs/layout-blueprint.html" class="nav-link">
|
|
425
|
+
<i class="nav-icon bi bi-diagram-3"></i>
|
|
426
|
+
<p>Layout Blueprint</p>
|
|
465
427
|
</a>
|
|
466
|
-
<ul class="nav nav-treeview">
|
|
467
|
-
<li class="nav-item">
|
|
468
|
-
<a href="../../UI/general.html" class="nav-link">
|
|
469
|
-
<i class="nav-icon bi bi-circle"></i>
|
|
470
|
-
<p>General</p>
|
|
471
|
-
</a>
|
|
472
|
-
</li>
|
|
473
|
-
<li class="nav-item">
|
|
474
|
-
<a href="../../UI/icons.html" class="nav-link">
|
|
475
|
-
<i class="nav-icon bi bi-circle"></i>
|
|
476
|
-
<p>Icons</p>
|
|
477
|
-
</a>
|
|
478
|
-
</li>
|
|
479
|
-
<li class="nav-item">
|
|
480
|
-
<a href="../../UI/timeline.html" class="nav-link">
|
|
481
|
-
<i class="nav-icon bi bi-circle"></i>
|
|
482
|
-
<p>Timeline</p>
|
|
483
|
-
</a>
|
|
484
|
-
</li>
|
|
485
|
-
</ul>
|
|
486
428
|
</li>
|
|
487
429
|
<li class="nav-item">
|
|
488
|
-
<a href="
|
|
489
|
-
<i class="nav-icon bi bi-
|
|
490
|
-
<p>
|
|
491
|
-
Forms
|
|
492
|
-
<i class="nav-arrow bi bi-chevron-right"></i>
|
|
493
|
-
</p>
|
|
430
|
+
<a href="../../docs/customization.html" class="nav-link">
|
|
431
|
+
<i class="nav-icon bi bi-palette"></i>
|
|
432
|
+
<p>Customization</p>
|
|
494
433
|
</a>
|
|
495
|
-
<ul class="nav nav-treeview">
|
|
496
|
-
<li class="nav-item">
|
|
497
|
-
<a href="../../forms/general.html" class="nav-link">
|
|
498
|
-
<i class="nav-icon bi bi-circle"></i>
|
|
499
|
-
<p>General Elements</p>
|
|
500
|
-
</a>
|
|
501
|
-
</li>
|
|
502
|
-
</ul>
|
|
503
434
|
</li>
|
|
504
435
|
<li class="nav-item">
|
|
505
|
-
<a href="
|
|
506
|
-
<i class="nav-icon bi bi-
|
|
507
|
-
<p>
|
|
508
|
-
Tables
|
|
509
|
-
<i class="nav-arrow bi bi-chevron-right"></i>
|
|
510
|
-
</p>
|
|
436
|
+
<a href="../../docs/color-mode.html" class="nav-link">
|
|
437
|
+
<i class="nav-icon bi bi-star-half"></i>
|
|
438
|
+
<p>Color Mode</p>
|
|
511
439
|
</a>
|
|
512
|
-
<ul class="nav nav-treeview">
|
|
513
|
-
<li class="nav-item">
|
|
514
|
-
<a href="../../tables/simple.html" class="nav-link">
|
|
515
|
-
<i class="nav-icon bi bi-circle"></i>
|
|
516
|
-
<p>Simple Tables</p>
|
|
517
|
-
</a>
|
|
518
|
-
</li>
|
|
519
|
-
</ul>
|
|
520
440
|
</li>
|
|
521
|
-
|
|
522
|
-
<li class="nav-header">EXAMPLES</li>
|
|
523
441
|
<li class="nav-item">
|
|
524
|
-
<a href="
|
|
525
|
-
<i class="nav-icon bi bi-
|
|
526
|
-
<p>
|
|
527
|
-
Auth
|
|
528
|
-
<i class="nav-arrow bi bi-chevron-right"></i>
|
|
529
|
-
</p>
|
|
442
|
+
<a href="../../docs/rtl.html" class="nav-link">
|
|
443
|
+
<i class="nav-icon bi bi-text-paragraph"></i>
|
|
444
|
+
<p>RTL Support</p>
|
|
530
445
|
</a>
|
|
531
|
-
<ul class="nav nav-treeview">
|
|
532
|
-
<li class="nav-item">
|
|
533
|
-
<a href="#" class="nav-link">
|
|
534
|
-
<i class="nav-icon bi bi-box-arrow-in-right"></i>
|
|
535
|
-
<p>
|
|
536
|
-
Version 1
|
|
537
|
-
<i class="nav-arrow bi bi-chevron-right"></i>
|
|
538
|
-
</p>
|
|
539
|
-
</a>
|
|
540
|
-
<ul class="nav nav-treeview">
|
|
541
|
-
<li class="nav-item">
|
|
542
|
-
<a href="../../examples/login.html" class="nav-link">
|
|
543
|
-
<i class="nav-icon bi bi-circle"></i>
|
|
544
|
-
<p>Login</p>
|
|
545
|
-
</a>
|
|
546
|
-
</li>
|
|
547
|
-
<li class="nav-item">
|
|
548
|
-
<a href="../../examples/register.html" class="nav-link">
|
|
549
|
-
<i class="nav-icon bi bi-circle"></i>
|
|
550
|
-
<p>Register</p>
|
|
551
|
-
</a>
|
|
552
|
-
</li>
|
|
553
|
-
</ul>
|
|
554
|
-
</li>
|
|
555
|
-
<li class="nav-item">
|
|
556
|
-
<a href="#" class="nav-link">
|
|
557
|
-
<i class="nav-icon bi bi-box-arrow-in-right"></i>
|
|
558
|
-
<p>
|
|
559
|
-
Version 2
|
|
560
|
-
<i class="nav-arrow bi bi-chevron-right"></i>
|
|
561
|
-
</p>
|
|
562
|
-
</a>
|
|
563
|
-
<ul class="nav nav-treeview">
|
|
564
|
-
<li class="nav-item">
|
|
565
|
-
<a href="../../examples/login-v2.html" class="nav-link">
|
|
566
|
-
<i class="nav-icon bi bi-circle"></i>
|
|
567
|
-
<p>Login</p>
|
|
568
|
-
</a>
|
|
569
|
-
</li>
|
|
570
|
-
<li class="nav-item">
|
|
571
|
-
<a href="../../examples/register-v2.html" class="nav-link">
|
|
572
|
-
<i class="nav-icon bi bi-circle"></i>
|
|
573
|
-
<p>Register</p>
|
|
574
|
-
</a>
|
|
575
|
-
</li>
|
|
576
|
-
</ul>
|
|
577
|
-
</li>
|
|
578
|
-
<li class="nav-item">
|
|
579
|
-
<a href="../../examples/lockscreen.html" class="nav-link">
|
|
580
|
-
<i class="nav-icon bi bi-circle"></i>
|
|
581
|
-
<p>Lockscreen</p>
|
|
582
|
-
</a>
|
|
583
|
-
</li>
|
|
584
|
-
</ul>
|
|
585
446
|
</li>
|
|
586
447
|
|
|
587
|
-
<li class="nav-header">
|
|
448
|
+
<li class="nav-header">BUILDING</li>
|
|
588
449
|
<li class="nav-item">
|
|
589
|
-
<a href="../../docs/
|
|
590
|
-
<i class="nav-icon bi bi-
|
|
591
|
-
<p>
|
|
592
|
-
</a>
|
|
593
|
-
</li>
|
|
594
|
-
<li class="nav-item">
|
|
595
|
-
<a href="../../docs/layout.html" class="nav-link">
|
|
596
|
-
<i class="nav-icon bi bi-grip-horizontal"></i>
|
|
597
|
-
<p>Layout</p>
|
|
598
|
-
</a>
|
|
599
|
-
</li>
|
|
600
|
-
<li class="nav-item">
|
|
601
|
-
<a href="../../docs/color-mode.html" class="nav-link">
|
|
602
|
-
<i class="nav-icon bi bi-star-half"></i>
|
|
603
|
-
<p>Color Mode</p>
|
|
450
|
+
<a href="../../docs/recipes.html" class="nav-link">
|
|
451
|
+
<i class="nav-icon bi bi-clipboard-check"></i>
|
|
452
|
+
<p>Recipes</p>
|
|
604
453
|
</a>
|
|
605
454
|
</li>
|
|
606
455
|
<li class="nav-item">
|
|
@@ -630,11 +479,17 @@
|
|
|
630
479
|
<a href="#" class="nav-link active">
|
|
631
480
|
<i class="nav-icon bi bi-filetype-js"></i>
|
|
632
481
|
<p>
|
|
633
|
-
|
|
482
|
+
JavaScript Plugins
|
|
634
483
|
<i class="nav-arrow bi bi-chevron-right"></i>
|
|
635
484
|
</p>
|
|
636
485
|
</a>
|
|
637
486
|
<ul class="nav nav-treeview">
|
|
487
|
+
<li class="nav-item">
|
|
488
|
+
<a href="../../docs/javascript/plugins-overview.html" class="nav-link">
|
|
489
|
+
<i class="nav-icon bi bi-circle"></i>
|
|
490
|
+
<p>Overview</p>
|
|
491
|
+
</a>
|
|
492
|
+
</li>
|
|
638
493
|
<li class="nav-item">
|
|
639
494
|
<a href="../../docs/javascript/layout.html" class="nav-link">
|
|
640
495
|
<i class="nav-icon bi bi-circle"></i>
|
|
@@ -680,122 +535,83 @@
|
|
|
680
535
|
</ul>
|
|
681
536
|
</li>
|
|
682
537
|
<li class="nav-item">
|
|
683
|
-
<a href="../../docs/
|
|
684
|
-
<i class="nav-icon bi bi-
|
|
685
|
-
<p>
|
|
538
|
+
<a href="../../docs/integrations.html" class="nav-link">
|
|
539
|
+
<i class="nav-icon bi bi-puzzle"></i>
|
|
540
|
+
<p>Integrations</p>
|
|
686
541
|
</a>
|
|
687
542
|
</li>
|
|
543
|
+
|
|
544
|
+
<li class="nav-header">SHIPPING</li>
|
|
688
545
|
<li class="nav-item">
|
|
689
|
-
<a href="../../docs/
|
|
690
|
-
<i class="nav-icon bi bi-
|
|
691
|
-
<p>
|
|
546
|
+
<a href="../../docs/migration.html" class="nav-link">
|
|
547
|
+
<i class="nav-icon bi bi-arrow-up-right-square"></i>
|
|
548
|
+
<p>Migration from v3</p>
|
|
692
549
|
</a>
|
|
693
550
|
</li>
|
|
694
551
|
<li class="nav-item">
|
|
695
|
-
<a href="../../docs/
|
|
696
|
-
<i class="nav-icon bi bi-
|
|
697
|
-
<p>
|
|
552
|
+
<a href="../../docs/deployment.html" class="nav-link">
|
|
553
|
+
<i class="nav-icon bi bi-cloud-upload"></i>
|
|
554
|
+
<p>Deployment</p>
|
|
698
555
|
</a>
|
|
699
556
|
</li>
|
|
700
557
|
<li class="nav-item">
|
|
701
|
-
<a href="../../docs/
|
|
702
|
-
<i class="nav-icon bi bi-
|
|
703
|
-
<p>
|
|
558
|
+
<a href="../../docs/browser-support.html" class="nav-link">
|
|
559
|
+
<i class="nav-icon bi bi-browser-chrome"></i>
|
|
560
|
+
<p>Browser Support</p>
|
|
704
561
|
</a>
|
|
705
562
|
</li>
|
|
706
563
|
|
|
707
|
-
<li class="nav-header">
|
|
708
|
-
<li class="nav-item">
|
|
709
|
-
<a href="#" class="nav-link">
|
|
710
|
-
<i class="nav-icon bi bi-circle-fill"></i>
|
|
711
|
-
<p>Level 1</p>
|
|
712
|
-
</a>
|
|
713
|
-
</li>
|
|
564
|
+
<li class="nav-header">RESOURCES</li>
|
|
714
565
|
<li class="nav-item">
|
|
715
|
-
<a href="
|
|
716
|
-
<i class="nav-icon bi bi-circle
|
|
717
|
-
<p>
|
|
718
|
-
Level 1
|
|
719
|
-
<i class="nav-arrow bi bi-chevron-right"></i>
|
|
720
|
-
</p>
|
|
721
|
-
</a>
|
|
722
|
-
<ul class="nav nav-treeview">
|
|
723
|
-
<li class="nav-item">
|
|
724
|
-
<a href="#" class="nav-link">
|
|
725
|
-
<i class="nav-icon bi bi-circle"></i>
|
|
726
|
-
<p>Level 2</p>
|
|
727
|
-
</a>
|
|
728
|
-
</li>
|
|
729
|
-
<li class="nav-item">
|
|
730
|
-
<a href="#" class="nav-link">
|
|
731
|
-
<i class="nav-icon bi bi-circle"></i>
|
|
732
|
-
<p>
|
|
733
|
-
Level 2
|
|
734
|
-
<i class="nav-arrow bi bi-chevron-right"></i>
|
|
735
|
-
</p>
|
|
736
|
-
</a>
|
|
737
|
-
<ul class="nav nav-treeview">
|
|
738
|
-
<li class="nav-item">
|
|
739
|
-
<a href="#" class="nav-link">
|
|
740
|
-
<i class="nav-icon bi bi-record-circle-fill"></i>
|
|
741
|
-
<p>Level 3</p>
|
|
742
|
-
</a>
|
|
743
|
-
</li>
|
|
744
|
-
<li class="nav-item">
|
|
745
|
-
<a href="#" class="nav-link">
|
|
746
|
-
<i class="nav-icon bi bi-record-circle-fill"></i>
|
|
747
|
-
<p>Level 3</p>
|
|
748
|
-
</a>
|
|
749
|
-
</li>
|
|
750
|
-
<li class="nav-item">
|
|
751
|
-
<a href="#" class="nav-link">
|
|
752
|
-
<i class="nav-icon bi bi-record-circle-fill"></i>
|
|
753
|
-
<p>Level 3</p>
|
|
754
|
-
</a>
|
|
755
|
-
</li>
|
|
756
|
-
</ul>
|
|
757
|
-
</li>
|
|
758
|
-
<li class="nav-item">
|
|
759
|
-
<a href="#" class="nav-link">
|
|
760
|
-
<i class="nav-icon bi bi-circle"></i>
|
|
761
|
-
<p>Level 2</p>
|
|
762
|
-
</a>
|
|
763
|
-
</li>
|
|
764
|
-
</ul>
|
|
765
|
-
</li>
|
|
766
|
-
<li class="nav-item">
|
|
767
|
-
<a href="#" class="nav-link">
|
|
768
|
-
<i class="nav-icon bi bi-circle-fill"></i>
|
|
769
|
-
<p>Level 1</p>
|
|
566
|
+
<a href="../../docs/faq.html" class="nav-link">
|
|
567
|
+
<i class="nav-icon bi bi-question-circle"></i>
|
|
568
|
+
<p>FAQ</p>
|
|
770
569
|
</a>
|
|
771
570
|
</li>
|
|
772
|
-
|
|
773
|
-
<li class="nav-header">LABELS</li>
|
|
774
571
|
<li class="nav-item">
|
|
775
|
-
<a href="
|
|
776
|
-
<i class="nav-icon bi bi-
|
|
777
|
-
<p
|
|
572
|
+
<a href="../../docs/how-to-contribute.html" class="nav-link">
|
|
573
|
+
<i class="nav-icon bi bi-people"></i>
|
|
574
|
+
<p>Contributing</p>
|
|
778
575
|
</a>
|
|
779
576
|
</li>
|
|
780
577
|
<li class="nav-item">
|
|
781
|
-
<a href="
|
|
782
|
-
<i class="nav-icon bi bi-
|
|
783
|
-
<p>
|
|
578
|
+
<a href="../../docs/license.html" class="nav-link">
|
|
579
|
+
<i class="nav-icon bi bi-patch-check"></i>
|
|
580
|
+
<p>License</p>
|
|
784
581
|
</a>
|
|
785
582
|
</li>
|
|
786
583
|
<li class="nav-item">
|
|
787
|
-
<a
|
|
788
|
-
|
|
789
|
-
|
|
584
|
+
<a
|
|
585
|
+
href="https://github.com/ColorlibHQ/AdminLTE"
|
|
586
|
+
target="_blank"
|
|
587
|
+
rel="noopener"
|
|
588
|
+
class="nav-link"
|
|
589
|
+
>
|
|
590
|
+
<i class="nav-icon bi bi-github"></i>
|
|
591
|
+
<p>
|
|
592
|
+
GitHub
|
|
593
|
+
<i class="bi bi-box-arrow-up-right ms-1" aria-hidden="true"></i>
|
|
594
|
+
</p>
|
|
790
595
|
</a>
|
|
791
596
|
</li>
|
|
792
597
|
</ul>
|
|
793
598
|
<!--end::Sidebar Menu-->
|
|
599
|
+
|
|
600
|
+
<!-- Back to preview CTA (bottom of sidebar) -->
|
|
601
|
+
<div class="p-3 mt-3 border-top border-secondary border-opacity-25">
|
|
602
|
+
<a
|
|
603
|
+
href="../../index.html"
|
|
604
|
+
class="btn btn-sm btn-outline-light w-100 d-flex align-items-center justify-content-center gap-2"
|
|
605
|
+
>
|
|
606
|
+
<i class="bi bi-arrow-left" aria-hidden="true"></i>
|
|
607
|
+
Back to live preview
|
|
608
|
+
</a>
|
|
609
|
+
</div>
|
|
794
610
|
</nav>
|
|
795
611
|
</div>
|
|
796
612
|
<!--end::Sidebar Wrapper-->
|
|
797
613
|
</aside>
|
|
798
|
-
<!--end::Sidebar-->
|
|
614
|
+
<!--end::Sidebar (docs mode)-->
|
|
799
615
|
<!--begin::App Main-->
|
|
800
616
|
<main class="app-main">
|
|
801
617
|
<!--begin::App Content Header-->
|
|
@@ -823,41 +639,251 @@
|
|
|
823
639
|
<div class="app-content">
|
|
824
640
|
<!--begin::Container-->
|
|
825
641
|
<div class="container-fluid">
|
|
826
|
-
<
|
|
827
|
-
|
|
828
|
-
|
|
829
|
-
|
|
830
|
-
|
|
831
|
-
|
|
832
|
-
|
|
833
|
-
|
|
834
|
-
|
|
835
|
-
|
|
836
|
-
|
|
837
|
-
|
|
838
|
-
|
|
839
|
-
|
|
840
|
-
|
|
841
|
-
|
|
842
|
-
|
|
843
|
-
<
|
|
844
|
-
|
|
845
|
-
|
|
846
|
-
|
|
847
|
-
|
|
642
|
+
<div class="row">
|
|
643
|
+
<div class="col-12">
|
|
644
|
+
<div class="card">
|
|
645
|
+
<div class="card-body">
|
|
646
|
+
<p>
|
|
647
|
+
The Treeview plugin converts a nested list into a collapsible tree where
|
|
648
|
+
submenus expand and contract on click. It’s what powers the sidebar navigation
|
|
649
|
+
in the demo dashboards.
|
|
650
|
+
</p>
|
|
651
|
+
<h5 id="usage">Usage</h5>
|
|
652
|
+
<h6 id="data-api">Data API</h6>
|
|
653
|
+
<p>
|
|
654
|
+
Add <code>data-lte-toggle="treeview"</code> to the parent
|
|
655
|
+
<code><ul></code> or <code><ol></code>. Inside, mark items that
|
|
656
|
+
have children with <code>.nav-item</code> and put the submenu in a nested
|
|
657
|
+
<code><ul class="nav-treeview"></code>:
|
|
658
|
+
</p>
|
|
659
|
+
<pre
|
|
660
|
+
class="astro-code dark-plus"
|
|
661
|
+
style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto"
|
|
662
|
+
tabindex="0"
|
|
663
|
+
data-language="html"
|
|
664
|
+
><code><span class="line"><span style="color:#808080"><</span><span style="color:#569CD6">ul</span><span style="color:#9CDCFE"> class</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">"nav sidebar-menu flex-column"</span><span style="color:#9CDCFE"> data-lte-toggle</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">"treeview"</span><span style="color:#9CDCFE"> role</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">"menu"</span><span style="color:#808080">></span></span>
|
|
665
|
+
<span class="line"><span style="color:#808080"> <</span><span style="color:#569CD6">li</span><span style="color:#9CDCFE"> class</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">"nav-item"</span><span style="color:#808080">></span></span>
|
|
666
|
+
<span class="line"><span style="color:#808080"> <</span><span style="color:#569CD6">a</span><span style="color:#9CDCFE"> class</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">"nav-link"</span><span style="color:#9CDCFE"> href</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">"#"</span><span style="color:#808080">></span></span>
|
|
667
|
+
<span class="line"><span style="color:#808080"> <</span><span style="color:#569CD6">i</span><span style="color:#9CDCFE"> class</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">"nav-icon bi bi-speedometer"</span><span style="color:#808080">></</span><span style="color:#569CD6">i</span><span style="color:#808080">></span></span>
|
|
668
|
+
<span class="line"><span style="color:#808080"> <</span><span style="color:#569CD6">p</span><span style="color:#808080">></span><span style="color:#D4D4D4">Dashboard</span><span style="color:#808080"></</span><span style="color:#569CD6">p</span><span style="color:#808080">></span></span>
|
|
669
|
+
<span class="line"><span style="color:#808080"> </</span><span style="color:#569CD6">a</span><span style="color:#808080">></span></span>
|
|
670
|
+
<span class="line"><span style="color:#808080"> </</span><span style="color:#569CD6">li</span><span style="color:#808080">></span></span>
|
|
671
|
+
<span class="line"><span style="color:#808080"> <</span><span style="color:#569CD6">li</span><span style="color:#9CDCFE"> class</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">"nav-item"</span><span style="color:#808080">></span></span>
|
|
672
|
+
<span class="line"><span style="color:#808080"> <</span><span style="color:#569CD6">a</span><span style="color:#9CDCFE"> href</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">"#"</span><span style="color:#9CDCFE"> class</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">"nav-link"</span><span style="color:#808080">></span></span>
|
|
673
|
+
<span class="line"><span style="color:#808080"> <</span><span style="color:#569CD6">i</span><span style="color:#9CDCFE"> class</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">"nav-icon bi bi-folder"</span><span style="color:#808080">></</span><span style="color:#569CD6">i</span><span style="color:#808080">></span></span>
|
|
674
|
+
<span class="line"><span style="color:#808080"> <</span><span style="color:#569CD6">p</span><span style="color:#808080">></span></span>
|
|
675
|
+
<span class="line"><span style="color:#D4D4D4"> Reports</span></span>
|
|
676
|
+
<span class="line"><span style="color:#808080"> <</span><span style="color:#569CD6">i</span><span style="color:#9CDCFE"> class</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">"nav-arrow bi bi-chevron-right"</span><span style="color:#808080">></</span><span style="color:#569CD6">i</span><span style="color:#808080">></span></span>
|
|
677
|
+
<span class="line"><span style="color:#808080"> </</span><span style="color:#569CD6">p</span><span style="color:#808080">></span></span>
|
|
678
|
+
<span class="line"><span style="color:#808080"> </</span><span style="color:#569CD6">a</span><span style="color:#808080">></span></span>
|
|
679
|
+
<span class="line"><span style="color:#808080"> <</span><span style="color:#569CD6">ul</span><span style="color:#9CDCFE"> class</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">"nav nav-treeview"</span><span style="color:#808080">></span></span>
|
|
680
|
+
<span class="line"><span style="color:#808080"> <</span><span style="color:#569CD6">li</span><span style="color:#9CDCFE"> class</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">"nav-item"</span><span style="color:#808080">></span></span>
|
|
681
|
+
<span class="line"><span style="color:#808080"> <</span><span style="color:#569CD6">a</span><span style="color:#9CDCFE"> href</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">"#"</span><span style="color:#9CDCFE"> class</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">"nav-link"</span><span style="color:#808080">><</span><span style="color:#569CD6">i</span><span style="color:#9CDCFE"> class</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">"nav-icon bi bi-circle"</span><span style="color:#808080">></</span><span style="color:#569CD6">i</span><span style="color:#808080">><</span><span style="color:#569CD6">p</span><span style="color:#808080">></span><span style="color:#D4D4D4">Sales</span><span style="color:#808080"></</span><span style="color:#569CD6">p</span><span style="color:#808080">></</span><span style="color:#569CD6">a</span><span style="color:#808080">></span></span>
|
|
682
|
+
<span class="line"><span style="color:#808080"> </</span><span style="color:#569CD6">li</span><span style="color:#808080">></span></span>
|
|
683
|
+
<span class="line"><span style="color:#808080"> <</span><span style="color:#569CD6">li</span><span style="color:#9CDCFE"> class</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">"nav-item"</span><span style="color:#808080">></span></span>
|
|
684
|
+
<span class="line"><span style="color:#808080"> <</span><span style="color:#569CD6">a</span><span style="color:#9CDCFE"> href</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">"#"</span><span style="color:#9CDCFE"> class</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">"nav-link"</span><span style="color:#808080">><</span><span style="color:#569CD6">i</span><span style="color:#9CDCFE"> class</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">"nav-icon bi bi-circle"</span><span style="color:#808080">></</span><span style="color:#569CD6">i</span><span style="color:#808080">><</span><span style="color:#569CD6">p</span><span style="color:#808080">></span><span style="color:#D4D4D4">Traffic</span><span style="color:#808080"></</span><span style="color:#569CD6">p</span><span style="color:#808080">></</span><span style="color:#569CD6">a</span><span style="color:#808080">></span></span>
|
|
685
|
+
<span class="line"><span style="color:#808080"> </</span><span style="color:#569CD6">li</span><span style="color:#808080">></span></span>
|
|
848
686
|
<span class="line"><span style="color:#808080"> </</span><span style="color:#569CD6">ul</span><span style="color:#808080">></span></span>
|
|
849
687
|
<span class="line"><span style="color:#808080"> </</span><span style="color:#569CD6">li</span><span style="color:#808080">></span></span>
|
|
850
688
|
<span class="line"><span style="color:#808080"></</span><span style="color:#569CD6">ul</span><span style="color:#808080">></span></span></code></pre>
|
|
851
|
-
|
|
852
|
-
|
|
853
|
-
|
|
854
|
-
|
|
855
|
-
|
|
856
|
-
|
|
857
|
-
|
|
858
|
-
|
|
859
|
-
|
|
860
|
-
|
|
689
|
+
<p>
|
|
690
|
+
To start with a submenu pre-expanded, add <code>menu-open</code> to its
|
|
691
|
+
<code>.nav-item</code>.
|
|
692
|
+
</p>
|
|
693
|
+
<h5 id="configuration">Configuration</h5>
|
|
694
|
+
<p>
|
|
695
|
+
Configure via <code>data-*</code> attributes on the parent
|
|
696
|
+
<code><ul></code>:
|
|
697
|
+
</p>
|
|
698
|
+
|
|
699
|
+
<table>
|
|
700
|
+
<thead>
|
|
701
|
+
<tr>
|
|
702
|
+
<th>Attribute</th>
|
|
703
|
+
<th>Default</th>
|
|
704
|
+
<th>Description</th>
|
|
705
|
+
</tr>
|
|
706
|
+
</thead>
|
|
707
|
+
<tbody>
|
|
708
|
+
<tr>
|
|
709
|
+
<td><code>data-accordion</code></td>
|
|
710
|
+
<td><code>true</code></td>
|
|
711
|
+
<td>
|
|
712
|
+
Close other open submenus when one opens. Set <code>false</code> for
|
|
713
|
+
non-accordion behaviour (multiple submenus open at once).
|
|
714
|
+
</td>
|
|
715
|
+
</tr>
|
|
716
|
+
<tr>
|
|
717
|
+
<td><code>data-animation-speed</code></td>
|
|
718
|
+
<td><code>300</code></td>
|
|
719
|
+
<td>
|
|
720
|
+
Slide animation duration in milliseconds. Set <code>0</code> to disable
|
|
721
|
+
animation.
|
|
722
|
+
</td>
|
|
723
|
+
</tr>
|
|
724
|
+
</tbody>
|
|
725
|
+
</table>
|
|
726
|
+
<pre
|
|
727
|
+
class="astro-code dark-plus"
|
|
728
|
+
style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto"
|
|
729
|
+
tabindex="0"
|
|
730
|
+
data-language="html"
|
|
731
|
+
><code><span class="line"><span style="color:#6A9955"><!-- Non-accordion mode: multiple submenus can stay open --></span></span>
|
|
732
|
+
<span class="line"><span style="color:#808080"><</span><span style="color:#569CD6">ul</span><span style="color:#9CDCFE"> class</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">"nav sidebar-menu"</span><span style="color:#9CDCFE"> data-lte-toggle</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">"treeview"</span><span style="color:#9CDCFE"> data-accordion</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">"false"</span><span style="color:#808080">></span></span>
|
|
733
|
+
<span class="line"><span style="color:#D4D4D4"> …</span></span>
|
|
734
|
+
<span class="line"><span style="color:#808080"></</span><span style="color:#569CD6">ul</span><span style="color:#808080">></span></span>
|
|
735
|
+
<span class="line"></span>
|
|
736
|
+
<span class="line"><span style="color:#6A9955"><!-- Faster animation --></span></span>
|
|
737
|
+
<span class="line"><span style="color:#808080"><</span><span style="color:#569CD6">ul</span><span style="color:#9CDCFE"> class</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">"nav sidebar-menu"</span><span style="color:#9CDCFE"> data-lte-toggle</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">"treeview"</span><span style="color:#9CDCFE"> data-animation-speed</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">"150"</span><span style="color:#808080">></span></span>
|
|
738
|
+
<span class="line"><span style="color:#D4D4D4"> …</span></span>
|
|
739
|
+
<span class="line"><span style="color:#808080"></</span><span style="color:#569CD6">ul</span><span style="color:#808080">></span></span></code></pre>
|
|
740
|
+
<h5 id="css-classes">CSS Classes</h5>
|
|
741
|
+
|
|
742
|
+
<table>
|
|
743
|
+
<thead>
|
|
744
|
+
<tr>
|
|
745
|
+
<th>Class</th>
|
|
746
|
+
<th>Applied to</th>
|
|
747
|
+
<th>Description</th>
|
|
748
|
+
</tr>
|
|
749
|
+
</thead>
|
|
750
|
+
<tbody>
|
|
751
|
+
<tr>
|
|
752
|
+
<td><code>menu-open</code></td>
|
|
753
|
+
<td><code>.nav-item</code> (the parent of a submenu)</td>
|
|
754
|
+
<td>The submenu is currently expanded.</td>
|
|
755
|
+
</tr>
|
|
756
|
+
<tr>
|
|
757
|
+
<td><code>nav-treeview</code></td>
|
|
758
|
+
<td><code><ul></code> (nested)</td>
|
|
759
|
+
<td>Marks a submenu so the plugin recognises it.</td>
|
|
760
|
+
</tr>
|
|
761
|
+
<tr>
|
|
762
|
+
<td><code>nav-arrow</code></td>
|
|
763
|
+
<td><code><i></code> inside <code>.nav-link</code></td>
|
|
764
|
+
<td>The chevron icon that rotates when the submenu opens.</td>
|
|
765
|
+
</tr>
|
|
766
|
+
</tbody>
|
|
767
|
+
</table>
|
|
768
|
+
<h5 id="events">Events</h5>
|
|
769
|
+
|
|
770
|
+
<table>
|
|
771
|
+
<thead>
|
|
772
|
+
<tr>
|
|
773
|
+
<th>Event</th>
|
|
774
|
+
<th>Description</th>
|
|
775
|
+
</tr>
|
|
776
|
+
</thead>
|
|
777
|
+
<tbody>
|
|
778
|
+
<tr>
|
|
779
|
+
<td><code>expanded.lte.treeview</code></td>
|
|
780
|
+
<td>Fired on the <code>.nav-item</code> when its submenu opens.</td>
|
|
781
|
+
</tr>
|
|
782
|
+
<tr>
|
|
783
|
+
<td><code>collapsed.lte.treeview</code></td>
|
|
784
|
+
<td>Fired on the <code>.nav-item</code> when its submenu closes.</td>
|
|
785
|
+
</tr>
|
|
786
|
+
<tr>
|
|
787
|
+
<td><code>load.lte.treeview</code></td>
|
|
788
|
+
<td>
|
|
789
|
+
Fired once per page load for any submenu that’s already expanded via the
|
|
790
|
+
<code>menu-open</code> class.
|
|
791
|
+
</td>
|
|
792
|
+
</tr>
|
|
793
|
+
</tbody>
|
|
794
|
+
</table>
|
|
795
|
+
<pre
|
|
796
|
+
class="astro-code dark-plus"
|
|
797
|
+
style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto"
|
|
798
|
+
tabindex="0"
|
|
799
|
+
data-language="js"
|
|
800
|
+
><code><span class="line"><span style="color:#9CDCFE">document</span><span style="color:#D4D4D4">.</span><span style="color:#DCDCAA">addEventListener</span><span style="color:#D4D4D4">(</span><span style="color:#CE9178">"expanded.lte.treeview"</span><span style="color:#D4D4D4">, (</span><span style="color:#9CDCFE">e</span><span style="color:#D4D4D4">) </span><span style="color:#569CD6">=></span><span style="color:#D4D4D4"> {</span></span>
|
|
801
|
+
<span class="line"><span style="color:#9CDCFE"> console</span><span style="color:#D4D4D4">.</span><span style="color:#DCDCAA">log</span><span style="color:#D4D4D4">(</span><span style="color:#CE9178">"Opened submenu inside:"</span><span style="color:#D4D4D4">, </span><span style="color:#9CDCFE">e</span><span style="color:#D4D4D4">.</span><span style="color:#9CDCFE">target</span><span style="color:#D4D4D4">)</span></span>
|
|
802
|
+
<span class="line"><span style="color:#D4D4D4">})</span></span></code></pre>
|
|
803
|
+
<h5 id="programmatic-api">Programmatic API</h5>
|
|
804
|
+
<pre
|
|
805
|
+
class="astro-code dark-plus"
|
|
806
|
+
style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto"
|
|
807
|
+
tabindex="0"
|
|
808
|
+
data-language="js"
|
|
809
|
+
><code><span class="line"><span style="color:#C586C0">import</span><span style="color:#D4D4D4"> { </span><span style="color:#9CDCFE">Treeview</span><span style="color:#D4D4D4"> } </span><span style="color:#C586C0">from</span><span style="color:#CE9178"> "admin-lte"</span></span>
|
|
810
|
+
<span class="line"></span>
|
|
811
|
+
<span class="line"><span style="color:#569CD6">const</span><span style="color:#4FC1FF"> item</span><span style="color:#D4D4D4"> = </span><span style="color:#9CDCFE">document</span><span style="color:#D4D4D4">.</span><span style="color:#DCDCAA">querySelector</span><span style="color:#D4D4D4">(</span><span style="color:#CE9178">".sidebar-menu .nav-item"</span><span style="color:#D4D4D4">)</span></span>
|
|
812
|
+
<span class="line"><span style="color:#569CD6">const</span><span style="color:#4FC1FF"> tv</span><span style="color:#D4D4D4"> = </span><span style="color:#569CD6">new</span><span style="color:#DCDCAA"> Treeview</span><span style="color:#D4D4D4">(</span><span style="color:#9CDCFE">item</span><span style="color:#D4D4D4">, { </span><span style="color:#9CDCFE">accordion:</span><span style="color:#569CD6"> true</span><span style="color:#D4D4D4">, </span><span style="color:#9CDCFE">animationSpeed:</span><span style="color:#B5CEA8"> 300</span><span style="color:#D4D4D4"> })</span></span>
|
|
813
|
+
<span class="line"></span>
|
|
814
|
+
<span class="line"><span style="color:#9CDCFE">tv</span><span style="color:#D4D4D4">.</span><span style="color:#DCDCAA">open</span><span style="color:#D4D4D4">() </span><span style="color:#6A9955">// expand this item's submenu</span></span>
|
|
815
|
+
<span class="line"><span style="color:#9CDCFE">tv</span><span style="color:#D4D4D4">.</span><span style="color:#DCDCAA">close</span><span style="color:#D4D4D4">() </span><span style="color:#6A9955">// collapse it</span></span>
|
|
816
|
+
<span class="line"><span style="color:#9CDCFE">tv</span><span style="color:#D4D4D4">.</span><span style="color:#DCDCAA">toggle</span><span style="color:#D4D4D4">() </span><span style="color:#6A9955">// toggle</span></span></code></pre>
|
|
817
|
+
<h6 id="methods">Methods</h6>
|
|
818
|
+
|
|
819
|
+
<table>
|
|
820
|
+
<thead>
|
|
821
|
+
<tr>
|
|
822
|
+
<th>Method</th>
|
|
823
|
+
<th>Returns</th>
|
|
824
|
+
<th>Description</th>
|
|
825
|
+
</tr>
|
|
826
|
+
</thead>
|
|
827
|
+
<tbody>
|
|
828
|
+
<tr>
|
|
829
|
+
<td><code>open()</code></td>
|
|
830
|
+
<td><code>void</code></td>
|
|
831
|
+
<td>
|
|
832
|
+
Expands the submenu. If <code>accordion</code> is <code>true</code>,
|
|
833
|
+
closes sibling submenus first. Fires <code>expanded.lte.treeview</code>.
|
|
834
|
+
</td>
|
|
835
|
+
</tr>
|
|
836
|
+
<tr>
|
|
837
|
+
<td><code>close()</code></td>
|
|
838
|
+
<td><code>void</code></td>
|
|
839
|
+
<td>Collapses the submenu. Fires <code>collapsed.lte.treeview</code>.</td>
|
|
840
|
+
</tr>
|
|
841
|
+
<tr>
|
|
842
|
+
<td><code>toggle()</code></td>
|
|
843
|
+
<td><code>void</code></td>
|
|
844
|
+
<td>
|
|
845
|
+
Calls <code>open()</code> or <code>close()</code> based on current
|
|
846
|
+
state.
|
|
847
|
+
</td>
|
|
848
|
+
</tr>
|
|
849
|
+
</tbody>
|
|
850
|
+
</table>
|
|
851
|
+
<h5 id="example">Example</h5>
|
|
852
|
+
<ul
|
|
853
|
+
class="nav sidebar-menu flex-column"
|
|
854
|
+
data-lte-toggle="treeview"
|
|
855
|
+
role="menu"
|
|
856
|
+
style="
|
|
857
|
+
background: var(--bs-tertiary-bg);
|
|
858
|
+
padding: 0.5rem;
|
|
859
|
+
border-radius: var(--bs-border-radius);
|
|
860
|
+
"
|
|
861
|
+
>
|
|
862
|
+
<li class="nav-item">
|
|
863
|
+
<a class="nav-link" href="#"
|
|
864
|
+
><i class="nav-icon bi bi-circle"></i>
|
|
865
|
+
<p>One level</p></a
|
|
866
|
+
>
|
|
867
|
+
</li>
|
|
868
|
+
<li class="nav-item menu-open">
|
|
869
|
+
<a class="nav-link" href="#"
|
|
870
|
+
><i class="nav-icon bi bi-folder"></i>
|
|
871
|
+
<p>Multilevel <i class="nav-arrow bi bi-chevron-right"></i></p
|
|
872
|
+
></a>
|
|
873
|
+
<ul class="nav nav-treeview">
|
|
874
|
+
<li class="nav-item">
|
|
875
|
+
<a href="#" class="nav-link"
|
|
876
|
+
><i class="nav-icon bi bi-circle"></i>
|
|
877
|
+
<p>Level 2</p></a
|
|
878
|
+
>
|
|
879
|
+
</li>
|
|
880
|
+
</ul>
|
|
881
|
+
</li>
|
|
882
|
+
</ul>
|
|
883
|
+
</div>
|
|
884
|
+
</div>
|
|
885
|
+
</div>
|
|
886
|
+
</div>
|
|
861
887
|
</div>
|
|
862
888
|
<!--end::Container-->
|
|
863
889
|
</div>
|
|
@@ -927,7 +953,71 @@
|
|
|
927
953
|
}
|
|
928
954
|
});
|
|
929
955
|
</script>
|
|
930
|
-
<!--end::OverlayScrollbars Configure-->
|
|
956
|
+
<!--end::OverlayScrollbars Configure--><!--begin::Color Mode Toggle (#6010)-->
|
|
957
|
+
<script>
|
|
958
|
+
(() => {
|
|
959
|
+
'use strict';
|
|
960
|
+
|
|
961
|
+
const STORAGE_KEY = 'lte-theme';
|
|
962
|
+
|
|
963
|
+
const getStoredTheme = () => localStorage.getItem(STORAGE_KEY);
|
|
964
|
+
const setStoredTheme = (theme) => localStorage.setItem(STORAGE_KEY, theme);
|
|
965
|
+
|
|
966
|
+
const prefersDark = () => globalThis.matchMedia('(prefers-color-scheme: dark)').matches;
|
|
967
|
+
|
|
968
|
+
const getPreferredTheme = () => {
|
|
969
|
+
const stored = getStoredTheme();
|
|
970
|
+
if (stored) return stored;
|
|
971
|
+
return prefersDark() ? 'dark' : 'light';
|
|
972
|
+
};
|
|
973
|
+
|
|
974
|
+
const setTheme = (theme) => {
|
|
975
|
+
const resolved = theme === 'auto' ? (prefersDark() ? 'dark' : 'light') : theme;
|
|
976
|
+
document.documentElement.setAttribute('data-bs-theme', resolved);
|
|
977
|
+
};
|
|
978
|
+
|
|
979
|
+
setTheme(getPreferredTheme());
|
|
980
|
+
|
|
981
|
+
const showActiveTheme = (theme) => {
|
|
982
|
+
// Highlight the active dropdown option
|
|
983
|
+
document.querySelectorAll('[data-bs-theme-value]').forEach((el) => {
|
|
984
|
+
el.classList.remove('active');
|
|
985
|
+
el.setAttribute('aria-pressed', 'false');
|
|
986
|
+
const check = el.querySelector('.bi-check-lg');
|
|
987
|
+
if (check) check.classList.add('d-none');
|
|
988
|
+
});
|
|
989
|
+
const active = document.querySelector(`[data-bs-theme-value="${theme}"]`);
|
|
990
|
+
if (active) {
|
|
991
|
+
active.classList.add('active');
|
|
992
|
+
active.setAttribute('aria-pressed', 'true');
|
|
993
|
+
const check = active.querySelector('.bi-check-lg');
|
|
994
|
+
if (check) check.classList.remove('d-none');
|
|
995
|
+
}
|
|
996
|
+
// Sync the topbar trigger icon
|
|
997
|
+
document.querySelectorAll('[data-lte-theme-icon]').forEach((icon) => {
|
|
998
|
+
icon.classList.toggle('d-none', icon.dataset.lteThemeIcon !== theme);
|
|
999
|
+
});
|
|
1000
|
+
};
|
|
1001
|
+
|
|
1002
|
+
globalThis.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
|
|
1003
|
+
const stored = getStoredTheme();
|
|
1004
|
+
if (!stored || stored === 'auto') setTheme(getPreferredTheme());
|
|
1005
|
+
});
|
|
1006
|
+
|
|
1007
|
+
document.addEventListener('DOMContentLoaded', () => {
|
|
1008
|
+
showActiveTheme(getPreferredTheme());
|
|
1009
|
+
document.querySelectorAll('[data-bs-theme-value]').forEach((toggle) => {
|
|
1010
|
+
toggle.addEventListener('click', () => {
|
|
1011
|
+
const theme = toggle.getAttribute('data-bs-theme-value');
|
|
1012
|
+
setStoredTheme(theme);
|
|
1013
|
+
setTheme(theme);
|
|
1014
|
+
showActiveTheme(theme);
|
|
1015
|
+
});
|
|
1016
|
+
});
|
|
1017
|
+
});
|
|
1018
|
+
})();
|
|
1019
|
+
</script>
|
|
1020
|
+
<!--end::Color Mode Toggle-->
|
|
931
1021
|
<!--end::Script-->
|
|
932
1022
|
</body>
|
|
933
1023
|
<!--end::Body-->
|