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.
Files changed (104) hide show
  1. package/CHANGELOG.md +69 -0
  2. package/README.md +202 -102
  3. package/dist/UI/general.html +330 -129
  4. package/dist/UI/icons.html +330 -129
  5. package/dist/UI/timeline.html +330 -129
  6. package/dist/css/adminlte.css +2798 -1167
  7. package/dist/css/adminlte.css.map +1 -1
  8. package/dist/css/adminlte.min.css +2 -2
  9. package/dist/css/adminlte.min.css.map +1 -1
  10. package/dist/css/adminlte.rtl.css +2798 -1167
  11. package/dist/css/adminlte.rtl.css.map +1 -1
  12. package/dist/css/adminlte.rtl.min.css +2 -2
  13. package/dist/css/adminlte.rtl.min.css.map +1 -1
  14. package/dist/docs/browser-support.html +287 -399
  15. package/dist/docs/color-mode.html +268 -384
  16. package/dist/docs/components/main-header.html +264 -376
  17. package/dist/docs/components/main-sidebar.html +279 -391
  18. package/dist/docs/customization.html +1080 -0
  19. package/dist/docs/deployment.html +1145 -0
  20. package/dist/docs/faq.html +883 -411
  21. package/dist/docs/getting-started.html +991 -0
  22. package/dist/docs/how-to-contribute.html +361 -464
  23. package/dist/docs/index.html +16 -0
  24. package/dist/docs/integrations.html +1231 -0
  25. package/dist/docs/introduction.html +479 -448
  26. package/dist/docs/javascript/accessibility.html +387 -493
  27. package/dist/docs/javascript/card-widget.html +472 -452
  28. package/dist/docs/javascript/direct-chat.html +350 -423
  29. package/dist/docs/javascript/fullscreen.html +374 -418
  30. package/dist/docs/javascript/layout.html +371 -438
  31. package/dist/docs/javascript/plugins-overview.html +1144 -0
  32. package/dist/docs/javascript/pushmenu.html +511 -494
  33. package/dist/docs/javascript/treeview.html +492 -402
  34. package/dist/docs/layout-blueprint.html +1087 -0
  35. package/dist/docs/layout.html +313 -417
  36. package/dist/docs/license.html +278 -389
  37. package/dist/docs/migration.html +1149 -0
  38. package/dist/docs/recipes.html +1185 -0
  39. package/dist/docs/rtl.html +957 -0
  40. package/dist/examples/lockscreen.html +91 -1
  41. package/dist/examples/login-v2.html +91 -1
  42. package/dist/examples/login.html +91 -1
  43. package/dist/examples/register-v2.html +91 -1
  44. package/dist/examples/register.html +91 -1
  45. package/dist/forms/elements.html +1405 -0
  46. package/dist/forms/{general.html → layout.html} +401 -489
  47. package/dist/forms/validation.html +1275 -0
  48. package/dist/forms/wizard.html +1410 -0
  49. package/dist/generate/theme.html +160 -4
  50. package/dist/index.html +330 -129
  51. package/dist/index2.html +333 -129
  52. package/dist/index3.html +330 -129
  53. package/dist/js/adminlte.js +8 -5
  54. package/dist/js/adminlte.js.map +1 -1
  55. package/dist/js/adminlte.min.js +2 -2
  56. package/dist/js/adminlte.min.js.map +1 -1
  57. package/dist/layout/collapsed-sidebar-without-hover.html +330 -129
  58. package/dist/layout/collapsed-sidebar.html +330 -129
  59. package/dist/layout/fixed-complete.html +330 -129
  60. package/dist/layout/fixed-footer.html +330 -129
  61. package/dist/layout/fixed-header.html +330 -129
  62. package/dist/layout/fixed-sidebar.html +330 -129
  63. package/dist/layout/layout-custom-area.html +330 -129
  64. package/dist/layout/layout-rtl.html +330 -129
  65. package/dist/layout/logo-switch.html +160 -4
  66. package/dist/layout/sidebar-mini.html +330 -129
  67. package/dist/layout/unfixed-sidebar.html +330 -129
  68. package/dist/mailbox/compose.html +1151 -0
  69. package/dist/mailbox/inbox.html +1509 -0
  70. package/dist/mailbox/read.html +1202 -0
  71. package/dist/pages/404.html +239 -0
  72. package/dist/pages/500.html +227 -0
  73. package/dist/pages/calendar.html +1266 -0
  74. package/dist/pages/chat.html +1427 -0
  75. package/dist/pages/faq.html +1383 -0
  76. package/dist/pages/file-manager.html +1835 -0
  77. package/dist/pages/invoice.html +1199 -0
  78. package/dist/pages/kanban.html +1439 -0
  79. package/dist/pages/maintenance.html +230 -0
  80. package/dist/pages/pricing.html +1279 -0
  81. package/dist/pages/profile.html +1382 -0
  82. package/dist/pages/projects.html +1644 -0
  83. package/dist/pages/settings.html +1387 -0
  84. package/dist/tables/data.html +1319 -0
  85. package/dist/tables/simple.html +330 -129
  86. package/dist/widgets/cards.html +330 -129
  87. package/dist/widgets/info-box.html +330 -129
  88. package/dist/widgets/small-box.html +330 -129
  89. package/github-issue-response.md +40 -0
  90. package/netlify.toml +16 -0
  91. package/package.json +31 -24
  92. package/src/scss/_app-header.scss +27 -0
  93. package/src/scss/_app-sidebar.scss +24 -30
  94. package/src/scss/_bootstrap-variables.scss +11 -4
  95. package/src/scss/_docs.scss +816 -0
  96. package/src/scss/_table.scss +4 -4
  97. package/src/scss/adminlte.scss +4 -1
  98. package/src/ts/accessibility.ts +9 -1
  99. package/src/ts/adminlte.ts +1 -1
  100. package/src/ts/fullscreen.ts +8 -4
  101. package/src/ts/push-menu.ts +66 -5
  102. package/.claude/settings.local.json +0 -37
  103. package/CLAUDE.md +0 -79
  104. package/release.md +0 -75
package/dist/forms/{general.html → layout.html} RENAMED
@@ -1,9 +1,34 @@
1
1
  <!doctype html>
2
2
  <html lang="en">
3
- <!--begin::Head-->
4
3
  <head>
5
4
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6
- <title>AdminLTE 4 | General Form Elements</title>
5
+ <title>AdminLTE 4 | Form Layout</title>
6
+
7
+ <!--begin::Theme Init (prevents flash of incorrect theme on load, #6043)-->
8
+ <script>
9
+ (() => {
10
+ 'use strict';
11
+ const STORAGE_KEY = 'lte-theme';
12
+ let stored = null;
13
+ try {
14
+ stored = localStorage.getItem(STORAGE_KEY);
15
+ } catch {
16
+ // localStorage may be unavailable (private mode, sandboxed iframe).
17
+ }
18
+ const prefersDark = globalThis.matchMedia('(prefers-color-scheme: dark)').matches;
19
+ // Mirror the resolution in _scripts.astro: explicit "dark"/"light" win,
20
+ // otherwise ("auto" or unset) fall back to the OS preference.
21
+ let resolved = 'light';
22
+ if (stored === 'dark' || stored === 'light') {
23
+ resolved = stored;
24
+ } else if (prefersDark) {
25
+ resolved = 'dark';
26
+ }
27
+ document.documentElement.setAttribute('data-bs-theme', resolved);
28
+ document.documentElement.style.colorScheme = resolved;
29
+ })();
30
+ </script>
31
+ <!--end::Theme Init-->
7
32
 
8
33
  <!--begin::Accessibility Meta Tags-->
9
34
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
@@ -13,7 +38,7 @@
13
38
  <!--end::Accessibility Meta Tags-->
14
39
 
15
40
  <!--begin::Primary Meta Tags-->
16
- <meta name="title" content="AdminLTE 4 | General Form Elements" />
41
+ <meta name="title" content="AdminLTE 4 | Form Layout" />
17
42
  <meta name="author" content="ColorlibHQ" />
18
43
  <meta
19
44
  name="description"
@@ -62,10 +87,7 @@
62
87
  <link rel="stylesheet" href="../css/adminlte.css" />
63
88
  <!--end::Required Plugin(AdminLTE)-->
64
89
  </head>
65
- <!--end::Head-->
66
- <!--begin::Body-->
67
90
  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
68
- <!--begin::App Wrapper-->
69
91
  <div class="app-wrapper">
70
92
  <!--begin::Header-->
71
93
  <nav class="app-header navbar navbar-expand bg-body">
@@ -78,11 +100,18 @@
78
100
  <i class="bi bi-list"></i>
79
101
  </a>
80
102
  </li>
103
+
81
104
  <li class="nav-item d-none d-md-block">
82
- <a href="#" class="nav-link">Home</a>
105
+ <a href="../index.html" class="nav-link">
106
+ <i class="bi bi-grid-1x2 me-1" aria-hidden="true"></i>
107
+ Live preview
108
+ </a>
83
109
  </li>
84
110
  <li class="nav-item d-none d-md-block">
85
- <a href="#" class="nav-link">Contact</a>
111
+ <a href="../docs/introduction.html" class="nav-link">
112
+ <i class="bi bi-book me-1" aria-hidden="true"></i>
113
+ Documentation
114
+ </a>
86
115
  </li>
87
116
  </ul>
88
117
  <!--end::Start Navbar Links-->
@@ -220,11 +249,70 @@
220
249
  <li class="nav-item">
221
250
  <a class="nav-link" href="#" data-lte-toggle="fullscreen">
222
251
  <i data-lte-icon="maximize" class="bi bi-arrows-fullscreen"></i>
223
- <i data-lte-icon="minimize" class="bi bi-fullscreen-exit" style="display: none"></i>
252
+ <i data-lte-icon="minimize" class="bi bi-fullscreen-exit d-none"></i>
224
253
  </a>
225
254
  </li>
226
255
  <!--end::Fullscreen Toggle-->
227
256
 
257
+ <!--begin::Color Mode Toggle (#6010)-->
258
+ <li class="nav-item dropdown">
259
+ <a
260
+ class="nav-link"
261
+ href="#"
262
+ id="bd-theme"
263
+ aria-label="Toggle color scheme"
264
+ data-bs-toggle="dropdown"
265
+ aria-expanded="false"
266
+ >
267
+ <i class="bi bi-sun-fill" data-lte-theme-icon="light"></i>
268
+ <i class="bi bi-moon-fill d-none" data-lte-theme-icon="dark"></i>
269
+ <i class="bi bi-circle-half d-none" data-lte-theme-icon="auto"></i>
270
+ </a>
271
+ <ul
272
+ class="dropdown-menu dropdown-menu-end"
273
+ aria-labelledby="bd-theme"
274
+ style="--bs-dropdown-min-width: 8rem"
275
+ >
276
+ <li>
277
+ <button
278
+ type="button"
279
+ class="dropdown-item d-flex align-items-center"
280
+ data-bs-theme-value="light"
281
+ aria-pressed="false"
282
+ >
283
+ <i class="bi bi-sun-fill me-2"></i>
284
+ Light
285
+ <i class="bi bi-check-lg ms-auto d-none"></i>
286
+ </button>
287
+ </li>
288
+ <li>
289
+ <button
290
+ type="button"
291
+ class="dropdown-item d-flex align-items-center"
292
+ data-bs-theme-value="dark"
293
+ aria-pressed="false"
294
+ >
295
+ <i class="bi bi-moon-fill me-2"></i>
296
+ Dark
297
+ <i class="bi bi-check-lg ms-auto d-none"></i>
298
+ </button>
299
+ </li>
300
+ <li>
301
+ <button
302
+ type="button"
303
+ class="dropdown-item d-flex align-items-center active"
304
+ data-bs-theme-value="auto"
305
+ aria-pressed="true"
306
+ >
307
+ <i class="bi bi-circle-half me-2"></i>
308
+ Auto
309
+ <i class="bi bi-check-lg ms-auto d-none"></i>
310
+ </button>
311
+ </li>
312
+ </ul>
313
+ </li>
314
+ <!--end::Color Mode Toggle-->
315
+
228
316
  <!--begin::User Menu Dropdown-->
229
317
  <li class="nav-item dropdown user-menu">
230
318
  <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
@@ -303,13 +391,11 @@
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="Main 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
400
  id="navigation"
315
401
  >
@@ -465,7 +551,7 @@
465
551
  </a>
466
552
  <ul class="nav nav-treeview">
467
553
  <li class="nav-item">
468
- <a href="../UI/general.html" class="nav-link active">
554
+ <a href="../UI/general.html" class="nav-link">
469
555
  <i class="nav-icon bi bi-circle"></i>
470
556
  <p>General</p>
471
557
  </a>
@@ -484,6 +570,36 @@
484
570
  </li>
485
571
  </ul>
486
572
  </li>
573
+ <li class="nav-item">
574
+ <a href="#" class="nav-link">
575
+ <i class="nav-icon bi bi-envelope"></i>
576
+ <p>
577
+ Mailbox
578
+ <i class="nav-arrow bi bi-chevron-right"></i>
579
+ </p>
580
+ </a>
581
+ <ul class="nav nav-treeview">
582
+ <li class="nav-item">
583
+ <a href="../mailbox/inbox.html" class="nav-link">
584
+ <i class="nav-icon bi bi-circle"></i>
585
+ <p>Inbox</p>
586
+ </a>
587
+ </li>
588
+ <li class="nav-item">
589
+ <a href="../mailbox/read.html" class="nav-link">
590
+ <i class="nav-icon bi bi-circle"></i>
591
+ <p>Read Message</p>
592
+ </a>
593
+ </li>
594
+ <li class="nav-item">
595
+ <a href="../mailbox/compose.html" class="nav-link">
596
+ <i class="nav-icon bi bi-circle"></i>
597
+ <p>Compose</p>
598
+ </a>
599
+ </li>
600
+ </ul>
601
+ </li>
602
+
487
603
  <li class="nav-item menu-open">
488
604
  <a href="#" class="nav-link active">
489
605
  <i class="nav-icon bi bi-pencil-square"></i>
@@ -494,9 +610,27 @@
494
610
  </a>
495
611
  <ul class="nav nav-treeview">
496
612
  <li class="nav-item">
497
- <a href="../forms/general.html" class="nav-link active">
613
+ <a href="../forms/elements.html" class="nav-link">
498
614
  <i class="nav-icon bi bi-circle"></i>
499
- <p>General Elements</p>
615
+ <p>Elements</p>
616
+ </a>
617
+ </li>
618
+ <li class="nav-item">
619
+ <a href="../forms/layout.html" class="nav-link active">
620
+ <i class="nav-icon bi bi-circle"></i>
621
+ <p>Layout</p>
622
+ </a>
623
+ </li>
624
+ <li class="nav-item">
625
+ <a href="../forms/validation.html" class="nav-link">
626
+ <i class="nav-icon bi bi-circle"></i>
627
+ <p>Validation</p>
628
+ </a>
629
+ </li>
630
+ <li class="nav-item">
631
+ <a href="../forms/wizard.html" class="nav-link">
632
+ <i class="nav-icon bi bi-circle"></i>
633
+ <p>Wizard</p>
500
634
  </a>
501
635
  </li>
502
636
  </ul>
@@ -516,6 +650,114 @@
516
650
  <p>Simple Tables</p>
517
651
  </a>
518
652
  </li>
653
+ <li class="nav-item">
654
+ <a href="../tables/data.html" class="nav-link">
655
+ <i class="nav-icon bi bi-circle"></i>
656
+ <p>Data Tables</p>
657
+ </a>
658
+ </li>
659
+ </ul>
660
+ </li>
661
+
662
+ <li class="nav-header">PAGES</li>
663
+ <li class="nav-item">
664
+ <a href="#" class="nav-link">
665
+ <i class="nav-icon bi bi-file-earmark-text"></i>
666
+ <p>
667
+ Pages
668
+ <i class="nav-arrow bi bi-chevron-right"></i>
669
+ </p>
670
+ </a>
671
+ <ul class="nav nav-treeview">
672
+ <li class="nav-item">
673
+ <a href="../pages/profile.html" class="nav-link">
674
+ <i class="nav-icon bi bi-circle"></i>
675
+ <p>Profile</p>
676
+ </a>
677
+ </li>
678
+ <li class="nav-item">
679
+ <a href="../pages/settings.html" class="nav-link">
680
+ <i class="nav-icon bi bi-circle"></i>
681
+ <p>Settings</p>
682
+ </a>
683
+ </li>
684
+ <li class="nav-item">
685
+ <a href="../pages/invoice.html" class="nav-link">
686
+ <i class="nav-icon bi bi-circle"></i>
687
+ <p>Invoice</p>
688
+ </a>
689
+ </li>
690
+ <li class="nav-item">
691
+ <a href="../pages/calendar.html" class="nav-link">
692
+ <i class="nav-icon bi bi-circle"></i>
693
+ <p>Calendar</p>
694
+ </a>
695
+ </li>
696
+ <li class="nav-item">
697
+ <a href="../pages/kanban.html" class="nav-link">
698
+ <i class="nav-icon bi bi-circle"></i>
699
+ <p>Kanban</p>
700
+ </a>
701
+ </li>
702
+ <li class="nav-item">
703
+ <a href="../pages/chat.html" class="nav-link">
704
+ <i class="nav-icon bi bi-circle"></i>
705
+ <p>Chat</p>
706
+ </a>
707
+ </li>
708
+ <li class="nav-item">
709
+ <a href="../pages/file-manager.html" class="nav-link">
710
+ <i class="nav-icon bi bi-circle"></i>
711
+ <p>File Manager</p>
712
+ </a>
713
+ </li>
714
+ <li class="nav-item">
715
+ <a href="../pages/projects.html" class="nav-link">
716
+ <i class="nav-icon bi bi-circle"></i>
717
+ <p>Projects</p>
718
+ </a>
719
+ </li>
720
+ <li class="nav-item">
721
+ <a href="../pages/pricing.html" class="nav-link">
722
+ <i class="nav-icon bi bi-circle"></i>
723
+ <p>Pricing</p>
724
+ </a>
725
+ </li>
726
+ <li class="nav-item">
727
+ <a href="../pages/faq.html" class="nav-link">
728
+ <i class="nav-icon bi bi-circle"></i>
729
+ <p>FAQ</p>
730
+ </a>
731
+ </li>
732
+ <li class="nav-item">
733
+ <a href="#" class="nav-link">
734
+ <i class="nav-icon bi bi-circle"></i>
735
+ <p>
736
+ Error
737
+ <i class="nav-arrow bi bi-chevron-right"></i>
738
+ </p>
739
+ </a>
740
+ <ul class="nav nav-treeview">
741
+ <li class="nav-item">
742
+ <a href="../pages/404.html" class="nav-link">
743
+ <i class="nav-icon bi bi-circle"></i>
744
+ <p>404</p>
745
+ </a>
746
+ </li>
747
+ <li class="nav-item">
748
+ <a href="../pages/500.html" class="nav-link">
749
+ <i class="nav-icon bi bi-circle"></i>
750
+ <p>500</p>
751
+ </a>
752
+ </li>
753
+ <li class="nav-item">
754
+ <a href="../pages/maintenance.html" class="nav-link">
755
+ <i class="nav-icon bi bi-circle"></i>
756
+ <p>Maintenance</p>
757
+ </a>
758
+ </li>
759
+ </ul>
760
+ </li>
519
761
  </ul>
520
762
  </li>
521
763
 
@@ -584,126 +826,6 @@
584
826
  </ul>
585
827
  </li>
586
828
 
587
- <li class="nav-header">DOCUMENTATIONS</li>
588
- <li class="nav-item">
589
- <a href="../docs/introduction.html" class="nav-link">
590
- <i class="nav-icon bi bi-download"></i>
591
- <p>Installation</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>
604
- </a>
605
- </li>
606
- <li class="nav-item">
607
- <a href="#" class="nav-link">
608
- <i class="nav-icon bi bi-ui-checks-grid"></i>
609
- <p>
610
- Components
611
- <i class="nav-arrow bi bi-chevron-right"></i>
612
- </p>
613
- </a>
614
- <ul class="nav nav-treeview">
615
- <li class="nav-item">
616
- <a href="../docs/components/main-header.html" class="nav-link">
617
- <i class="nav-icon bi bi-circle"></i>
618
- <p>Main Header</p>
619
- </a>
620
- </li>
621
- <li class="nav-item">
622
- <a href="../docs/components/main-sidebar.html" class="nav-link">
623
- <i class="nav-icon bi bi-circle"></i>
624
- <p>Main Sidebar</p>
625
- </a>
626
- </li>
627
- </ul>
628
- </li>
629
- <li class="nav-item">
630
- <a href="#" class="nav-link">
631
- <i class="nav-icon bi bi-filetype-js"></i>
632
- <p>
633
- Javascript
634
- <i class="nav-arrow bi bi-chevron-right"></i>
635
- </p>
636
- </a>
637
- <ul class="nav nav-treeview">
638
- <li class="nav-item">
639
- <a href="../docs/javascript/layout.html" class="nav-link">
640
- <i class="nav-icon bi bi-circle"></i>
641
- <p>Layout</p>
642
- </a>
643
- </li>
644
- <li class="nav-item">
645
- <a href="../docs/javascript/pushmenu.html" class="nav-link">
646
- <i class="nav-icon bi bi-circle"></i>
647
- <p>PushMenu</p>
648
- </a>
649
- </li>
650
- <li class="nav-item">
651
- <a href="../docs/javascript/treeview.html" class="nav-link">
652
- <i class="nav-icon bi bi-circle"></i>
653
- <p>Treeview</p>
654
- </a>
655
- </li>
656
- <li class="nav-item">
657
- <a href="../docs/javascript/card-widget.html" class="nav-link">
658
- <i class="nav-icon bi bi-circle"></i>
659
- <p>Card Widget</p>
660
- </a>
661
- </li>
662
- <li class="nav-item">
663
- <a href="../docs/javascript/direct-chat.html" class="nav-link">
664
- <i class="nav-icon bi bi-circle"></i>
665
- <p>Direct Chat</p>
666
- </a>
667
- </li>
668
- <li class="nav-item">
669
- <a href="../docs/javascript/fullscreen.html" class="nav-link">
670
- <i class="nav-icon bi bi-circle"></i>
671
- <p>Fullscreen</p>
672
- </a>
673
- </li>
674
- <li class="nav-item">
675
- <a href="../docs/javascript/accessibility.html" class="nav-link">
676
- <i class="nav-icon bi bi-circle"></i>
677
- <p>Accessibility</p>
678
- </a>
679
- </li>
680
- </ul>
681
- </li>
682
- <li class="nav-item">
683
- <a href="../docs/browser-support.html" class="nav-link">
684
- <i class="nav-icon bi bi-browser-edge"></i>
685
- <p>Browser Support</p>
686
- </a>
687
- </li>
688
- <li class="nav-item">
689
- <a href="../docs/how-to-contribute.html" class="nav-link">
690
- <i class="nav-icon bi bi-hand-thumbs-up-fill"></i>
691
- <p>How To Contribute</p>
692
- </a>
693
- </li>
694
- <li class="nav-item">
695
- <a href="../docs/faq.html" class="nav-link">
696
- <i class="nav-icon bi bi-question-circle-fill"></i>
697
- <p>FAQ</p>
698
- </a>
699
- </li>
700
- <li class="nav-item">
701
- <a href="../docs/license.html" class="nav-link">
702
- <i class="nav-icon bi bi-patch-check-fill"></i>
703
- <p>License</p>
704
- </a>
705
- </li>
706
-
707
829
  <li class="nav-header">MULTI LEVEL EXAMPLE</li>
708
830
  <li class="nav-item">
709
831
  <a href="#" class="nav-link">
@@ -791,201 +913,63 @@
791
913
  </li>
792
914
  </ul>
793
915
  <!--end::Sidebar Menu-->
916
+
917
+ <!-- Docs CTA (bottom of sidebar) -->
918
+ <div class="p-3 mt-3 border-top border-secondary border-opacity-25">
919
+ <a
920
+ href="../docs/introduction.html"
921
+ class="btn btn-sm btn-outline-light w-100 d-flex align-items-center justify-content-center gap-2"
922
+ >
923
+ <i class="bi bi-book" aria-hidden="true"></i>
924
+ View documentation
925
+ </a>
926
+ </div>
794
927
  </nav>
795
928
  </div>
796
929
  <!--end::Sidebar Wrapper-->
797
930
  </aside>
798
931
  <!--end::Sidebar-->
799
- <!--begin::App Main-->
800
932
  <main class="app-main">
801
- <!--begin::App Content Header-->
802
933
  <div class="app-content-header">
803
- <!--begin::Container-->
804
934
  <div class="container-fluid">
805
- <!--begin::Row-->
806
935
  <div class="row">
807
936
  <div class="col-sm-6">
808
- <h3 class="mb-0">General Form</h3>
937
+ <h3 class="mb-0">Form Layout</h3>
809
938
  </div>
810
939
  <div class="col-sm-6">
811
940
  <ol class="breadcrumb float-sm-end">
812
941
  <li class="breadcrumb-item"><a href="#">Home</a></li>
813
- <li class="breadcrumb-item active" aria-current="page">General Form</li>
942
+ <li class="breadcrumb-item"><a href="#">Forms</a></li>
943
+ <li class="breadcrumb-item active" aria-current="page">Layout</li>
814
944
  </ol>
815
945
  </div>
816
946
  </div>
817
- <!--end::Row-->
818
947
  </div>
819
- <!--end::Container-->
820
948
  </div>
821
- <!--end::App Content Header-->
822
- <!--begin::App Content-->
823
949
  <div class="app-content">
824
- <!--begin::Container-->
825
950
  <div class="container-fluid">
826
- <!--begin::Row-->
827
951
  <div class="row g-4">
828
- <!--begin::Col-->
829
952
  <div class="col-12">
830
953
  <div class="callout callout-info">
831
- For detailed documentation of Form visit
954
+ Layout patterns built on Bootstrap's grid +
832
955
  <a
833
- href="https://getbootstrap.com/docs/5.3/forms/overview/"
956
+ href="https://getbootstrap.com/docs/5.3/forms/layout/"
834
957
  target="_blank"
835
958
  rel="noopener noreferrer"
836
959
  class="callout-link"
960
+ >form layout</a
837
961
  >
838
- Bootstrap Form
839
- </a>
962
+ utilities.
840
963
  </div>
841
964
  </div>
842
- <!--end::Col-->
843
- <!--begin::Col-->
844
- <div class="col-md-6">
845
- <!--begin::Quick Example-->
846
- <div class="card card-primary card-outline mb-4">
847
- <!--begin::Header-->
848
- <div class="card-header">
849
- <div class="card-title">Quick Example</div>
850
- </div>
851
- <!--end::Header-->
852
- <!--begin::Form-->
853
- <form>
854
- <!--begin::Body-->
855
- <div class="card-body">
856
- <div class="mb-3">
857
- <label for="exampleInputEmail1" class="form-label">Email address</label>
858
- <input
859
- type="email"
860
- class="form-control"
861
- id="exampleInputEmail1"
862
- aria-describedby="emailHelp"
863
- />
864
- <div id="emailHelp" class="form-text">
865
- We'll never share your email with anyone else.
866
- </div>
867
- </div>
868
- <div class="mb-3">
869
- <label for="exampleInputPassword1" class="form-label">Password</label>
870
- <input type="password" class="form-control" id="exampleInputPassword1" />
871
- </div>
872
- <div class="input-group mb-3">
873
- <input type="file" class="form-control" id="inputGroupFile02" />
874
- <label class="input-group-text" for="inputGroupFile02">Upload</label>
875
- </div>
876
- <div class="mb-3 form-check">
877
- <input type="checkbox" class="form-check-input" id="exampleCheck1" />
878
- <label class="form-check-label" for="exampleCheck1">Check me out</label>
879
- </div>
880
- </div>
881
- <!--end::Body-->
882
- <!--begin::Footer-->
883
- <div class="card-footer">
884
- <button type="submit" class="btn btn-primary">Submit</button>
885
- </div>
886
- <!--end::Footer-->
887
- </form>
888
- <!--end::Form-->
889
- </div>
890
- <!--end::Quick Example-->
891
- <!--begin::Input Group-->
892
- <div class="card card-success card-outline mb-4">
893
- <!--begin::Header-->
894
- <div class="card-header">
895
- <div class="card-title">Input Group</div>
896
- </div>
897
- <!--end::Header-->
898
- <!--begin::Body-->
899
- <div class="card-body">
900
- <div class="input-group mb-3">
901
- <span class="input-group-text" id="basic-addon1">@</span>
902
- <input
903
- type="text"
904
- class="form-control"
905
- placeholder="Username"
906
- aria-label="Username"
907
- aria-describedby="basic-addon1"
908
- />
909
- </div>
910
-
911
- <div class="input-group mb-3">
912
- <input
913
- type="text"
914
- class="form-control"
915
- placeholder="Recipient's username"
916
- aria-label="Recipient's username"
917
- aria-describedby="basic-addon2"
918
- />
919
- <span class="input-group-text" id="basic-addon2">@example.com</span>
920
- </div>
921
-
922
- <div class="mb-3">
923
- <label for="basic-url" class="form-label">Your vanity URL</label>
924
- <div class="input-group">
925
- <span class="input-group-text" id="basic-addon3"
926
- >https://example.com/users/</span
927
- >
928
- <input
929
- type="text"
930
- class="form-control"
931
- id="basic-url"
932
- aria-describedby="basic-addon3 basic-addon4"
933
- />
934
- </div>
935
- <div class="form-text" id="basic-addon4">
936
- Example help text goes outside the input group.
937
- </div>
938
- </div>
939
965
 
940
- <div class="input-group mb-3">
941
- <span class="input-group-text">$</span>
942
- <input
943
- type="text"
944
- class="form-control"
945
- aria-label="Amount (to the nearest dollar)"
946
- />
947
- <span class="input-group-text">.00</span>
948
- </div>
949
-
950
- <div class="input-group mb-3">
951
- <input
952
- type="text"
953
- class="form-control"
954
- placeholder="Username"
955
- aria-label="Username"
956
- />
957
- <span class="input-group-text">@</span>
958
- <input
959
- type="text"
960
- class="form-control"
961
- placeholder="Server"
962
- aria-label="Server"
963
- />
964
- </div>
965
-
966
- <div class="input-group">
967
- <span class="input-group-text">With textarea</span>
968
- <textarea class="form-control" aria-label="With textarea"></textarea>
969
- </div>
970
- </div>
971
- <!--end::Body-->
972
- <!--begin::Footer-->
973
- <div class="card-footer">
974
- <button type="submit" class="btn btn-success">Submit</button>
975
- </div>
976
- <!--end::Footer-->
977
- </div>
978
- <!--end::Input Group-->
979
- <!--begin::Horizontal Form-->
966
+ <!-- Horizontal Form -->
967
+ <div class="col-md-6">
980
968
  <div class="card card-warning card-outline mb-4">
981
- <!--begin::Header-->
982
969
  <div class="card-header">
983
970
  <div class="card-title">Horizontal Form</div>
984
971
  </div>
985
- <!--end::Header-->
986
- <!--begin::Form-->
987
972
  <form>
988
- <!--begin::Body-->
989
973
  <div class="card-body">
990
974
  <div class="row mb-3">
991
975
  <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
@@ -1011,7 +995,7 @@
1011
995
  value="option1"
1012
996
  checked
1013
997
  />
1014
- <label class="form-check-label" for="gridRadios1"> First radio </label>
998
+ <label class="form-check-label" for="gridRadios1">First radio</label>
1015
999
  </div>
1016
1000
  <div class="form-check">
1017
1001
  <input
@@ -1021,7 +1005,7 @@
1021
1005
  id="gridRadios2"
1022
1006
  value="option2"
1023
1007
  />
1024
- <label class="form-check-label" for="gridRadios2"> Second radio </label>
1008
+ <label class="form-check-label" for="gridRadios2">Second radio</label>
1025
1009
  </div>
1026
1010
  <div class="form-check disabled">
1027
1011
  <input
@@ -1032,9 +1016,9 @@
1032
1016
  value="option3"
1033
1017
  disabled
1034
1018
  />
1035
- <label class="form-check-label" for="gridRadios3">
1036
- Third disabled radio
1037
- </label>
1019
+ <label class="form-check-label" for="gridRadios3"
1020
+ >Third disabled radio</label
1021
+ >
1038
1022
  </div>
1039
1023
  </div>
1040
1024
  </fieldset>
@@ -1042,51 +1026,82 @@
1042
1026
  <div class="col-sm-10 offset-sm-2">
1043
1027
  <div class="form-check">
1044
1028
  <input class="form-check-input" type="checkbox" id="gridCheck1" />
1045
- <label class="form-check-label" for="gridCheck1">
1046
- Example checkbox
1047
- </label>
1029
+ <label class="form-check-label" for="gridCheck1"
1030
+ >Example checkbox</label
1031
+ >
1048
1032
  </div>
1049
1033
  </div>
1050
1034
  </div>
1051
1035
  </div>
1052
- <!--end::Body-->
1053
- <!--begin::Footer-->
1054
1036
  <div class="card-footer">
1055
1037
  <button type="submit" class="btn btn-warning">Sign in</button>
1056
1038
  <button type="submit" class="btn float-end">Cancel</button>
1057
1039
  </div>
1058
- <!--end::Footer-->
1059
1040
  </form>
1060
- <!--end::Form-->
1061
1041
  </div>
1062
- <!--end::Horizontal Form-->
1063
1042
  </div>
1064
- <!--end::Col-->
1065
- <!--begin::Col-->
1043
+
1044
+ <!-- Inline Form -->
1045
+ <div class="col-md-6">
1046
+ <div class="card card-primary card-outline mb-4">
1047
+ <div class="card-header">
1048
+ <div class="card-title">Inline Form</div>
1049
+ </div>
1050
+ <div class="card-body">
1051
+ <form class="row row-cols-lg-auto g-3 align-items-center">
1052
+ <div class="col-12">
1053
+ <label class="visually-hidden" for="inlineUser">Username</label>
1054
+ <div class="input-group">
1055
+ <div class="input-group-text">@</div>
1056
+ <input
1057
+ type="text"
1058
+ class="form-control"
1059
+ id="inlineUser"
1060
+ placeholder="Username"
1061
+ />
1062
+ </div>
1063
+ </div>
1064
+ <div class="col-12">
1065
+ <label class="visually-hidden" for="inlineSelect">Preference</label>
1066
+ <select class="form-select" id="inlineSelect">
1067
+ <option selected>Choose&hellip;</option>
1068
+ <option>One</option>
1069
+ <option>Two</option>
1070
+ </select>
1071
+ </div>
1072
+ <div class="col-12">
1073
+ <div class="form-check">
1074
+ <input class="form-check-input" type="checkbox" id="inlineCheck" />
1075
+ <label class="form-check-label" for="inlineCheck">Remember me</label>
1076
+ </div>
1077
+ </div>
1078
+ <div class="col-12">
1079
+ <button type="submit" class="btn btn-primary">Submit</button>
1080
+ </div>
1081
+ </form>
1082
+ </div>
1083
+ </div>
1084
+ </div>
1085
+
1086
+ <!-- Different Height -->
1066
1087
  <div class="col-md-6">
1067
- <!--begin::Different Height-->
1068
1088
  <div class="card card-secondary card-outline mb-4">
1069
- <!--begin::Header-->
1070
1089
  <div class="card-header">
1071
1090
  <div class="card-title">Different Height</div>
1072
1091
  </div>
1073
- <!--end::Header-->
1074
- <!--begin::Body-->
1075
1092
  <div class="card-body">
1076
1093
  <input
1077
- class="form-control form-control-lg"
1094
+ class="form-control form-control-lg mb-3"
1078
1095
  type="text"
1079
1096
  placeholder=".form-control-lg"
1080
1097
  aria-label=".form-control-lg example"
1081
1098
  />
1082
- <br />
1083
1099
  <input
1084
- class="form-control"
1100
+ class="form-control mb-3"
1085
1101
  type="text"
1086
1102
  placeholder="Default input"
1087
1103
  aria-label="default input example"
1088
1104
  />
1089
- <br />
1090
1105
  <input
1091
1106
  class="form-control form-control-sm"
1092
1107
  type="text"
@@ -1094,197 +1109,34 @@
1094
1109
  aria-label=".form-control-sm example"
1095
1110
  />
1096
1111
  </div>
1097
- <!--end::Body-->
1098
1112
  </div>
1099
- <!--end::Different Height-->
1100
- <!--begin::Different Width-->
1113
+ </div>
1114
+
1115
+ <!-- Different Width -->
1116
+ <div class="col-md-6">
1101
1117
  <div class="card card-danger card-outline mb-4">
1102
- <!--begin::Header-->
1103
1118
  <div class="card-header">
1104
1119
  <div class="card-title">Different Width</div>
1105
1120
  </div>
1106
- <!--end::Header-->
1107
- <!--begin::Body-->
1108
1121
  <div class="card-body">
1109
- <!--begin::Row-->
1110
- <div class="row">
1111
- <!--begin::Col-->
1122
+ <div class="row g-2">
1112
1123
  <div class="col-3">
1113
1124
  <input type="text" class="form-control" placeholder=".col-3" />
1114
1125
  </div>
1115
- <!--end::Col-->
1116
- <!--begin::Col-->
1117
1126
  <div class="col-4">
1118
1127
  <input type="text" class="form-control" placeholder=".col-4" />
1119
1128
  </div>
1120
- <!--end::Col-->
1121
- <!--begin::Col-->
1122
1129
  <div class="col-5">
1123
1130
  <input type="text" class="form-control" placeholder=".col-5" />
1124
1131
  </div>
1125
- <!--end::Col-->
1126
1132
  </div>
1127
- <!--end::Row-->
1128
- </div>
1129
- <!--end::Body-->
1130
- </div>
1131
- <!--end::Different Width-->
1132
- <!--begin::Form Validation-->
1133
- <div class="card card-info card-outline mb-4">
1134
- <!--begin::Header-->
1135
- <div class="card-header">
1136
- <div class="card-title">Form Validation</div>
1137
1133
  </div>
1138
- <!--end::Header-->
1139
- <!--begin::Form-->
1140
- <form class="needs-validation" novalidate>
1141
- <!--begin::Body-->
1142
- <div class="card-body">
1143
- <!--begin::Row-->
1144
- <div class="row g-3">
1145
- <!--begin::Col-->
1146
- <div class="col-md-6">
1147
- <label for="validationCustom01" class="form-label">First name</label>
1148
- <input
1149
- type="text"
1150
- class="form-control"
1151
- id="validationCustom01"
1152
- value="Mark"
1153
- required
1154
- />
1155
- <div class="valid-feedback">Looks good!</div>
1156
- </div>
1157
- <!--end::Col-->
1158
- <!--begin::Col-->
1159
- <div class="col-md-6">
1160
- <label for="validationCustom02" class="form-label">Last name</label>
1161
- <input
1162
- type="text"
1163
- class="form-control"
1164
- id="validationCustom02"
1165
- value="Otto"
1166
- required
1167
- />
1168
- <div class="valid-feedback">Looks good!</div>
1169
- </div>
1170
- <!--end::Col-->
1171
- <!--begin::Col-->
1172
- <div class="col-md-6">
1173
- <label for="validationCustomUsername" class="form-label">Username</label>
1174
- <div class="input-group has-validation">
1175
- <span class="input-group-text" id="inputGroupPrepend">@</span>
1176
- <input
1177
- type="text"
1178
- class="form-control"
1179
- id="validationCustomUsername"
1180
- aria-describedby="inputGroupPrepend"
1181
- required
1182
- />
1183
- <div class="invalid-feedback">Please choose a username.</div>
1184
- </div>
1185
- </div>
1186
- <!--end::Col-->
1187
- <!--begin::Col-->
1188
- <div class="col-md-6">
1189
- <label for="validationCustom03" class="form-label">City</label>
1190
- <input
1191
- type="text"
1192
- class="form-control"
1193
- id="validationCustom03"
1194
- required
1195
- />
1196
- <div class="invalid-feedback">Please provide a valid city.</div>
1197
- </div>
1198
- <!--end::Col-->
1199
- <!--begin::Col-->
1200
- <div class="col-md-6">
1201
- <label for="validationCustom04" class="form-label">State</label>
1202
- <select class="form-select" id="validationCustom04" required>
1203
- <option selected disabled value="">Choose...</option>
1204
- <option>...</option>
1205
- </select>
1206
- <div class="invalid-feedback">Please select a valid state.</div>
1207
- </div>
1208
- <!--end::Col-->
1209
- <!--begin::Col-->
1210
- <div class="col-md-6">
1211
- <label for="validationCustom05" class="form-label">Zip</label>
1212
- <input
1213
- type="text"
1214
- class="form-control"
1215
- id="validationCustom05"
1216
- required
1217
- />
1218
- <div class="invalid-feedback">Please provide a valid zip.</div>
1219
- </div>
1220
- <!--end::Col-->
1221
- <!--begin::Col-->
1222
- <div class="col-12">
1223
- <div class="form-check">
1224
- <input
1225
- class="form-check-input"
1226
- type="checkbox"
1227
- value=""
1228
- id="invalidCheck"
1229
- required
1230
- />
1231
- <label class="form-check-label" for="invalidCheck">
1232
- Agree to terms and conditions
1233
- </label>
1234
- <div class="invalid-feedback">You must agree before submitting.</div>
1235
- </div>
1236
- </div>
1237
- <!--end::Col-->
1238
- </div>
1239
- <!--end::Row-->
1240
- </div>
1241
- <!--end::Body-->
1242
- <!--begin::Footer-->
1243
- <div class="card-footer">
1244
- <button class="btn btn-info" type="submit">Submit form</button>
1245
- </div>
1246
- <!--end::Footer-->
1247
- </form>
1248
- <!--end::Form-->
1249
- <!--begin::JavaScript-->
1250
- <script>
1251
- // Example starter JavaScript for disabling form submissions if there are invalid fields
1252
- (() => {
1253
- 'use strict';
1254
-
1255
- // Fetch all the forms we want to apply custom Bootstrap validation styles to
1256
- const forms = document.querySelectorAll('.needs-validation');
1257
-
1258
- // Loop over them and prevent submission
1259
- Array.from(forms).forEach((form) => {
1260
- form.addEventListener(
1261
- 'submit',
1262
- (event) => {
1263
- if (!form.checkValidity()) {
1264
- event.preventDefault();
1265
- event.stopPropagation();
1266
- }
1267
-
1268
- form.classList.add('was-validated');
1269
- },
1270
- false,
1271
- );
1272
- });
1273
- })();
1274
- </script>
1275
- <!--end::JavaScript-->
1276
1134
  </div>
1277
- <!--end::Form Validation-->
1278
1135
  </div>
1279
- <!--end::Col-->
1280
1136
  </div>
1281
- <!--end::Row-->
1282
1137
  </div>
1283
- <!--end::Container-->
1284
1138
  </div>
1285
- <!--end::App Content-->
1286
1139
  </main>
1287
- <!--end::App Main-->
1288
1140
  <!--begin::Footer-->
1289
1141
  <footer class="app-footer">
1290
1142
  <!--begin::To the end-->
@@ -1300,8 +1152,6 @@
1300
1152
  </footer>
1301
1153
  <!--end::Footer-->
1302
1154
  </div>
1303
- <!--end::App Wrapper-->
1304
- <!--begin::Script-->
1305
1155
  <!--begin::Third Party Plugin(OverlayScrollbars)-->
1306
1156
  <script
1307
1157
  src="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.11.0/browser/overlayscrollbars.browser.es6.min.js"
@@ -1348,8 +1198,70 @@
1348
1198
  }
1349
1199
  });
1350
1200
  </script>
1351
- <!--end::OverlayScrollbars Configure-->
1352
- <!--end::Script-->
1201
+ <!--end::OverlayScrollbars Configure--><!--begin::Color Mode Toggle (#6010)-->
1202
+ <script>
1203
+ (() => {
1204
+ 'use strict';
1205
+
1206
+ const STORAGE_KEY = 'lte-theme';
1207
+
1208
+ const getStoredTheme = () => localStorage.getItem(STORAGE_KEY);
1209
+ const setStoredTheme = (theme) => localStorage.setItem(STORAGE_KEY, theme);
1210
+
1211
+ const prefersDark = () => globalThis.matchMedia('(prefers-color-scheme: dark)').matches;
1212
+
1213
+ const getPreferredTheme = () => {
1214
+ const stored = getStoredTheme();
1215
+ if (stored) return stored;
1216
+ return prefersDark() ? 'dark' : 'light';
1217
+ };
1218
+
1219
+ const setTheme = (theme) => {
1220
+ const resolved = theme === 'auto' ? (prefersDark() ? 'dark' : 'light') : theme;
1221
+ document.documentElement.setAttribute('data-bs-theme', resolved);
1222
+ };
1223
+
1224
+ setTheme(getPreferredTheme());
1225
+
1226
+ const showActiveTheme = (theme) => {
1227
+ // Highlight the active dropdown option
1228
+ document.querySelectorAll('[data-bs-theme-value]').forEach((el) => {
1229
+ el.classList.remove('active');
1230
+ el.setAttribute('aria-pressed', 'false');
1231
+ const check = el.querySelector('.bi-check-lg');
1232
+ if (check) check.classList.add('d-none');
1233
+ });
1234
+ const active = document.querySelector(`[data-bs-theme-value="${theme}"]`);
1235
+ if (active) {
1236
+ active.classList.add('active');
1237
+ active.setAttribute('aria-pressed', 'true');
1238
+ const check = active.querySelector('.bi-check-lg');
1239
+ if (check) check.classList.remove('d-none');
1240
+ }
1241
+ // Sync the topbar trigger icon
1242
+ document.querySelectorAll('[data-lte-theme-icon]').forEach((icon) => {
1243
+ icon.classList.toggle('d-none', icon.dataset.lteThemeIcon !== theme);
1244
+ });
1245
+ };
1246
+
1247
+ globalThis.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
1248
+ const stored = getStoredTheme();
1249
+ if (!stored || stored === 'auto') setTheme(getPreferredTheme());
1250
+ });
1251
+
1252
+ document.addEventListener('DOMContentLoaded', () => {
1253
+ showActiveTheme(getPreferredTheme());
1254
+ document.querySelectorAll('[data-bs-theme-value]').forEach((toggle) => {
1255
+ toggle.addEventListener('click', () => {
1256
+ const theme = toggle.getAttribute('data-bs-theme-value');
1257
+ setStoredTheme(theme);
1258
+ setTheme(theme);
1259
+ showActiveTheme(theme);
1260
+ });
1261
+ });
1262
+ });
1263
+ })();
1264
+ </script>
1265
+ <!--end::Color Mode Toggle-->
1353
1266
  </body>
1354
- <!--end::Body-->
1355
1267
  </html>