admin-lte 4.0.0-rc6 → 4.0.0
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 +96 -0
- package/README.md +44 -18
- package/dist/UI/general.html +311 -92
- package/dist/UI/icons.html +311 -92
- package/dist/UI/timeline.html +311 -92
- package/dist/css/adminlte.css +2814 -1138
- 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 +2814 -1138
- 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 +291 -385
- package/dist/docs/color-mode.html +283 -381
- package/dist/docs/components/main-header.html +269 -363
- package/dist/docs/components/main-sidebar.html +284 -378
- package/dist/docs/customization.html +1056 -0
- package/dist/docs/deployment.html +1121 -0
- package/dist/docs/faq.html +887 -397
- package/dist/docs/getting-started.html +967 -0
- package/dist/docs/how-to-contribute.html +365 -450
- package/dist/docs/index.html +16 -0
- package/dist/docs/integrations.html +1207 -0
- package/dist/docs/introduction.html +483 -434
- package/dist/docs/javascript/accessibility.html +925 -0
- package/dist/docs/javascript/card-widget.html +995 -0
- package/dist/docs/javascript/direct-chat.html +872 -0
- package/dist/docs/javascript/fullscreen.html +881 -0
- package/dist/docs/javascript/layout.html +884 -0
- package/dist/docs/javascript/plugins-overview.html +1120 -0
- package/dist/docs/javascript/pushmenu.html +522 -377
- package/dist/docs/javascript/treeview.html +498 -390
- package/dist/docs/layout-blueprint.html +1063 -0
- package/dist/docs/layout.html +316 -402
- package/dist/docs/license.html +282 -375
- package/dist/docs/migration.html +1125 -0
- package/dist/docs/recipes.html +1161 -0
- package/dist/docs/rtl.html +933 -0
- package/dist/examples/lockscreen.html +66 -2
- package/dist/examples/login-v2.html +65 -1
- package/dist/examples/login.html +65 -1
- package/dist/examples/register-v2.html +65 -1
- package/dist/examples/register.html +65 -1
- package/dist/forms/elements.html +1381 -0
- package/dist/forms/{general.html → layout.html} +382 -452
- package/dist/forms/validation.html +1251 -0
- package/dist/forms/wizard.html +1386 -0
- package/dist/generate/theme.html +135 -5
- package/dist/index.html +311 -92
- package/dist/index2.html +314 -92
- package/dist/index3.html +311 -92
- package/dist/js/adminlte.js +135 -314
- package/dist/js/adminlte.js.map +1 -1
- package/dist/js/adminlte.min.js +3 -3
- package/dist/js/adminlte.min.js.map +1 -1
- package/dist/layout/collapsed-sidebar-without-hover.html +1120 -0
- package/dist/layout/collapsed-sidebar.html +311 -92
- package/dist/layout/fixed-complete.html +311 -92
- package/dist/layout/fixed-footer.html +311 -92
- package/dist/layout/fixed-header.html +311 -92
- package/dist/layout/fixed-sidebar.html +311 -92
- package/dist/layout/layout-custom-area.html +311 -92
- package/dist/layout/layout-rtl.html +311 -92
- package/dist/layout/logo-switch.html +135 -5
- package/dist/layout/sidebar-mini.html +311 -92
- package/dist/layout/unfixed-sidebar.html +311 -92
- package/dist/mailbox/compose.html +1127 -0
- package/dist/mailbox/inbox.html +1477 -0
- package/dist/mailbox/read.html +1178 -0
- package/dist/pages/404.html +213 -0
- package/dist/pages/500.html +201 -0
- package/dist/pages/calendar.html +1242 -0
- package/dist/pages/chat.html +1403 -0
- package/dist/pages/faq.html +1359 -0
- package/dist/pages/file-manager.html +1811 -0
- package/dist/pages/invoice.html +1175 -0
- package/dist/pages/kanban.html +1415 -0
- package/dist/pages/maintenance.html +204 -0
- package/dist/pages/pricing.html +1255 -0
- package/dist/pages/profile.html +1358 -0
- package/dist/pages/projects.html +1620 -0
- package/dist/pages/settings.html +1363 -0
- package/dist/tables/data.html +1295 -0
- package/dist/tables/simple.html +311 -92
- package/dist/widgets/cards.html +311 -92
- package/dist/widgets/info-box.html +311 -92
- package/dist/widgets/small-box.html +311 -92
- package/netlify.toml +16 -0
- package/package.json +32 -26
- package/src/scss/_accessibility.scss +44 -0
- package/src/scss/_app-footer.scss +9 -0
- package/src/scss/_app-header.scss +27 -0
- package/src/scss/_app-sidebar.scss +73 -74
- package/src/scss/_bootstrap-variables.scss +12 -5
- package/src/scss/_docs.scss +816 -0
- package/src/scss/_table.scss +4 -4
- package/src/scss/adminlte.scss +4 -1
- package/src/scss/pages/_login_and_register.scss +1 -1
- package/src/ts/accessibility.ts +9 -7
- package/src/ts/adminlte.ts +2 -14
- package/src/ts/fullscreen.ts +8 -4
- package/src/ts/layout.ts +34 -16
- package/src/ts/push-menu.ts +257 -104
- package/src/ts/util/index.ts +10 -0
- package/.claude/settings.local.json +0 -33
- package/CLAUDE.md +0 -79
|
@@ -64,7 +64,7 @@
|
|
|
64
64
|
</head>
|
|
65
65
|
<!--end::Head-->
|
|
66
66
|
<!--begin::Body-->
|
|
67
|
-
<body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
|
|
67
|
+
<body class="layout-fixed sidebar-expand-lg bg-body-tertiary docs-page">
|
|
68
68
|
<!--begin::App Wrapper-->
|
|
69
69
|
<div class="app-wrapper">
|
|
70
70
|
<!--begin::Header-->
|
|
@@ -78,11 +78,18 @@
|
|
|
78
78
|
<i class="bi bi-list"></i>
|
|
79
79
|
</a>
|
|
80
80
|
</li>
|
|
81
|
+
|
|
81
82
|
<li class="nav-item d-none d-md-block">
|
|
82
|
-
<a href="
|
|
83
|
+
<a href="../docs/introduction.html" class="nav-link">
|
|
84
|
+
<i class="bi bi-book me-1" aria-hidden="true"></i>
|
|
85
|
+
Documentation
|
|
86
|
+
</a>
|
|
83
87
|
</li>
|
|
84
88
|
<li class="nav-item d-none d-md-block">
|
|
85
|
-
<a href="
|
|
89
|
+
<a href="../index.html" class="nav-link">
|
|
90
|
+
<i class="bi bi-arrow-left me-1" aria-hidden="true"></i>
|
|
91
|
+
Back to live preview
|
|
92
|
+
</a>
|
|
86
93
|
</li>
|
|
87
94
|
</ul>
|
|
88
95
|
<!--end::Start Navbar Links-->
|
|
@@ -220,11 +227,70 @@
|
|
|
220
227
|
<li class="nav-item">
|
|
221
228
|
<a class="nav-link" href="#" data-lte-toggle="fullscreen">
|
|
222
229
|
<i data-lte-icon="maximize" class="bi bi-arrows-fullscreen"></i>
|
|
223
|
-
<i data-lte-icon="minimize" class="bi bi-fullscreen-exit
|
|
230
|
+
<i data-lte-icon="minimize" class="bi bi-fullscreen-exit d-none"></i>
|
|
224
231
|
</a>
|
|
225
232
|
</li>
|
|
226
233
|
<!--end::Fullscreen Toggle-->
|
|
227
234
|
|
|
235
|
+
<!--begin::Color Mode Toggle (#6010)-->
|
|
236
|
+
<li class="nav-item dropdown">
|
|
237
|
+
<a
|
|
238
|
+
class="nav-link"
|
|
239
|
+
href="#"
|
|
240
|
+
id="bd-theme"
|
|
241
|
+
aria-label="Toggle color scheme"
|
|
242
|
+
data-bs-toggle="dropdown"
|
|
243
|
+
aria-expanded="false"
|
|
244
|
+
>
|
|
245
|
+
<i class="bi bi-sun-fill" data-lte-theme-icon="light"></i>
|
|
246
|
+
<i class="bi bi-moon-fill d-none" data-lte-theme-icon="dark"></i>
|
|
247
|
+
<i class="bi bi-circle-half d-none" data-lte-theme-icon="auto"></i>
|
|
248
|
+
</a>
|
|
249
|
+
<ul
|
|
250
|
+
class="dropdown-menu dropdown-menu-end"
|
|
251
|
+
aria-labelledby="bd-theme"
|
|
252
|
+
style="--bs-dropdown-min-width: 8rem"
|
|
253
|
+
>
|
|
254
|
+
<li>
|
|
255
|
+
<button
|
|
256
|
+
type="button"
|
|
257
|
+
class="dropdown-item d-flex align-items-center"
|
|
258
|
+
data-bs-theme-value="light"
|
|
259
|
+
aria-pressed="false"
|
|
260
|
+
>
|
|
261
|
+
<i class="bi bi-sun-fill me-2"></i>
|
|
262
|
+
Light
|
|
263
|
+
<i class="bi bi-check-lg ms-auto d-none"></i>
|
|
264
|
+
</button>
|
|
265
|
+
</li>
|
|
266
|
+
<li>
|
|
267
|
+
<button
|
|
268
|
+
type="button"
|
|
269
|
+
class="dropdown-item d-flex align-items-center"
|
|
270
|
+
data-bs-theme-value="dark"
|
|
271
|
+
aria-pressed="false"
|
|
272
|
+
>
|
|
273
|
+
<i class="bi bi-moon-fill me-2"></i>
|
|
274
|
+
Dark
|
|
275
|
+
<i class="bi bi-check-lg ms-auto d-none"></i>
|
|
276
|
+
</button>
|
|
277
|
+
</li>
|
|
278
|
+
<li>
|
|
279
|
+
<button
|
|
280
|
+
type="button"
|
|
281
|
+
class="dropdown-item d-flex align-items-center active"
|
|
282
|
+
data-bs-theme-value="auto"
|
|
283
|
+
aria-pressed="true"
|
|
284
|
+
>
|
|
285
|
+
<i class="bi bi-circle-half me-2"></i>
|
|
286
|
+
Auto
|
|
287
|
+
<i class="bi bi-check-lg ms-auto d-none"></i>
|
|
288
|
+
</button>
|
|
289
|
+
</li>
|
|
290
|
+
</ul>
|
|
291
|
+
</li>
|
|
292
|
+
<!--end::Color Mode Toggle-->
|
|
293
|
+
|
|
228
294
|
<!--begin::User Menu Dropdown-->
|
|
229
295
|
<li class="nav-item dropdown user-menu">
|
|
230
296
|
<a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
|
|
@@ -281,24 +347,20 @@
|
|
|
281
347
|
<!--end::Container-->
|
|
282
348
|
</nav>
|
|
283
349
|
<!--end::Header-->
|
|
284
|
-
<!--begin::Sidebar-->
|
|
350
|
+
<!--begin::Sidebar (docs mode)-->
|
|
285
351
|
<aside class="app-sidebar bg-body-secondary shadow" data-bs-theme="dark">
|
|
286
352
|
<!--begin::Sidebar Brand-->
|
|
287
353
|
<div class="sidebar-brand">
|
|
288
|
-
|
|
289
|
-
<a href="../index.html" class="brand-link">
|
|
290
|
-
<!--begin::Brand Image-->
|
|
354
|
+
<a href="../docs/introduction.html" class="brand-link">
|
|
291
355
|
<img
|
|
292
356
|
src="../assets/img/AdminLTELogo.png"
|
|
293
357
|
alt="AdminLTE Logo"
|
|
294
358
|
class="brand-image opacity-75 shadow"
|
|
295
359
|
/>
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
<!--end::Brand Text-->
|
|
360
|
+
<span class="brand-text fw-light">
|
|
361
|
+
AdminLTE 4 <span class="opacity-75">· Docs</span>
|
|
362
|
+
</span>
|
|
300
363
|
</a>
|
|
301
|
-
<!--end::Brand Link-->
|
|
302
364
|
</div>
|
|
303
365
|
<!--end::Sidebar Brand-->
|
|
304
366
|
<!--begin::Sidebar Wrapper-->
|
|
@@ -309,451 +371,223 @@
|
|
|
309
371
|
class="nav sidebar-menu flex-column"
|
|
310
372
|
data-lte-toggle="treeview"
|
|
311
373
|
role="navigation"
|
|
312
|
-
aria-label="
|
|
374
|
+
aria-label="Documentation navigation"
|
|
313
375
|
data-accordion="false"
|
|
314
|
-
id="navigation"
|
|
376
|
+
id="docs-navigation"
|
|
315
377
|
>
|
|
378
|
+
<li class="nav-header">START HERE</li>
|
|
316
379
|
<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>
|
|
380
|
+
<a href="../docs/introduction.html" class="nav-link active">
|
|
381
|
+
<i class="nav-icon bi bi-download"></i>
|
|
382
|
+
<p>Installation</p>
|
|
323
383
|
</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
384
|
</li>
|
|
345
385
|
<li class="nav-item">
|
|
346
|
-
<a href="../
|
|
386
|
+
<a href="../docs/getting-started.html" class="nav-link">
|
|
387
|
+
<i class="nav-icon bi bi-rocket-takeoff"></i>
|
|
388
|
+
<p>Getting Started</p>
|
|
389
|
+
</a>
|
|
390
|
+
</li>
|
|
391
|
+
|
|
392
|
+
<li class="nav-header">FOUNDATIONS</li>
|
|
393
|
+
<li class="nav-item">
|
|
394
|
+
<a href="../docs/layout.html" class="nav-link">
|
|
395
|
+
<i class="nav-icon bi bi-grip-horizontal"></i>
|
|
396
|
+
<p>Layout Classes</p>
|
|
397
|
+
</a>
|
|
398
|
+
</li>
|
|
399
|
+
<li class="nav-item">
|
|
400
|
+
<a href="../docs/layout-blueprint.html" class="nav-link">
|
|
401
|
+
<i class="nav-icon bi bi-diagram-3"></i>
|
|
402
|
+
<p>Layout Blueprint</p>
|
|
403
|
+
</a>
|
|
404
|
+
</li>
|
|
405
|
+
<li class="nav-item">
|
|
406
|
+
<a href="../docs/customization.html" class="nav-link">
|
|
347
407
|
<i class="nav-icon bi bi-palette"></i>
|
|
348
|
-
<p>
|
|
408
|
+
<p>Customization</p>
|
|
349
409
|
</a>
|
|
350
410
|
</li>
|
|
351
411
|
<li class="nav-item">
|
|
352
|
-
<a href="
|
|
353
|
-
<i class="nav-icon bi bi-
|
|
354
|
-
<p>
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
412
|
+
<a href="../docs/color-mode.html" class="nav-link">
|
|
413
|
+
<i class="nav-icon bi bi-star-half"></i>
|
|
414
|
+
<p>Color Mode</p>
|
|
415
|
+
</a>
|
|
416
|
+
</li>
|
|
417
|
+
<li class="nav-item">
|
|
418
|
+
<a href="../docs/rtl.html" class="nav-link">
|
|
419
|
+
<i class="nav-icon bi bi-text-paragraph"></i>
|
|
420
|
+
<p>RTL Support</p>
|
|
421
|
+
</a>
|
|
422
|
+
</li>
|
|
423
|
+
|
|
424
|
+
<li class="nav-header">BUILDING</li>
|
|
425
|
+
<li class="nav-item">
|
|
426
|
+
<a href="../docs/recipes.html" class="nav-link">
|
|
427
|
+
<i class="nav-icon bi bi-clipboard-check"></i>
|
|
428
|
+
<p>Recipes</p>
|
|
358
429
|
</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
430
|
</li>
|
|
380
431
|
<li class="nav-item">
|
|
381
432
|
<a href="#" class="nav-link">
|
|
382
|
-
<i class="nav-icon bi bi-
|
|
433
|
+
<i class="nav-icon bi bi-ui-checks-grid"></i>
|
|
383
434
|
<p>
|
|
384
|
-
|
|
385
|
-
<span class="nav-badge badge text-bg-secondary me-3">6</span>
|
|
435
|
+
Components
|
|
386
436
|
<i class="nav-arrow bi bi-chevron-right"></i>
|
|
387
437
|
</p>
|
|
388
438
|
</a>
|
|
389
439
|
<ul class="nav nav-treeview">
|
|
390
440
|
<li class="nav-item">
|
|
391
|
-
<a href="../
|
|
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/logo-switch.html" class="nav-link">
|
|
441
|
+
<a href="../docs/components/main-header.html" class="nav-link">
|
|
440
442
|
<i class="nav-icon bi bi-circle"></i>
|
|
441
|
-
<p>
|
|
443
|
+
<p>Main Header</p>
|
|
442
444
|
</a>
|
|
443
445
|
</li>
|
|
444
446
|
<li class="nav-item">
|
|
445
|
-
<a href="../
|
|
447
|
+
<a href="../docs/components/main-sidebar.html" class="nav-link">
|
|
446
448
|
<i class="nav-icon bi bi-circle"></i>
|
|
447
|
-
<p>
|
|
449
|
+
<p>Main Sidebar</p>
|
|
448
450
|
</a>
|
|
449
451
|
</li>
|
|
450
452
|
</ul>
|
|
451
453
|
</li>
|
|
452
454
|
<li class="nav-item">
|
|
453
455
|
<a href="#" class="nav-link">
|
|
454
|
-
<i class="nav-icon bi bi-
|
|
456
|
+
<i class="nav-icon bi bi-filetype-js"></i>
|
|
455
457
|
<p>
|
|
456
|
-
|
|
458
|
+
JavaScript Plugins
|
|
457
459
|
<i class="nav-arrow bi bi-chevron-right"></i>
|
|
458
460
|
</p>
|
|
459
461
|
</a>
|
|
460
462
|
<ul class="nav nav-treeview">
|
|
461
463
|
<li class="nav-item">
|
|
462
|
-
<a href="../
|
|
464
|
+
<a href="../docs/javascript/plugins-overview.html" class="nav-link">
|
|
463
465
|
<i class="nav-icon bi bi-circle"></i>
|
|
464
|
-
<p>
|
|
466
|
+
<p>Overview</p>
|
|
465
467
|
</a>
|
|
466
468
|
</li>
|
|
467
469
|
<li class="nav-item">
|
|
468
|
-
<a href="../
|
|
470
|
+
<a href="../docs/javascript/layout.html" class="nav-link">
|
|
469
471
|
<i class="nav-icon bi bi-circle"></i>
|
|
470
|
-
<p>
|
|
472
|
+
<p>Layout</p>
|
|
471
473
|
</a>
|
|
472
474
|
</li>
|
|
473
475
|
<li class="nav-item">
|
|
474
|
-
<a href="../
|
|
476
|
+
<a href="../docs/javascript/pushmenu.html" class="nav-link">
|
|
475
477
|
<i class="nav-icon bi bi-circle"></i>
|
|
476
|
-
<p>
|
|
478
|
+
<p>PushMenu</p>
|
|
477
479
|
</a>
|
|
478
480
|
</li>
|
|
479
|
-
</ul>
|
|
480
|
-
</li>
|
|
481
|
-
<li class="nav-item">
|
|
482
|
-
<a href="#" class="nav-link">
|
|
483
|
-
<i class="nav-icon bi bi-pencil-square"></i>
|
|
484
|
-
<p>
|
|
485
|
-
Forms
|
|
486
|
-
<i class="nav-arrow bi bi-chevron-right"></i>
|
|
487
|
-
</p>
|
|
488
|
-
</a>
|
|
489
|
-
<ul class="nav nav-treeview">
|
|
490
481
|
<li class="nav-item">
|
|
491
|
-
<a href="../
|
|
482
|
+
<a href="../docs/javascript/treeview.html" class="nav-link">
|
|
492
483
|
<i class="nav-icon bi bi-circle"></i>
|
|
493
|
-
<p>
|
|
484
|
+
<p>Treeview</p>
|
|
494
485
|
</a>
|
|
495
486
|
</li>
|
|
496
|
-
</ul>
|
|
497
|
-
</li>
|
|
498
|
-
<li class="nav-item">
|
|
499
|
-
<a href="#" class="nav-link">
|
|
500
|
-
<i class="nav-icon bi bi-table"></i>
|
|
501
|
-
<p>
|
|
502
|
-
Tables
|
|
503
|
-
<i class="nav-arrow bi bi-chevron-right"></i>
|
|
504
|
-
</p>
|
|
505
|
-
</a>
|
|
506
|
-
<ul class="nav nav-treeview">
|
|
507
487
|
<li class="nav-item">
|
|
508
|
-
<a href="../
|
|
488
|
+
<a href="../docs/javascript/card-widget.html" class="nav-link">
|
|
509
489
|
<i class="nav-icon bi bi-circle"></i>
|
|
510
|
-
<p>
|
|
490
|
+
<p>Card Widget</p>
|
|
511
491
|
</a>
|
|
512
492
|
</li>
|
|
513
|
-
</ul>
|
|
514
|
-
</li>
|
|
515
|
-
|
|
516
|
-
<li class="nav-header">EXAMPLES</li>
|
|
517
|
-
<li class="nav-item">
|
|
518
|
-
<a href="#" class="nav-link">
|
|
519
|
-
<i class="nav-icon bi bi-box-arrow-in-right"></i>
|
|
520
|
-
<p>
|
|
521
|
-
Auth
|
|
522
|
-
<i class="nav-arrow bi bi-chevron-right"></i>
|
|
523
|
-
</p>
|
|
524
|
-
</a>
|
|
525
|
-
<ul class="nav nav-treeview">
|
|
526
493
|
<li class="nav-item">
|
|
527
|
-
<a href="
|
|
528
|
-
<i class="nav-icon bi bi-
|
|
529
|
-
<p>
|
|
530
|
-
Version 1
|
|
531
|
-
<i class="nav-arrow bi bi-chevron-right"></i>
|
|
532
|
-
</p>
|
|
494
|
+
<a href="../docs/javascript/direct-chat.html" class="nav-link">
|
|
495
|
+
<i class="nav-icon bi bi-circle"></i>
|
|
496
|
+
<p>Direct Chat</p>
|
|
533
497
|
</a>
|
|
534
|
-
<ul class="nav nav-treeview">
|
|
535
|
-
<li class="nav-item">
|
|
536
|
-
<a href="../examples/login.html" class="nav-link">
|
|
537
|
-
<i class="nav-icon bi bi-circle"></i>
|
|
538
|
-
<p>Login</p>
|
|
539
|
-
</a>
|
|
540
|
-
</li>
|
|
541
|
-
<li class="nav-item">
|
|
542
|
-
<a href="../examples/register.html" class="nav-link">
|
|
543
|
-
<i class="nav-icon bi bi-circle"></i>
|
|
544
|
-
<p>Register</p>
|
|
545
|
-
</a>
|
|
546
|
-
</li>
|
|
547
|
-
</ul>
|
|
548
498
|
</li>
|
|
549
499
|
<li class="nav-item">
|
|
550
|
-
<a href="
|
|
551
|
-
<i class="nav-icon bi bi-
|
|
552
|
-
<p>
|
|
553
|
-
Version 2
|
|
554
|
-
<i class="nav-arrow bi bi-chevron-right"></i>
|
|
555
|
-
</p>
|
|
500
|
+
<a href="../docs/javascript/fullscreen.html" class="nav-link">
|
|
501
|
+
<i class="nav-icon bi bi-circle"></i>
|
|
502
|
+
<p>Fullscreen</p>
|
|
556
503
|
</a>
|
|
557
|
-
<ul class="nav nav-treeview">
|
|
558
|
-
<li class="nav-item">
|
|
559
|
-
<a href="../examples/login-v2.html" class="nav-link">
|
|
560
|
-
<i class="nav-icon bi bi-circle"></i>
|
|
561
|
-
<p>Login</p>
|
|
562
|
-
</a>
|
|
563
|
-
</li>
|
|
564
|
-
<li class="nav-item">
|
|
565
|
-
<a href="../examples/register-v2.html" class="nav-link">
|
|
566
|
-
<i class="nav-icon bi bi-circle"></i>
|
|
567
|
-
<p>Register</p>
|
|
568
|
-
</a>
|
|
569
|
-
</li>
|
|
570
|
-
</ul>
|
|
571
504
|
</li>
|
|
572
505
|
<li class="nav-item">
|
|
573
|
-
<a href="../
|
|
506
|
+
<a href="../docs/javascript/accessibility.html" class="nav-link">
|
|
574
507
|
<i class="nav-icon bi bi-circle"></i>
|
|
575
|
-
<p>
|
|
508
|
+
<p>Accessibility</p>
|
|
576
509
|
</a>
|
|
577
510
|
</li>
|
|
578
511
|
</ul>
|
|
579
512
|
</li>
|
|
580
|
-
|
|
581
|
-
<li class="nav-header">DOCUMENTATIONS</li>
|
|
582
513
|
<li class="nav-item">
|
|
583
|
-
<a href="../docs/
|
|
584
|
-
<i class="nav-icon bi bi-
|
|
585
|
-
<p>
|
|
514
|
+
<a href="../docs/integrations.html" class="nav-link">
|
|
515
|
+
<i class="nav-icon bi bi-puzzle"></i>
|
|
516
|
+
<p>Integrations</p>
|
|
586
517
|
</a>
|
|
587
518
|
</li>
|
|
519
|
+
|
|
520
|
+
<li class="nav-header">SHIPPING</li>
|
|
588
521
|
<li class="nav-item">
|
|
589
|
-
<a href="../docs/
|
|
590
|
-
<i class="nav-icon bi bi-
|
|
591
|
-
<p>
|
|
522
|
+
<a href="../docs/migration.html" class="nav-link">
|
|
523
|
+
<i class="nav-icon bi bi-arrow-up-right-square"></i>
|
|
524
|
+
<p>Migration from v3</p>
|
|
592
525
|
</a>
|
|
593
526
|
</li>
|
|
594
527
|
<li class="nav-item">
|
|
595
|
-
<a href="../docs/
|
|
596
|
-
<i class="nav-icon bi bi-
|
|
597
|
-
<p>
|
|
528
|
+
<a href="../docs/deployment.html" class="nav-link">
|
|
529
|
+
<i class="nav-icon bi bi-cloud-upload"></i>
|
|
530
|
+
<p>Deployment</p>
|
|
598
531
|
</a>
|
|
599
532
|
</li>
|
|
600
|
-
<li class="nav-item">
|
|
601
|
-
<a href="#" class="nav-link">
|
|
602
|
-
<i class="nav-icon bi bi-ui-checks-grid"></i>
|
|
603
|
-
<p>
|
|
604
|
-
Components
|
|
605
|
-
<i class="nav-arrow bi bi-chevron-right"></i>
|
|
606
|
-
</p>
|
|
607
|
-
</a>
|
|
608
|
-
<ul class="nav nav-treeview">
|
|
609
|
-
<li class="nav-item">
|
|
610
|
-
<a href="../docs/components/main-header.html" class="nav-link">
|
|
611
|
-
<i class="nav-icon bi bi-circle"></i>
|
|
612
|
-
<p>Main Header</p>
|
|
613
|
-
</a>
|
|
614
|
-
</li>
|
|
615
|
-
<li class="nav-item">
|
|
616
|
-
<a href="../docs/components/main-sidebar.html" class="nav-link">
|
|
617
|
-
<i class="nav-icon bi bi-circle"></i>
|
|
618
|
-
<p>Main Sidebar</p>
|
|
619
|
-
</a>
|
|
620
|
-
</li>
|
|
621
|
-
</ul>
|
|
622
|
-
</li>
|
|
623
|
-
<li class="nav-item">
|
|
624
|
-
<a href="#" class="nav-link">
|
|
625
|
-
<i class="nav-icon bi bi-filetype-js"></i>
|
|
626
|
-
<p>
|
|
627
|
-
Javascript
|
|
628
|
-
<i class="nav-arrow bi bi-chevron-right"></i>
|
|
629
|
-
</p>
|
|
630
|
-
</a>
|
|
631
|
-
<ul class="nav nav-treeview">
|
|
632
|
-
<li class="nav-item">
|
|
633
|
-
<a href="../docs/javascript/treeview.html" class="nav-link">
|
|
634
|
-
<i class="nav-icon bi bi-circle"></i>
|
|
635
|
-
<p>Treeview</p>
|
|
636
|
-
</a>
|
|
637
|
-
</li>
|
|
638
|
-
</ul>
|
|
639
|
-
</li>
|
|
640
533
|
<li class="nav-item">
|
|
641
534
|
<a href="../docs/browser-support.html" class="nav-link">
|
|
642
|
-
<i class="nav-icon bi bi-browser-
|
|
535
|
+
<i class="nav-icon bi bi-browser-chrome"></i>
|
|
643
536
|
<p>Browser Support</p>
|
|
644
537
|
</a>
|
|
645
538
|
</li>
|
|
646
|
-
|
|
647
|
-
|
|
648
|
-
<i class="nav-icon bi bi-hand-thumbs-up-fill"></i>
|
|
649
|
-
<p>How To Contribute</p>
|
|
650
|
-
</a>
|
|
651
|
-
</li>
|
|
539
|
+
|
|
540
|
+
<li class="nav-header">RESOURCES</li>
|
|
652
541
|
<li class="nav-item">
|
|
653
542
|
<a href="../docs/faq.html" class="nav-link">
|
|
654
|
-
<i class="nav-icon bi bi-question-circle
|
|
543
|
+
<i class="nav-icon bi bi-question-circle"></i>
|
|
655
544
|
<p>FAQ</p>
|
|
656
545
|
</a>
|
|
657
546
|
</li>
|
|
658
547
|
<li class="nav-item">
|
|
659
|
-
<a href="../docs/
|
|
660
|
-
<i class="nav-icon bi bi-
|
|
661
|
-
<p>
|
|
548
|
+
<a href="../docs/how-to-contribute.html" class="nav-link">
|
|
549
|
+
<i class="nav-icon bi bi-people"></i>
|
|
550
|
+
<p>Contributing</p>
|
|
662
551
|
</a>
|
|
663
552
|
</li>
|
|
664
|
-
|
|
665
|
-
<li class="nav-header">MULTI LEVEL EXAMPLE</li>
|
|
666
553
|
<li class="nav-item">
|
|
667
|
-
<a href="
|
|
668
|
-
<i class="nav-icon bi bi-
|
|
669
|
-
<p>
|
|
554
|
+
<a href="../docs/license.html" class="nav-link">
|
|
555
|
+
<i class="nav-icon bi bi-patch-check"></i>
|
|
556
|
+
<p>License</p>
|
|
670
557
|
</a>
|
|
671
558
|
</li>
|
|
672
559
|
<li class="nav-item">
|
|
673
|
-
<a
|
|
674
|
-
|
|
560
|
+
<a
|
|
561
|
+
href="https://github.com/ColorlibHQ/AdminLTE"
|
|
562
|
+
target="_blank"
|
|
563
|
+
rel="noopener"
|
|
564
|
+
class="nav-link"
|
|
565
|
+
>
|
|
566
|
+
<i class="nav-icon bi bi-github"></i>
|
|
675
567
|
<p>
|
|
676
|
-
|
|
677
|
-
<i class="
|
|
568
|
+
GitHub
|
|
569
|
+
<i class="bi bi-box-arrow-up-right ms-1" aria-hidden="true"></i>
|
|
678
570
|
</p>
|
|
679
571
|
</a>
|
|
680
|
-
<ul class="nav nav-treeview">
|
|
681
|
-
<li class="nav-item">
|
|
682
|
-
<a href="#" class="nav-link">
|
|
683
|
-
<i class="nav-icon bi bi-circle"></i>
|
|
684
|
-
<p>Level 2</p>
|
|
685
|
-
</a>
|
|
686
|
-
</li>
|
|
687
|
-
<li class="nav-item">
|
|
688
|
-
<a href="#" class="nav-link">
|
|
689
|
-
<i class="nav-icon bi bi-circle"></i>
|
|
690
|
-
<p>
|
|
691
|
-
Level 2
|
|
692
|
-
<i class="nav-arrow bi bi-chevron-right"></i>
|
|
693
|
-
</p>
|
|
694
|
-
</a>
|
|
695
|
-
<ul class="nav nav-treeview">
|
|
696
|
-
<li class="nav-item">
|
|
697
|
-
<a href="#" class="nav-link">
|
|
698
|
-
<i class="nav-icon bi bi-record-circle-fill"></i>
|
|
699
|
-
<p>Level 3</p>
|
|
700
|
-
</a>
|
|
701
|
-
</li>
|
|
702
|
-
<li class="nav-item">
|
|
703
|
-
<a href="#" class="nav-link">
|
|
704
|
-
<i class="nav-icon bi bi-record-circle-fill"></i>
|
|
705
|
-
<p>Level 3</p>
|
|
706
|
-
</a>
|
|
707
|
-
</li>
|
|
708
|
-
<li class="nav-item">
|
|
709
|
-
<a href="#" class="nav-link">
|
|
710
|
-
<i class="nav-icon bi bi-record-circle-fill"></i>
|
|
711
|
-
<p>Level 3</p>
|
|
712
|
-
</a>
|
|
713
|
-
</li>
|
|
714
|
-
</ul>
|
|
715
|
-
</li>
|
|
716
|
-
<li class="nav-item">
|
|
717
|
-
<a href="#" class="nav-link">
|
|
718
|
-
<i class="nav-icon bi bi-circle"></i>
|
|
719
|
-
<p>Level 2</p>
|
|
720
|
-
</a>
|
|
721
|
-
</li>
|
|
722
|
-
</ul>
|
|
723
|
-
</li>
|
|
724
|
-
<li class="nav-item">
|
|
725
|
-
<a href="#" class="nav-link">
|
|
726
|
-
<i class="nav-icon bi bi-circle-fill"></i>
|
|
727
|
-
<p>Level 1</p>
|
|
728
|
-
</a>
|
|
729
|
-
</li>
|
|
730
|
-
|
|
731
|
-
<li class="nav-header">LABELS</li>
|
|
732
|
-
<li class="nav-item">
|
|
733
|
-
<a href="#" class="nav-link">
|
|
734
|
-
<i class="nav-icon bi bi-circle text-danger"></i>
|
|
735
|
-
<p class="text">Important</p>
|
|
736
|
-
</a>
|
|
737
|
-
</li>
|
|
738
|
-
<li class="nav-item">
|
|
739
|
-
<a href="#" class="nav-link">
|
|
740
|
-
<i class="nav-icon bi bi-circle text-warning"></i>
|
|
741
|
-
<p>Warning</p>
|
|
742
|
-
</a>
|
|
743
|
-
</li>
|
|
744
|
-
<li class="nav-item">
|
|
745
|
-
<a href="#" class="nav-link">
|
|
746
|
-
<i class="nav-icon bi bi-circle text-info"></i>
|
|
747
|
-
<p>Informational</p>
|
|
748
|
-
</a>
|
|
749
572
|
</li>
|
|
750
573
|
</ul>
|
|
751
574
|
<!--end::Sidebar Menu-->
|
|
575
|
+
|
|
576
|
+
<!-- Back to preview CTA (bottom of sidebar) -->
|
|
577
|
+
<div class="p-3 mt-3 border-top border-secondary border-opacity-25">
|
|
578
|
+
<a
|
|
579
|
+
href="../index.html"
|
|
580
|
+
class="btn btn-sm btn-outline-light w-100 d-flex align-items-center justify-content-center gap-2"
|
|
581
|
+
>
|
|
582
|
+
<i class="bi bi-arrow-left" aria-hidden="true"></i>
|
|
583
|
+
Back to live preview
|
|
584
|
+
</a>
|
|
585
|
+
</div>
|
|
752
586
|
</nav>
|
|
753
587
|
</div>
|
|
754
588
|
<!--end::Sidebar Wrapper-->
|
|
755
589
|
</aside>
|
|
756
|
-
<!--end::Sidebar-->
|
|
590
|
+
<!--end::Sidebar (docs mode)-->
|
|
757
591
|
<!--begin::App Main-->
|
|
758
592
|
<main class="app-main">
|
|
759
593
|
<!--begin::App Content Header-->
|
|
@@ -781,84 +615,235 @@
|
|
|
781
615
|
<div class="app-content">
|
|
782
616
|
<!--begin::Container-->
|
|
783
617
|
<div class="container-fluid">
|
|
784
|
-
<
|
|
785
|
-
|
|
786
|
-
|
|
787
|
-
|
|
788
|
-
|
|
789
|
-
|
|
790
|
-
|
|
791
|
-
|
|
792
|
-
|
|
793
|
-
|
|
794
|
-
|
|
795
|
-
|
|
796
|
-
|
|
797
|
-
|
|
798
|
-
|
|
799
|
-
|
|
800
|
-
|
|
801
|
-
|
|
802
|
-
|
|
803
|
-
|
|
804
|
-
|
|
805
|
-
|
|
806
|
-
|
|
807
|
-
|
|
808
|
-
|
|
809
|
-
|
|
810
|
-
|
|
811
|
-
|
|
812
|
-
|
|
813
|
-
|
|
814
|
-
<
|
|
815
|
-
|
|
816
|
-
|
|
817
|
-
|
|
818
|
-
|
|
819
|
-
|
|
820
|
-
|
|
821
|
-
|
|
822
|
-
|
|
823
|
-
<
|
|
824
|
-
<
|
|
825
|
-
<
|
|
826
|
-
<
|
|
827
|
-
|
|
828
|
-
|
|
829
|
-
|
|
830
|
-
|
|
831
|
-
|
|
832
|
-
|
|
833
|
-
|
|
834
|
-
|
|
835
|
-
|
|
836
|
-
|
|
837
|
-
|
|
838
|
-
|
|
839
|
-
|
|
840
|
-
|
|
841
|
-
|
|
842
|
-
|
|
843
|
-
|
|
844
|
-
|
|
845
|
-
|
|
846
|
-
|
|
847
|
-
|
|
848
|
-
|
|
849
|
-
|
|
850
|
-
|
|
851
|
-
|
|
852
|
-
|
|
853
|
-
|
|
854
|
-
|
|
855
|
-
|
|
856
|
-
|
|
857
|
-
|
|
858
|
-
|
|
859
|
-
|
|
860
|
-
|
|
861
|
-
|
|
618
|
+
<div class="row">
|
|
619
|
+
<div class="col-12">
|
|
620
|
+
<div class="card">
|
|
621
|
+
<div class="card-body">
|
|
622
|
+
<h2 id="what-is-adminlte">What is AdminLTE?</h2>
|
|
623
|
+
<p>
|
|
624
|
+
AdminLTE is a free, MIT-licensed admin dashboard template built on
|
|
625
|
+
<strong>Bootstrap 5.3.8</strong> with vanilla TypeScript (no jQuery). It ships
|
|
626
|
+
responsive layouts, a sidebar navigation system, light/dark/auto color mode,
|
|
627
|
+
RTL support, and a growing catalog of demo pages — calendar, kanban, chat,
|
|
628
|
+
file manager, invoice, profile, settings, and more.
|
|
629
|
+
</p>
|
|
630
|
+
<p>
|
|
631
|
+
It’s a <em>template</em>, not a component library. You drop the markup into
|
|
632
|
+
your own project (or framework templates) and customize the parts you need.
|
|
633
|
+
Bootstrap 5 handles the components; AdminLTE provides the application shell.
|
|
634
|
+
</p>
|
|
635
|
+
<p>
|
|
636
|
+
If you’ve never used AdminLTE before, start with
|
|
637
|
+
<a href="getting-started.html">Getting Started</a> — it walks through a
|
|
638
|
+
working dashboard in ten minutes.
|
|
639
|
+
</p>
|
|
640
|
+
<h2 id="installation-paths">Installation paths</h2>
|
|
641
|
+
<p>Pick the path that matches how you’ll actually use AdminLTE:</p>
|
|
642
|
+
|
|
643
|
+
<table>
|
|
644
|
+
<thead>
|
|
645
|
+
<tr>
|
|
646
|
+
<th>Path</th>
|
|
647
|
+
<th>Best for</th>
|
|
648
|
+
<th>Setup time</th>
|
|
649
|
+
</tr>
|
|
650
|
+
</thead>
|
|
651
|
+
<tbody>
|
|
652
|
+
<tr>
|
|
653
|
+
<td><strong>CDN</strong></td>
|
|
654
|
+
<td>Prototyping, demos, simple sites</td>
|
|
655
|
+
<td>1 minute</td>
|
|
656
|
+
</tr>
|
|
657
|
+
<tr>
|
|
658
|
+
<td><strong>npm + bundler</strong></td>
|
|
659
|
+
<td>Production apps, framework projects (Laravel, Symfony, Rails)</td>
|
|
660
|
+
<td>5 minutes</td>
|
|
661
|
+
</tr>
|
|
662
|
+
<tr>
|
|
663
|
+
<td><strong>Build from source</strong></td>
|
|
664
|
+
<td>You need to customize SCSS variables, sidebar width, breakpoints</td>
|
|
665
|
+
<td>10 minutes</td>
|
|
666
|
+
</tr>
|
|
667
|
+
<tr>
|
|
668
|
+
<td><strong>Composer</strong></td>
|
|
669
|
+
<td>PHP projects that prefer Packagist over npm</td>
|
|
670
|
+
<td>2 minutes</td>
|
|
671
|
+
</tr>
|
|
672
|
+
</tbody>
|
|
673
|
+
</table>
|
|
674
|
+
<h3 id="cdn--fastest-path">CDN — fastest path</h3>
|
|
675
|
+
<p>
|
|
676
|
+
Drop these four CSS tags into <code><head></code> and four script tags
|
|
677
|
+
before <code></body></code>. No install, no build step:
|
|
678
|
+
</p>
|
|
679
|
+
<pre
|
|
680
|
+
class="astro-code dark-plus"
|
|
681
|
+
style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto"
|
|
682
|
+
tabindex="0"
|
|
683
|
+
data-language="html"
|
|
684
|
+
><code><span class="line"><span style="color:#6A9955"><!-- In <head> --></span></span>
|
|
685
|
+
<span class="line"><span style="color:#808080"><</span><span style="color:#569CD6">link</span><span style="color:#9CDCFE"> rel</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">"stylesheet"</span><span style="color:#9CDCFE"> href</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">"https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css"</span><span style="color:#808080"> /></span></span>
|
|
686
|
+
<span class="line"><span style="color:#808080"><</span><span style="color:#569CD6">link</span><span style="color:#9CDCFE"> rel</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">"stylesheet"</span><span style="color:#9CDCFE"> href</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">"https://cdn.jsdelivr.net/npm/overlayscrollbars@2.11.0/styles/overlayscrollbars.min.css"</span><span style="color:#808080"> /></span></span>
|
|
687
|
+
<span class="line"><span style="color:#808080"><</span><span style="color:#569CD6">link</span><span style="color:#9CDCFE"> rel</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">"stylesheet"</span><span style="color:#9CDCFE"> href</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">"https://cdn.jsdelivr.net/npm/admin-lte@4.0.0/dist/css/adminlte.min.css"</span><span style="color:#808080"> /></span></span>
|
|
688
|
+
<span class="line"></span>
|
|
689
|
+
<span class="line"><span style="color:#6A9955"><!-- Before </body> --></span></span>
|
|
690
|
+
<span class="line"><span style="color:#808080"><</span><span style="color:#569CD6">script</span><span style="color:#9CDCFE"> src</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">"https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"</span><span style="color:#808080">></</span><span style="color:#569CD6">script</span><span style="color:#808080">></span></span>
|
|
691
|
+
<span class="line"><span style="color:#808080"><</span><span style="color:#569CD6">script</span><span style="color:#9CDCFE"> src</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">"https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.min.js"</span><span style="color:#808080">></</span><span style="color:#569CD6">script</span><span style="color:#808080">></span></span>
|
|
692
|
+
<span class="line"><span style="color:#808080"><</span><span style="color:#569CD6">script</span><span style="color:#9CDCFE"> src</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">"https://cdn.jsdelivr.net/npm/overlayscrollbars@2.11.0/browser/overlayscrollbars.browser.es6.min.js"</span><span style="color:#808080">></</span><span style="color:#569CD6">script</span><span style="color:#808080">></span></span>
|
|
693
|
+
<span class="line"><span style="color:#808080"><</span><span style="color:#569CD6">script</span><span style="color:#9CDCFE"> src</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">"https://cdn.jsdelivr.net/npm/admin-lte@4.0.0/dist/js/adminlte.min.js"</span><span style="color:#808080">></</span><span style="color:#569CD6">script</span><span style="color:#808080">></span></span></code></pre>
|
|
694
|
+
<p>
|
|
695
|
+
Then copy any
|
|
696
|
+
<a href="https://github.com/ColorlibHQ/AdminLTE/tree/master/dist"
|
|
697
|
+
>demo page</a
|
|
698
|
+
>
|
|
699
|
+
HTML into your own file. See
|
|
700
|
+
<a href="getting-started.html">Getting Started</a> for the minimum-viable
|
|
701
|
+
layout.
|
|
702
|
+
</p>
|
|
703
|
+
<h3 id="npm--bundler">npm + bundler</h3>
|
|
704
|
+
<p>
|
|
705
|
+
Requires Node.js 18+ and a bundler (Vite, Webpack, Rollup, esbuild, etc.).
|
|
706
|
+
</p>
|
|
707
|
+
<pre
|
|
708
|
+
class="astro-code dark-plus"
|
|
709
|
+
style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto"
|
|
710
|
+
tabindex="0"
|
|
711
|
+
data-language="bash"
|
|
712
|
+
><code><span class="line"><span style="color:#DCDCAA">npm</span><span style="color:#CE9178"> install</span><span style="color:#CE9178"> admin-lte@4.0.0</span></span></code></pre>
|
|
713
|
+
<p>Then import the CSS and JS in your app entry point:</p>
|
|
714
|
+
<pre
|
|
715
|
+
class="astro-code dark-plus"
|
|
716
|
+
style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto"
|
|
717
|
+
tabindex="0"
|
|
718
|
+
data-language="js"
|
|
719
|
+
><code><span class="line"><span style="color:#6A9955">// CSS</span></span>
|
|
720
|
+
<span class="line"><span style="color:#C586C0">import</span><span style="color:#CE9178"> "admin-lte/dist/css/adminlte.min.css"</span></span>
|
|
721
|
+
<span class="line"><span style="color:#6A9955">// Plus Bootstrap and dependency CSS</span></span>
|
|
722
|
+
<span class="line"><span style="color:#C586C0">import</span><span style="color:#CE9178"> "bootstrap-icons/font/bootstrap-icons.css"</span></span>
|
|
723
|
+
<span class="line"><span style="color:#C586C0">import</span><span style="color:#CE9178"> "overlayscrollbars/styles/overlayscrollbars.css"</span></span>
|
|
724
|
+
<span class="line"></span>
|
|
725
|
+
<span class="line"><span style="color:#6A9955">// JS</span></span>
|
|
726
|
+
<span class="line"><span style="color:#C586C0">import</span><span style="color:#CE9178"> "bootstrap"</span></span>
|
|
727
|
+
<span class="line"><span style="color:#C586C0">import</span><span style="color:#CE9178"> "admin-lte"</span></span></code></pre>
|
|
728
|
+
<p>
|
|
729
|
+
Yarn and pnpm work the same way — substitute <code>yarn add</code> or
|
|
730
|
+
<code>pnpm add</code> for the install.
|
|
731
|
+
</p>
|
|
732
|
+
<h3 id="build-from-source">Build from source</h3>
|
|
733
|
+
<p>
|
|
734
|
+
If you want to customize SCSS variables (sidebar width, breakpoints, brand
|
|
735
|
+
colours), clone the repo and build locally:
|
|
736
|
+
</p>
|
|
737
|
+
<pre
|
|
738
|
+
class="astro-code dark-plus"
|
|
739
|
+
style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto"
|
|
740
|
+
tabindex="0"
|
|
741
|
+
data-language="bash"
|
|
742
|
+
><code><span class="line"><span style="color:#DCDCAA">git</span><span style="color:#CE9178"> clone</span><span style="color:#CE9178"> https://github.com/ColorlibHQ/AdminLTE.git</span></span>
|
|
743
|
+
<span class="line"><span style="color:#DCDCAA">cd</span><span style="color:#CE9178"> AdminLTE</span></span>
|
|
744
|
+
<span class="line"><span style="color:#DCDCAA">npm</span><span style="color:#CE9178"> install</span></span>
|
|
745
|
+
<span class="line"><span style="color:#DCDCAA">npm</span><span style="color:#CE9178"> run</span><span style="color:#CE9178"> dev</span><span style="color:#6A9955"> # dev server with hot-reload at localhost:3000</span></span>
|
|
746
|
+
<span class="line"><span style="color:#DCDCAA">npm</span><span style="color:#CE9178"> run</span><span style="color:#CE9178"> production</span><span style="color:#6A9955"> # one-off production build (clean + lint + compile)</span></span></code></pre>
|
|
747
|
+
<p>
|
|
748
|
+
The compiled output lands in <code>dist/</code>. Edit
|
|
749
|
+
<code>src/scss/_variables.scss</code> or
|
|
750
|
+
<code>src/scss/_bootstrap-variables.scss</code>, then rerun the build. See
|
|
751
|
+
<a href="customization.html">Customization & Theming</a> for which
|
|
752
|
+
variables matter.
|
|
753
|
+
</p>
|
|
754
|
+
<h3 id="composer">Composer</h3>
|
|
755
|
+
<p>For PHP projects:</p>
|
|
756
|
+
<pre
|
|
757
|
+
class="astro-code dark-plus"
|
|
758
|
+
style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto"
|
|
759
|
+
tabindex="0"
|
|
760
|
+
data-language="bash"
|
|
761
|
+
><code><span class="line"><span style="color:#DCDCAA">composer</span><span style="color:#CE9178"> require</span><span style="color:#CE9178"> "almasaeed2010/adminlte=4.0.0"</span></span></code></pre>
|
|
762
|
+
<p>
|
|
763
|
+
The package is published from the same source tree — you get the
|
|
764
|
+
<code>dist/</code> folder ready to serve.
|
|
765
|
+
</p>
|
|
766
|
+
<h2 id="prerequisites">Prerequisites</h2>
|
|
767
|
+
|
|
768
|
+
<table>
|
|
769
|
+
<thead>
|
|
770
|
+
<tr>
|
|
771
|
+
<th></th>
|
|
772
|
+
<th>Minimum</th>
|
|
773
|
+
<th>Recommended</th>
|
|
774
|
+
</tr>
|
|
775
|
+
</thead>
|
|
776
|
+
<tbody>
|
|
777
|
+
<tr>
|
|
778
|
+
<td>Bootstrap</td>
|
|
779
|
+
<td>5.3.0</td>
|
|
780
|
+
<td>5.3.8 (pinned in <code>package.json</code>)</td>
|
|
781
|
+
</tr>
|
|
782
|
+
<tr>
|
|
783
|
+
<td>Node.js</td>
|
|
784
|
+
<td>18 LTS</td>
|
|
785
|
+
<td>22 LTS (used by CI)</td>
|
|
786
|
+
</tr>
|
|
787
|
+
<tr>
|
|
788
|
+
<td>Browser</td>
|
|
789
|
+
<td>Modern evergreen</td>
|
|
790
|
+
<td>Latest stable Chrome/Firefox/Safari/Edge</td>
|
|
791
|
+
</tr>
|
|
792
|
+
</tbody>
|
|
793
|
+
</table>
|
|
794
|
+
<p>
|
|
795
|
+
AdminLTE 4 does <strong>not</strong> support Internet Explorer. If you need
|
|
796
|
+
IE11, stay on
|
|
797
|
+
<a href="https://github.com/ColorlibHQ/AdminLTE/releases/tag/v3.2.0"
|
|
798
|
+
>AdminLTE 3</a
|
|
799
|
+
>
|
|
800
|
+
or earlier.
|
|
801
|
+
</p>
|
|
802
|
+
<h2 id="where-to-next">Where to next</h2>
|
|
803
|
+
<ul>
|
|
804
|
+
<li>
|
|
805
|
+
<strong><a href="getting-started.html">Getting Started</a></strong> — a
|
|
806
|
+
working dashboard in 10 minutes
|
|
807
|
+
</li>
|
|
808
|
+
<li>
|
|
809
|
+
<strong><a href="layout.html">Layout</a></strong> — the app-wrapper
|
|
810
|
+
structure and responsive options
|
|
811
|
+
</li>
|
|
812
|
+
<li>
|
|
813
|
+
<strong><a href="customization.html">Customization</a></strong> — change
|
|
814
|
+
colours, sidebar width, spacing
|
|
815
|
+
</li>
|
|
816
|
+
<li>
|
|
817
|
+
<strong><a href="migration.html">Migration from v3</a></strong> — upgrading
|
|
818
|
+
an existing AdminLTE 3 project
|
|
819
|
+
</li>
|
|
820
|
+
</ul>
|
|
821
|
+
<h2 id="releases-and-changelog">Releases and changelog</h2>
|
|
822
|
+
<p>
|
|
823
|
+
Always grab the latest from the
|
|
824
|
+
<a href="https://github.com/ColorlibHQ/AdminLTE/releases"
|
|
825
|
+
>GitHub releases page</a
|
|
826
|
+
>
|
|
827
|
+
— that’s where the changelog lives.
|
|
828
|
+
</p>
|
|
829
|
+
<p>
|
|
830
|
+
Legacy releases:
|
|
831
|
+
<a href="https://github.com/ColorlibHQ/AdminLTE/releases/tag/v3.2.0"
|
|
832
|
+
>AdminLTE 3.2</a
|
|
833
|
+
>
|
|
834
|
+
·
|
|
835
|
+
<a href="https://github.com/ColorlibHQ/AdminLTE/releases/tag/v2.4.18"
|
|
836
|
+
>AdminLTE 2</a
|
|
837
|
+
>
|
|
838
|
+
·
|
|
839
|
+
<a href="https://github.com/ColorlibHQ/AdminLTE/releases/tag/1.3.1"
|
|
840
|
+
>AdminLTE 1</a
|
|
841
|
+
>
|
|
842
|
+
</p>
|
|
843
|
+
</div>
|
|
844
|
+
</div>
|
|
845
|
+
</div>
|
|
846
|
+
</div>
|
|
862
847
|
</div>
|
|
863
848
|
<!--end::Container-->
|
|
864
849
|
</div>
|
|
@@ -872,7 +857,7 @@
|
|
|
872
857
|
<!--end::To the end-->
|
|
873
858
|
<!--begin::Copyright-->
|
|
874
859
|
<strong>
|
|
875
|
-
Copyright © 2014-
|
|
860
|
+
Copyright © 2014-2026
|
|
876
861
|
<a href="https://adminlte.io" class="text-decoration-none">AdminLTE.io</a>.
|
|
877
862
|
</strong>
|
|
878
863
|
All rights reserved.
|
|
@@ -928,7 +913,71 @@
|
|
|
928
913
|
}
|
|
929
914
|
});
|
|
930
915
|
</script>
|
|
931
|
-
<!--end::OverlayScrollbars Configure-->
|
|
916
|
+
<!--end::OverlayScrollbars Configure--><!--begin::Color Mode Toggle (#6010)-->
|
|
917
|
+
<script>
|
|
918
|
+
(() => {
|
|
919
|
+
'use strict';
|
|
920
|
+
|
|
921
|
+
const STORAGE_KEY = 'lte-theme';
|
|
922
|
+
|
|
923
|
+
const getStoredTheme = () => localStorage.getItem(STORAGE_KEY);
|
|
924
|
+
const setStoredTheme = (theme) => localStorage.setItem(STORAGE_KEY, theme);
|
|
925
|
+
|
|
926
|
+
const prefersDark = () => globalThis.matchMedia('(prefers-color-scheme: dark)').matches;
|
|
927
|
+
|
|
928
|
+
const getPreferredTheme = () => {
|
|
929
|
+
const stored = getStoredTheme();
|
|
930
|
+
if (stored) return stored;
|
|
931
|
+
return prefersDark() ? 'dark' : 'light';
|
|
932
|
+
};
|
|
933
|
+
|
|
934
|
+
const setTheme = (theme) => {
|
|
935
|
+
const resolved = theme === 'auto' ? (prefersDark() ? 'dark' : 'light') : theme;
|
|
936
|
+
document.documentElement.setAttribute('data-bs-theme', resolved);
|
|
937
|
+
};
|
|
938
|
+
|
|
939
|
+
setTheme(getPreferredTheme());
|
|
940
|
+
|
|
941
|
+
const showActiveTheme = (theme) => {
|
|
942
|
+
// Highlight the active dropdown option
|
|
943
|
+
document.querySelectorAll('[data-bs-theme-value]').forEach((el) => {
|
|
944
|
+
el.classList.remove('active');
|
|
945
|
+
el.setAttribute('aria-pressed', 'false');
|
|
946
|
+
const check = el.querySelector('.bi-check-lg');
|
|
947
|
+
if (check) check.classList.add('d-none');
|
|
948
|
+
});
|
|
949
|
+
const active = document.querySelector(`[data-bs-theme-value="${theme}"]`);
|
|
950
|
+
if (active) {
|
|
951
|
+
active.classList.add('active');
|
|
952
|
+
active.setAttribute('aria-pressed', 'true');
|
|
953
|
+
const check = active.querySelector('.bi-check-lg');
|
|
954
|
+
if (check) check.classList.remove('d-none');
|
|
955
|
+
}
|
|
956
|
+
// Sync the topbar trigger icon
|
|
957
|
+
document.querySelectorAll('[data-lte-theme-icon]').forEach((icon) => {
|
|
958
|
+
icon.classList.toggle('d-none', icon.dataset.lteThemeIcon !== theme);
|
|
959
|
+
});
|
|
960
|
+
};
|
|
961
|
+
|
|
962
|
+
globalThis.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
|
|
963
|
+
const stored = getStoredTheme();
|
|
964
|
+
if (!stored || stored === 'auto') setTheme(getPreferredTheme());
|
|
965
|
+
});
|
|
966
|
+
|
|
967
|
+
document.addEventListener('DOMContentLoaded', () => {
|
|
968
|
+
showActiveTheme(getPreferredTheme());
|
|
969
|
+
document.querySelectorAll('[data-bs-theme-value]').forEach((toggle) => {
|
|
970
|
+
toggle.addEventListener('click', () => {
|
|
971
|
+
const theme = toggle.getAttribute('data-bs-theme-value');
|
|
972
|
+
setStoredTheme(theme);
|
|
973
|
+
setTheme(theme);
|
|
974
|
+
showActiveTheme(theme);
|
|
975
|
+
});
|
|
976
|
+
});
|
|
977
|
+
});
|
|
978
|
+
})();
|
|
979
|
+
</script>
|
|
980
|
+
<!--end::Color Mode Toggle-->
|
|
932
981
|
<!--end::Script-->
|
|
933
982
|
</body>
|
|
934
983
|
<!--end::Body-->
|