admin-lte 4.0.0-alpha2 → 4.0.0-beta1

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 (142) hide show
  1. package/.bundlewatch.config.json +6 -6
  2. package/.cache/.eslintcache +1 -1
  3. package/.cache/.stylelintcache +1 -1
  4. package/.gitpod.yml +1 -1
  5. package/README.md +9 -4
  6. package/dist/assets/img/AdminLTEFullLogo.png +0 -0
  7. package/dist/css/adminlte.css +879 -418
  8. package/dist/css/adminlte.css.map +1 -1
  9. package/dist/css/adminlte.min.css +2 -2
  10. package/dist/css/adminlte.min.css.map +1 -1
  11. package/dist/css/adminlte.rtl.css +886 -416
  12. package/dist/css/adminlte.rtl.css.map +1 -1
  13. package/dist/css/adminlte.rtl.min.css +2 -2
  14. package/dist/css/adminlte.rtl.min.css.map +1 -1
  15. package/dist/js/adminlte.js +178 -96
  16. package/dist/js/adminlte.js.map +1 -1
  17. package/dist/js/adminlte.min.js +3 -3
  18. package/dist/js/adminlte.min.js.map +1 -1
  19. package/dist/pages/UI/general.html +895 -0
  20. package/dist/pages/UI/timeline.html +309 -515
  21. package/dist/pages/docs/browser-support.html +265 -433
  22. package/dist/pages/docs/color-mode.html +482 -615
  23. package/dist/pages/docs/components/main-header.html +516 -703
  24. package/dist/pages/docs/components/main-sidebar.html +550 -0
  25. package/dist/pages/docs/faq.html +433 -0
  26. package/dist/pages/docs/how-to-contribute.html +474 -0
  27. package/dist/pages/docs/introduction.html +463 -0
  28. package/dist/pages/docs/javascript/treeview.html +453 -0
  29. package/dist/pages/docs/layout.html +293 -433
  30. package/dist/pages/docs/license.html +436 -0
  31. package/dist/pages/examples/lockscreen.html +69 -0
  32. package/dist/pages/examples/login-v2.html +88 -0
  33. package/dist/pages/examples/login.html +49 -100
  34. package/dist/pages/examples/register-v2.html +90 -0
  35. package/dist/pages/examples/register.html +50 -103
  36. package/dist/pages/forms/general.html +430 -454
  37. package/dist/pages/index.html +466 -740
  38. package/dist/pages/index2.html +672 -1041
  39. package/dist/pages/index3.html +371 -629
  40. package/dist/pages/layout/collapsed-sidebar.html +441 -0
  41. package/dist/pages/layout/fixed-complete.html +541 -0
  42. package/dist/pages/layout/fixed-sidebar.html +263 -446
  43. package/dist/pages/layout/layout-rtl.html +263 -445
  44. package/dist/pages/layout/logo-switch.html +234 -0
  45. package/dist/pages/layout/sidebar-mini.html +263 -445
  46. package/dist/pages/layout/unfixed-sidebar.html +263 -445
  47. package/dist/pages/tables/simple.html +314 -499
  48. package/dist/pages/widgets/cards.html +326 -629
  49. package/dist/pages/widgets/info-box.html +348 -674
  50. package/dist/pages/widgets/small-box.html +279 -465
  51. package/index.html +6 -10
  52. package/package.json +34 -30
  53. package/src/assets/img/AdminLTEFullLogo.png +0 -0
  54. package/src/config/astro.config.mjs +3 -1
  55. package/src/html/.prettierrc.js +11 -0
  56. package/src/html/components/_head.astro +32 -26
  57. package/src/html/components/_scripts.astro +27 -28
  58. package/src/html/components/dashboard/_footer.astro +14 -8
  59. package/src/html/components/dashboard/_sidenav.astro +352 -113
  60. package/src/html/components/dashboard/_topbar.astro +99 -50
  61. package/src/html/components/docs/{browser-support/index.md → browser-support.mdx} +2 -1
  62. package/src/html/components/docs/color-mode.mdx +169 -0
  63. package/src/html/components/docs/components/{main-header-1.md → main-header.mdx} +60 -21
  64. package/src/html/components/docs/components/main-sidebar.mdx +129 -0
  65. package/src/html/components/docs/faq.mdx +11 -0
  66. package/src/html/components/docs/how-to-contribute.mdx +34 -0
  67. package/src/html/components/docs/{introduction/index.md → introduction.mdx} +30 -5
  68. package/src/html/components/docs/license.mdx +9 -0
  69. package/src/html/components/javascript/treeview.mdx +39 -0
  70. package/src/html/pages/UI/general.astro +1451 -0
  71. package/src/html/pages/UI/timeline.astro +111 -48
  72. package/src/html/pages/docs/browser-support.astro +24 -11
  73. package/src/html/pages/docs/color-mode.astro +91 -42
  74. package/src/html/pages/docs/components/main-header.astro +134 -46
  75. package/src/html/pages/docs/components/main-sidebar.astro +71 -0
  76. package/src/html/pages/docs/faq.astro +71 -0
  77. package/src/html/pages/docs/how-to-contribute.astro +71 -0
  78. package/src/html/pages/docs/{index.astro → introduction.astro} +24 -11
  79. package/src/html/pages/docs/javascript/treeview.astro +71 -0
  80. package/src/html/pages/docs/layout.astro +62 -19
  81. package/src/html/pages/docs/license.astro +71 -0
  82. package/src/html/pages/examples/lockscreen.astro +63 -0
  83. package/src/html/pages/examples/login-v2.astro +109 -0
  84. package/src/html/pages/examples/login.astro +34 -16
  85. package/src/html/pages/examples/register-v2.astro +116 -0
  86. package/src/html/pages/examples/register.astro +36 -18
  87. package/src/html/pages/forms/general.astro +568 -37
  88. package/src/html/pages/index.astro +403 -157
  89. package/src/html/pages/index2.astro +715 -255
  90. package/src/html/pages/index3.astro +298 -197
  91. package/src/html/pages/layout/collapsed-sidebar.astro +110 -0
  92. package/src/html/pages/layout/fixed-complete.astro +209 -0
  93. package/src/html/pages/layout/fixed-sidebar.astro +52 -27
  94. package/src/html/pages/layout/layout-rtl.astro +53 -28
  95. package/src/html/pages/layout/logo-switch.astro +212 -0
  96. package/src/html/pages/layout/sidebar-mini.astro +53 -28
  97. package/src/html/pages/layout/unfixed-sidebar.astro +51 -27
  98. package/src/html/pages/tables/simple.astro +226 -86
  99. package/src/html/pages/widgets/cards.astro +137 -72
  100. package/src/html/pages/widgets/info-box.astro +96 -41
  101. package/src/html/pages/widgets/small-box.astro +93 -32
  102. package/src/scss/_app-content.scss +52 -0
  103. package/src/scss/_app-footer.scss +1 -1
  104. package/src/scss/_app-main.scss +6 -5
  105. package/src/scss/_app-sidebar.scss +244 -70
  106. package/src/scss/_bootstrap-variables.scss +26 -22
  107. package/src/scss/_callouts.scss +6 -0
  108. package/src/scss/_cards.scss +32 -7
  109. package/src/scss/_compact-mode.scss +79 -0
  110. package/src/scss/_direct-chat.scss +5 -0
  111. package/src/scss/_dropdown.scss +1 -0
  112. package/src/scss/_info-box.scss +2 -10
  113. package/src/scss/_small-box.scss +0 -3
  114. package/src/scss/_timeline.scss +1 -0
  115. package/src/scss/_toasts.scss +33 -0
  116. package/src/scss/_variables.scss +32 -9
  117. package/src/scss/adminlte.scss +1 -2
  118. package/src/scss/mixins/_animations.scss +0 -5
  119. package/src/scss/pages/_lockscreen.scss +75 -0
  120. package/src/scss/pages/_login_and_register.scss +1 -3
  121. package/src/scss/parts/_core.scss +2 -0
  122. package/src/scss/parts/_extra-components.scss +1 -0
  123. package/src/scss/parts/_pages.scss +1 -0
  124. package/src/ts/adminlte.ts +3 -1
  125. package/src/ts/card-widget.ts +20 -52
  126. package/src/ts/direct-chat.ts +5 -4
  127. package/src/ts/fullscreen.ts +110 -0
  128. package/src/ts/layout.ts +5 -4
  129. package/src/ts/push-menu.ts +6 -22
  130. package/src/ts/treeview.ts +34 -11
  131. package/src/ts/util/index.ts +15 -13
  132. package/src/utils/index.js +20 -3
  133. package/.idea/AdminLTE.iml +0 -12
  134. package/.idea/codeStyles/Project.xml +0 -29
  135. package/.idea/codeStyles/codeStyleConfig.xml +0 -5
  136. package/.idea/inspectionProfiles/Project_Default.xml +0 -7
  137. package/.idea/modules.xml +0 -8
  138. package/.idea/php.xml +0 -28
  139. package/.idea/vcs.xml +0 -6
  140. package/dist/pages/docs.html +0 -617
  141. package/src/html/components/docs/color-mode/navbar-html.md +0 -80
  142. package/src/html/components/docs/color-mode/toggle-script.md +0 -48
package/dist/pages/docs.html DELETED
@@ -1,617 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
-
4
- <head>
5
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
6
- <!-- Primary Meta Tags -->
7
- <title>Introduction | AdminLTE 4</title>
8
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
9
- <meta name="title" content="Introduction | AdminLTE 4">
10
- <meta name="author" content="ColorlibHQ">
11
- <meta name="description" content="AdminLTE is a Free Bootstrap 5 Admin Dashboard, 30 example pages using Vanilla JS.">
12
- <meta name="keywords" content="bootstrap 5, bootstrap, bootstrap 5 admin dashboard, bootstrap 5 dashboard, bootstrap 5 charts, bootstrap 5 calendar, bootstrap 5 datepicker, bootstrap 5 tables, bootstrap 5 datatable, vanilla js datatable, colorlibhq, colorlibhq dashboard, colorlibhq admin dashboard">
13
-
14
- <!-- OPTIONAL LINKS -->
15
-
16
- <!-- Google Font: Source Sans Pro -->
17
- <link rel="preconnect" href="https://fonts.googleapis.com">
18
- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
19
- <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,300;0,400;0,700;1,400&display=swap" rel="stylesheet">
20
-
21
- <!-- overlayscrollbars -->
22
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.1.0/styles/overlayscrollbars.min.css" integrity="sha256-LWLZPJ7X1jJLI5OG5695qDemW1qQ7lNdbTfQ64ylbUY=" crossorigin="anonymous">
23
-
24
- <!-- @fortawesome/fontawesome-free -->
25
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.3.0/css/all.min.css" integrity="sha256-/4UQcSmErDzPCMAiuOiWPVVsNN2s3ZY/NsmXNcj0IFc=" crossorigin="anonymous">
26
-
27
- <!-- REQUIRED LINKS -->
28
-
29
- <!-- Theme style -->
30
- <link rel="stylesheet" href="../../../dist/css/adminlte.css">
31
- </head>
32
-
33
- <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
34
- <div class="app-wrapper">
35
- <!-- Navbar -->
36
- <nav class="app-header navbar navbar-expand bg-body">
37
- <div class="container-fluid">
38
- <!-- Start navbar links -->
39
- <ul class="navbar-nav">
40
- <li class="nav-item">
41
- <a class="nav-link" data-lte-toggle="sidebar" href="#" role="button"><i class="fa-solid fa-bars"></i></a>
42
- </li>
43
- <li class="nav-item d-none d-md-block">
44
- <a href="#" class="nav-link">Home</a>
45
- </li>
46
- <li class="nav-item d-none d-md-block">
47
- <a href="#" class="nav-link">Contact</a>
48
- </li>
49
- </ul>
50
- <!-- End navbar links -->
51
-
52
- <ul class="navbar-nav ms-auto">
53
- <!-- Navbar Search -->
54
- <li class="nav-item">
55
- <a class="nav-link" data-widget="navbar-search" href="#" role="button">
56
- <i class="fa-solid fa-search"></i>
57
- </a>
58
- </li>
59
-
60
- <!-- Messages Dropdown Menu -->
61
- <li class="nav-item dropdown">
62
- <a class="nav-link" data-bs-toggle="dropdown" href="#">
63
- <i class="fa-regular fa-comments"></i>
64
- <span class="navbar-badge badge text-bg-danger">3</span>
65
- </a>
66
- <div class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
67
- <a href="#" class="dropdown-item">
68
- <!-- Message Start -->
69
- <div class="d-flex">
70
- <div class="flex-shrink-0">
71
- <img src="../../../dist/assets/img/user1-128x128.jpg" alt="User Avatar" class="img-size-50 rounded-circle me-3">
72
- </div>
73
- <div class="flex-grow-1">
74
- <h3 class="dropdown-item-title">
75
- Brad Diesel
76
- <span class="float-end fs-7 text-danger"><i class="fa-solid fa-star"></i></span>
77
- </h3>
78
- <p class="fs-7">Call me whenever you can...</p>
79
- <p class="fs-7 text-secondary"><i class="fa-regular fa-clock me-1"></i> 4 Hours Ago</p>
80
- </div>
81
- </div>
82
- <!-- Message End -->
83
- </a>
84
- <div class="dropdown-divider"></div>
85
- <a href="#" class="dropdown-item">
86
- <!-- Message Start -->
87
- <div class="d-flex">
88
- <div class="flex-shrink-0">
89
- <img src="../../../dist/assets/img/user8-128x128.jpg" alt="User Avatar" class="img-size-50 rounded-circle me-3">
90
- </div>
91
- <div class="flex-grow-1">
92
- <h3 class="dropdown-item-title">
93
- John Pierce
94
- <span class="float-end fs-7 text-secondary"><i class="fa-solid fa-star"></i></span>
95
- </h3>
96
- <p class="fs-7">I got your message bro</p>
97
- <p class="fs-7 text-secondary"><i class="fa-regular fa-clock me-1"></i> 4 Hours Ago</p>
98
- </div>
99
- </div>
100
- <!-- Message End -->
101
- </a>
102
- <div class="dropdown-divider"></div>
103
- <a href="#" class="dropdown-item">
104
- <!-- Message Start -->
105
- <div class="d-flex">
106
- <div class="flex-shrink-0">
107
- <img src="../../../dist/assets/img/user3-128x128.jpg" alt="User Avatar" class="img-size-50 rounded-circle me-3">
108
- </div>
109
- <div class="flex-grow-1">
110
- <h3 class="dropdown-item-title">
111
- Nora Silvester
112
- <span class="float-end fs-7 text-warning"><i class="fa-solid fa-star"></i></span>
113
- </h3>
114
- <p class="fs-7">The subject goes here</p>
115
- <p class="fs-7 text-secondary"><i class="fa-regular fa-clock me-1"></i> 4 Hours Ago</p>
116
- </div>
117
- </div>
118
- <!-- Message End -->
119
- </a>
120
- <div class="dropdown-divider"></div>
121
- <a href="#" class="dropdown-item dropdown-footer">See All Messages</a>
122
- </div>
123
- </li>
124
- <!-- Notifications Dropdown Menu -->
125
- <li class="nav-item dropdown">
126
- <a class="nav-link" data-bs-toggle="dropdown" href="#">
127
- <i class="fa-regular fa-bell"></i>
128
- <span class="navbar-badge badge text-bg-warning">15</span>
129
- </a>
130
- <div class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
131
- <span class="dropdown-item dropdown-header">15 Notifications</span>
132
- <div class="dropdown-divider"></div>
133
- <a href="#" class="dropdown-item">
134
- <i class="fa-solid fa-envelope me-2"></i> 4 new messages
135
- <span class="float-end text-secondary fs-7">3 mins</span>
136
- </a>
137
- <div class="dropdown-divider"></div>
138
- <a href="#" class="dropdown-item">
139
- <i class="fa-solid fa-users me-2"></i> 8 friend requests
140
- <span class="float-end text-secondary fs-7">12 hours</span>
141
- </a>
142
- <div class="dropdown-divider"></div>
143
- <a href="#" class="dropdown-item">
144
- <i class="fa-solid fa-file me-2"></i> 3 new reports
145
- <span class="float-end text-secondary fs-7">2 days</span>
146
- </a>
147
- <div class="dropdown-divider"></div>
148
- <a href="#" class="dropdown-item dropdown-footer">See All Notifications</a>
149
- </div>
150
- </li>
151
- <li class="nav-item dropdown user-menu">
152
- <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
153
- <img src="../../../dist/assets/img/user2-160x160.jpg" class="user-image rounded-circle shadow" alt="User Image">
154
- <span class="d-none d-md-inline">Alexander Pierce</span>
155
- </a>
156
- <ul class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
157
- <!-- User image -->
158
- <li class="user-header text-bg-primary">
159
- <img src="../../../dist/assets/img/user2-160x160.jpg" class="rounded-circle shadow" alt="User Image">
160
-
161
- <p>
162
- Alexander Pierce - Web Developer
163
- <small>Member since Nov. 2023</small>
164
- </p>
165
- </li>
166
- <!-- Menu Body -->
167
- <li class="user-body">
168
- <div class="row">
169
- <div class="col-4 text-center">
170
- <a href="#">Followers</a>
171
- </div>
172
- <div class="col-4 text-center">
173
- <a href="#">Sales</a>
174
- </div>
175
- <div class="col-4 text-center">
176
- <a href="#">Friends</a>
177
- </div>
178
- </div>
179
- <!-- /.row -->
180
- </li>
181
- <!-- Menu Footer-->
182
- <li class="user-footer">
183
- <a href="#" class="btn btn-default btn-flat">Profile</a>
184
- <a href="#" class="btn btn-default btn-flat float-end">Sign out</a>
185
- </li>
186
- </ul>
187
- </li>
188
- <!-- TODO tackel in v4.1 -->
189
- <!-- <li class="nav-item">
190
- <a class="nav-link" data-widget="fullscreen" href="#" role="button">
191
- <i class="fa-solid fa-expand-arrows-alt"></i>
192
- </a>
193
- </li>
194
- <li class="nav-item">
195
- <a class="nav-link" data-widget="control-sidebar" data-slide="true" href="#" role="button">
196
- <i class="fa-solid fa-th-large"></i>
197
- </a>
198
- </li> -->
199
- </ul>
200
- </div>
201
- </nav>
202
- <!-- /.navbar -->
203
- <!-- Sidebar Container -->
204
- <aside class="app-sidebar bg-body-secondary shadow" data-bs-theme="dark">
205
- <div class="sidebar-brand">
206
- <a href="../../index.html" class="brand-link">
207
- <img src="../../../dist/assets/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image opacity-75 shadow">
208
- <span class="brand-text fw-light">AdminLTE 4</span>
209
- </a>
210
- </div>
211
- <!-- Sidebar -->
212
- <div class="sidebar-wrapper">
213
- <nav class="mt-2">
214
- <!-- Sidebar Menu -->
215
- <ul class="nav sidebar-menu flex-column" data-lte-toggle="treeview" role="menu" data-accordion="false">
216
- <li class="nav-item">
217
- <a href="javascript:;" class="nav-link">
218
- <i class="nav-icon fa-solid fa-gauge-high"></i>
219
- <p>
220
- Dashboard
221
- <i class="nav-arrow fa-solid fa-angle-right"></i>
222
- </p>
223
- </a>
224
- <ul class="nav nav-treeview">
225
- <li class="nav-item">
226
- <a href="../../index.html" class="nav-link">
227
- <i class="nav-icon fa-regular fa-circle"></i>
228
- <p>Dashboard v1</p>
229
- </a>
230
- </li>
231
- <li class="nav-item">
232
- <a href="../../index2.html" class="nav-link">
233
- <i class="nav-icon fa-regular fa-circle"></i>
234
- <p>Dashboard v2</p>
235
- </a>
236
- </li>
237
- <li class="nav-item">
238
- <a href="../../index3.html" class="nav-link">
239
- <i class="nav-icon fa-regular fa-circle"></i>
240
- <p>Dashboard v3</p>
241
- </a>
242
- </li>
243
- </ul>
244
- </li>
245
- <li class="nav-item">
246
- <a href="javascript:;" class="nav-link">
247
- <i class="nav-icon fa-solid fa-box-open"></i>
248
- <p>
249
- Widgets
250
- <i class="nav-arrow fa-solid fa-angle-right"></i>
251
- </p>
252
- </a>
253
- <ul class="nav nav-treeview">
254
- <li class="nav-item">
255
- <a href="../../widgets/small-box.html" class="nav-link">
256
- <i class="nav-icon fa-regular fa-circle"></i>
257
- <p>Small Box</p>
258
- </a>
259
- </li>
260
- <li class="nav-item">
261
- <a href="../../widgets/info-box.html" class="nav-link">
262
- <i class="nav-icon fa-regular fa-circle"></i>
263
- <p>info Box</p>
264
- </a>
265
- </li>
266
- <li class="nav-item">
267
- <a href="../../widgets/cards.html" class="nav-link">
268
- <i class="nav-icon fa-regular fa-circle"></i>
269
- <p>Cards</p>
270
- </a>
271
- </li>
272
- </ul>
273
- </li>
274
-
275
- <li class="nav-item">
276
- <a href="javascript:;" class="nav-link">
277
- <i class="nav-icon fa-solid fa-copy"></i>
278
- <p>
279
- Layout Options
280
- <span class="nav-badge badge text-bg-secondary opacity-75 me-3">6</span>
281
- <i class="nav-arrow fa-solid fa-angle-right"></i>
282
- </p>
283
- </a>
284
- <ul class="nav nav-treeview">
285
- <li class="nav-item">
286
- <a href="../../layout/unfixed-sidebar.html" class="nav-link">
287
- <i class="nav-icon fa-regular fa-circle"></i>
288
- <p>Unfixed Sidebar</p>
289
- </a>
290
- </li>
291
- <li class="nav-item">
292
- <a href="../../layout/fixed-sidebar.html" class="nav-link">
293
- <i class="nav-icon fa-regular fa-circle"></i>
294
- <p>Fixed Sidebar</p>
295
- </a>
296
- </li>
297
- <li class="nav-item">
298
- <a href="../../layout/sidebar-mini.html" class="nav-link">
299
- <i class="nav-icon fa-regular fa-circle"></i>
300
- <p>Sidebar Mini</p>
301
- </a>
302
- </li>
303
- <li class="nav-item">
304
- <a href="../../layout/layout-rtl.html" class="nav-link">
305
- <i class="nav-icon fa-regular fa-circle"></i>
306
- <p>Layout RTL</p>
307
- </a>
308
- </li>
309
- </ul>
310
- </li>
311
- <li class="nav-item">
312
- <a href="javascript:;" class="nav-link">
313
- <i class="nav-icon fa-solid fa-tree"></i>
314
- <p>
315
- UI Elements
316
- <i class="nav-arrow fa-solid fa-angle-right"></i>
317
- </p>
318
- </a>
319
- <ul class="nav nav-treeview">
320
- <li class="nav-item">
321
- <a href="../../UI/timeline.html" class="nav-link">
322
- <i class="nav-icon fa-regular fa-circle"></i>
323
- <p>Timeline</p>
324
- </a>
325
- </li>
326
- </ul>
327
- </li>
328
- <li class="nav-item">
329
- <a href="javascript:;" class="nav-link">
330
- <i class="nav-icon fa-solid fa-pen-to-square"></i>
331
- <p>
332
- Forms
333
- <i class="nav-arrow fa-solid fa-angle-right"></i>
334
- </p>
335
- </a>
336
- <ul class="nav nav-treeview">
337
- <li class="nav-item">
338
- <a href="../../forms/general.html" class="nav-link">
339
- <i class="nav-icon fa-regular fa-circle"></i>
340
- <p>General Elements</p>
341
- </a>
342
- </li>
343
- </ul>
344
- </li>
345
- <li class="nav-item">
346
- <a href="javascript:;" class="nav-link">
347
- <i class="nav-icon fa-solid fa-table"></i>
348
- <p>
349
- Tables
350
- <i class="nav-arrow fa-solid fa-angle-right"></i>
351
- </p>
352
- </a>
353
- <ul class="nav nav-treeview">
354
- <li class="nav-item">
355
- <a href="../../tables/simple.html" class="nav-link">
356
- <i class="nav-icon fa-regular fa-circle"></i>
357
- <p>Simple Tables</p>
358
- </a>
359
- </li>
360
- </ul>
361
- </li>
362
-
363
- <li class="nav-header">EXAMPLES</li>
364
- <li class="nav-item">
365
- <a href="javascript:;" class="nav-link">
366
- <i class="nav-icon fa-solid fa-arrow-right-to-bracket"></i>
367
- <p>
368
- Login & Register
369
- <i class="nav-arrow fa-solid fa-angle-right"></i>
370
- </p>
371
- </a>
372
- <ul class="nav nav-treeview">
373
- <li class="nav-item">
374
- <a href="../../examples/login.html" class="nav-link ">
375
- <i class="nav-icon fa-regular fa-circle"></i>
376
- <p>Login v1</p>
377
- </a>
378
- </li>
379
- <li class="nav-item">
380
- <a href="../../examples/register.html" class="nav-link ">
381
- <i class="nav-icon fa-regular fa-circle"></i>
382
- <p>Register v1</p>
383
- </a>
384
- </li>
385
- </ul>
386
- </li>
387
-
388
- <li class="nav-header">DOCUMENTATIONS</li>
389
- <li class="nav-item">
390
- <a href="../../docs/index.html" class="nav-link active">
391
- <i class="nav-icon fa-solid fa-download"></i>
392
- <p>Installation</p>
393
- </a>
394
- </li>
395
- <li class="nav-item">
396
- <a href="../../docs/layout.html" class="nav-link">
397
- <i class="nav-icon fa-solid fa-grip"></i>
398
- <p>Layout</p>
399
- </a>
400
- </li>
401
- <li class="nav-item">
402
- <a href="../../docs/color-mode.html" class="nav-link">
403
- <i class="nav-icon fa-solid fa-star-half-stroke"></i>
404
- <p>Color Mode</p>
405
- </a>
406
- </li>
407
- <li class="nav-item">
408
- <a href="javascript:;" class="nav-link">
409
- <i class="nav-icon fa-solid fa-swatchbook"></i>
410
- <p>
411
- Components
412
- <i class="nav-arrow fa-solid fa-angle-right"></i>
413
- </p>
414
- </a>
415
- <ul class="nav nav-treeview">
416
- <li class="nav-item">
417
- <a href="../../docs/components/main-header.html" class="nav-link">
418
- <i class="nav-icon fa-regular fa-circle"></i>
419
- <p>Main Header</p>
420
- </a>
421
- </li>
422
- </ul>
423
- </li>
424
- <li class="nav-item">
425
- <a href="../../docs/browser-support.html" class="nav-link">
426
- <i class="nav-icon fa-solid fa-edge"></i>
427
- <p>Browser Support</p>
428
- </a>
429
- </li>
430
-
431
- <li class="nav-header">MULTI LEVEL EXAMPLE</li>
432
- <li class="nav-item">
433
- <a href="javascript:;" class="nav-link">
434
- <i class="nav-icon fa-solid fa-circle"></i>
435
- <p>Level 1</p>
436
- </a>
437
- </li>
438
- <li class="nav-item">
439
- <a href="javascript:;" class="nav-link">
440
- <i class="nav-icon fa-solid fa-circle"></i>
441
- <p>
442
- Level 1
443
- <i class="nav-arrow fa-solid fa-angle-right"></i>
444
- </p>
445
- </a>
446
- <ul class="nav nav-treeview">
447
- <li class="nav-item">
448
- <a href="javascript:;" class="nav-link">
449
- <i class="nav-icon fa-regular fa-circle"></i>
450
- <p>Level 2</p>
451
- </a>
452
- </li>
453
- <li class="nav-item">
454
- <a href="javascript:;" class="nav-link">
455
- <i class="nav-icon fa-regular fa-circle"></i>
456
- <p>
457
- Level 2
458
- <i class="nav-arrow fa-solid fa-angle-right"></i>
459
- </p>
460
- </a>
461
- <ul class="nav nav-treeview">
462
- <li class="nav-item">
463
- <a href="javascript:;" class="nav-link">
464
- <i class="nav-icon fa-regular fa-dot-circle"></i>
465
- <p>Level 3</p>
466
- </a>
467
- </li>
468
- <li class="nav-item">
469
- <a href="javascript:;" class="nav-link">
470
- <i class="nav-icon fa-regular fa-dot-circle"></i>
471
- <p>Level 3</p>
472
- </a>
473
- </li>
474
- <li class="nav-item">
475
- <a href="javascript:;" class="nav-link">
476
- <i class="nav-icon fa-regular fa-dot-circle"></i>
477
- <p>Level 3</p>
478
- </a>
479
- </li>
480
- </ul>
481
- </li>
482
- <li class="nav-item">
483
- <a href="javascript:;" class="nav-link">
484
- <i class="nav-icon fa-regular fa-circle"></i>
485
- <p>Level 2</p>
486
- </a>
487
- </li>
488
- </ul>
489
- </li>
490
- <li class="nav-item">
491
- <a href="javascript:;" class="nav-link">
492
- <i class="nav-icon fa-solid fa-circle"></i>
493
- <p>Level 1</p>
494
- </a>
495
- </li>
496
- <li class="nav-header">LABELS</li>
497
- <li class="nav-item">
498
- <a href="javascript:;" class="nav-link">
499
- <i class="nav-icon fa-regular fa-circle text-danger"></i>
500
- <p class="text">Important</p>
501
- </a>
502
- </li>
503
- <li class="nav-item">
504
- <a href="javascript:;" class="nav-link">
505
- <i class="nav-icon fa-regular fa-circle text-warning"></i>
506
- <p>Warning</p>
507
- </a>
508
- </li>
509
- <li class="nav-item">
510
- <a href="javascript:;" class="nav-link">
511
- <i class="nav-icon fa-regular fa-circle text-info"></i>
512
- <p>Informational</p>
513
- </a>
514
- </li>
515
- </ul>
516
- </nav>
517
- </div>
518
- <!-- /.sidebar -->
519
- </aside>
520
- <!-- Main content -->
521
- <main class="app-main">
522
- <div class="app-content-header">
523
- <div class="container-fluid">
524
- <div class="row">
525
- <div class="col-sm-6">
526
- <h3 class="mb-0">Introduction</h3>
527
- </div>
528
- <div class="col-sm-6">
529
- <ol class="breadcrumb float-sm-end">
530
- <li class="breadcrumb-item"><a href="#">Docs</a></li>
531
- <li class="breadcrumb-item active" aria-current="page">
532
- Introduction
533
- </li>
534
- </ol>
535
- </div>
536
- </div>
537
- </div>
538
- </div>
539
- <!-- Main content -->
540
- <div class="app-content">
541
- <div class="container-fluid">
542
- <h2 id="quick-start">Quick start</h2>
543
- <p>There are multiple ways to install AdminLTE.</p>
544
- <h3 id="download--changelog">Download &#x26; Changelog:</h3>
545
- <p>Always Recommended to download from GitHub latest release <a href="https://github.com/ColorlibHQ/AdminLTE/releases/latest">AdminLTE 4</a> for bug free and latest features.<br>
546
- Visit the <a href="https://github.com/ColorlibHQ/AdminLTE/releases">releases</a> page to view the changelog.<br>
547
- Legacy Releases are <a href="https://github.com/ColorlibHQ/AdminLTE/releases/tag/v3.2.0">AdminLTE 3</a> / <a href="https://github.com/ColorlibHQ/AdminLTE/releases/tag/v2.4.18">AdminLTE 2</a> / <a href="https://github.com/ColorlibHQ/AdminLTE/releases/tag/1.3.1">AdminLTE 1</a>.</p>
548
- <h2 id="stable-release">Stable release</h2>
549
- <h3 id="grab-from-jsdelivr-cdn">Grab from <a href="https://www.jsdelivr.com/package/npm/admin-lte">jsdelivr</a> CDN:</h3>
550
- <p><em><strong>Important Note</strong>: You needed to add separately cdn links for plugins in your project.</em></p>
551
- <pre is:raw="" class="astro-code dark-plus" style="background-color: #1E1E1E; overflow-x: auto;" tabindex="0"><code><span class="line"><span style="color: #808080">&#x3C;</span><span style="color: #569CD6">script</span><span style="color: #D4D4D4"> </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-alpha2/dist/js/adminlte.min.js"</span><span style="color: #D4D4D4"> </span><span style="color: #9CDCFE">integrity</span><span style="color: #D4D4D4">=</span><span style="color: #CE9178">"sha256-5SPy1/00NR75iVOk7p0Ci0nwAAM8Ab7j31wyie+DKYw="</span><span style="color: #D4D4D4"> </span><span style="color: #9CDCFE">crossorigin</span><span style="color: #D4D4D4">=</span><span style="color: #CE9178">"anonymous"</span><span style="color: #808080">>&#x3C;/</span><span style="color: #569CD6">script</span><span style="color: #808080">></span></span></code></pre>
552
- <pre is:raw="" class="astro-code dark-plus" style="background-color: #1E1E1E; overflow-x: auto;" tabindex="0"><code><span class="line"><span style="color: #808080">&#x3C;</span><span style="color: #569CD6">link</span><span style="color: #D4D4D4"> </span><span style="color: #9CDCFE">rel</span><span style="color: #D4D4D4">=</span><span style="color: #CE9178">"stylesheet"</span><span style="color: #D4D4D4"> </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-alpha2/dist/css/adminlte.min.css"</span><span style="color: #D4D4D4"> </span><span style="color: #9CDCFE">integrity</span><span style="color: #D4D4D4">=</span><span style="color: #CE9178">"sha256-c66Dhf3TzKZoXxk8aNaf2lu580xGnKke4mjUtbpMqYg="</span><span style="color: #D4D4D4"> </span><span style="color: #9CDCFE">crossorigin</span><span style="color: #D4D4D4">=</span><span style="color: #CE9178">"anonymous"</span><span style="color: #808080">></span></span></code></pre>
553
- <h3 id="using-the-command-line">Using The Command Line:</h3>
554
- <p><em><strong>Important Note</strong>: To install it via npm/Yarn, you need at least Node.js 14 or higher.</em></p>
555
- <h4 id="via-npm">Via npm</h4>
556
- <pre is:raw="" class="astro-code dark-plus" style="background-color: #1E1E1E; overflow-x: auto;" tabindex="0"><code><span class="line"><span style="color: #DCDCAA">npm</span><span style="color: #D4D4D4"> </span><span style="color: #CE9178">install</span><span style="color: #D4D4D4"> </span><span style="color: #CE9178">admin-lte@4.0.0-alpha2</span><span style="color: #D4D4D4"> </span><span style="color: #569CD6">--save</span></span></code></pre>
557
- <h4 id="via-yarn">Via Yarn</h4>
558
- <pre is:raw="" class="astro-code dark-plus" style="background-color: #1E1E1E; overflow-x: auto;" tabindex="0"><code><span class="line"><span style="color: #DCDCAA">yarn</span><span style="color: #D4D4D4"> </span><span style="color: #CE9178">add</span><span style="color: #D4D4D4"> </span><span style="color: #CE9178">admin-lte@4.0.0-alpha2</span></span></code></pre>
559
- <h4 id="via-composer">Via Composer</h4>
560
- <pre is:raw="" class="astro-code dark-plus" style="background-color: #1E1E1E; overflow-x: auto;" tabindex="0"><code><span class="line"><span style="color: #DCDCAA">composer</span><span style="color: #D4D4D4"> </span><span style="color: #CE9178">require</span><span style="color: #D4D4D4"> </span><span style="color: #CE9178">"almasaeed2010/adminlte=4.0.0-alpha2"</span></span></code></pre>
561
- <h4 id="via-git">Via Git</h4>
562
- <pre is:raw="" class="astro-code dark-plus" style="background-color: #1E1E1E; overflow-x: auto;" tabindex="0"><code><span class="line"><span style="color: #DCDCAA">git</span><span style="color: #D4D4D4"> </span><span style="color: #CE9178">clone</span><span style="color: #D4D4D4"> </span><span style="color: #CE9178">https://github.com/ColorlibHQ/AdminLTE.git</span></span></code></pre>
563
- </div><!-- /.container-fluid -->
564
- </div>
565
- <!-- /.content -->
566
- </main>
567
- <!-- /.app-content -->
568
-
569
- <!-- Main Footer -->
570
- <footer class="app-footer">
571
- <!-- To the end -->
572
- <div class="float-end d-none d-sm-inline">
573
- Anything you want
574
- </div>
575
- <!-- Default to the start -->
576
- <strong>Copyright &copy; 2014-2023 <a href="https://adminlte.io">AdminLTE.io</a>.</strong> All rights reserved.
577
- </footer>
578
- </div>
579
- <!-- ./app-wrapper -->
580
-
581
- <!-- OPTIONAL SCRIPTS --><!-- overlayscrollbars -->
582
- <script src="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.1.0/browser/overlayscrollbars.browser.es6.min.js" integrity="sha256-NRZchBuHZWSXldqrtAOeCZpucH/1n1ToJ3C8mSK95NU=" crossorigin="anonymous"></script>
583
-
584
- <!-- @popperjs for Bootstrap 5 -->
585
- <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.7/dist/umd/popper.min.js" integrity="sha384-zYPOMqeu1DAVkHiLqWBUTcbYfZ8osu1Nd6Z89ify25QV9guujx43ITvfi12/QExE" crossorigin="anonymous"></script>
586
-
587
- <!-- Bootstrap 5 -->
588
- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.min.js" integrity="sha384-Y4oOpwW3duJdCWv5ly8SCFYWqFDsfob/3GkgExXKV4idmbt98QcxXYs9UoXAB7BZ" crossorigin="anonymous"></script>
589
-
590
- <!-- REQUIRED SCRIPTS --><!-- AdminLTE App -->
591
- <script src="../../../dist/js/adminlte.js"></script>
592
-
593
- <!-- OPTIONAL SCRIPTS -->
594
- <script>
595
- const SELECTOR_SIDEBAR_WRAPPER = '.sidebar-wrapper'
596
- const Default = {
597
- scrollbarTheme: 'os-theme-light',
598
- scrollbarAutoHide: 'leave',
599
- scrollbarClickScroll: true
600
- }
601
-
602
- document.addEventListener("DOMContentLoaded", function() {
603
- const sidebarWrapper = document.querySelector(SELECTOR_SIDEBAR_WRAPPER)
604
- if (sidebarWrapper && typeof OverlayScrollbarsGlobal?.OverlayScrollbars !== 'undefined') {
605
- OverlayScrollbarsGlobal.OverlayScrollbars(sidebarWrapper, {
606
- scrollbars: {
607
- theme: Default.scrollbarTheme,
608
- autoHide: Default.scrollbarAutoHide,
609
- clickScroll: Default.scrollbarClickScroll
610
- }
611
- })
612
- }
613
- })
614
- </script>
615
- </body>
616
-
617
- </html>