Browse Source

treeview docs

Daniel 1 year ago
parent
commit
834892635f

+ 39 - 0
src/html/components/javascript/treeview.mdx

@@ -0,0 +1,39 @@
+The Treeview plugin converts a nested list into a tree view where sub menus can be expanded.
+
+##### Usage
+
+This plugin can be used as the data api.
+
+**Data API**
+
+Add `data-lte-toggle="treeview"` to any ul or ol element to activate the plugin.
+
+```html
+<ul data-lte-toggle="treeview">
+  <li><a href="#">One Level</a></li>
+  <li class="nav-item menu-open">
+    <a class="nav-link" href="#">Multilevel</a>
+    <ul class="nav-treeview">
+      <li><a href="#">Level 2</a></li>
+    </ul>
+  </li>
+</ul>
+```
+
+##### Example
+
+<ul data-lte-toggle="treeview">
+  <li>
+    <a href="#">One Level</a>
+  </li>
+  <li class="nav-item menu-open">
+    <a class="nav-link" href="#">
+      Multilevel
+    </a>
+    <ul class="nav-treeview">
+      <li>
+        <a href="#">Level 2</a>
+      </li>
+    </ul>
+  </li>
+</ul>

+ 71 - 0
src/html/pages/docs/javascript/treeview.astro

@@ -0,0 +1,71 @@
+---
+import Head from "@components/_head.astro";
+import Footer from "@components/dashboard/_footer.astro";
+import Topbar from "@components/dashboard/_topbar.astro";
+import Treeview from "@components/javascript/treeview.mdx";
+import Sidenav from "@components/dashboard/_sidenav.astro";
+import Scripts from "@components/_scripts.astro";
+
+const title = "Treeview Plugin | AdminLTE 4";
+const path = "../../../../dist";
+const mainPage = "javascript";
+const page = "treeview";
+---
+
+<!DOCTYPE html>
+<html lang="en">
+  <!--begin::Head-->
+  <head>
+    <Head title={title} path={path} />
+  </head>
+  <!--end::Head-->
+  <!--begin::Body-->
+  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
+    <!--begin::App Wrapper-->
+    <div class="app-wrapper">
+      <Topbar path={path} />
+      <Sidenav path={path} mainPage={mainPage} page={page} />
+      <!--begin::App Main-->
+      <main class="app-main">
+        <!--begin::App Content Header-->
+        <div class="app-content-header">
+          <!--begin::Container-->
+          <div class="container-fluid">
+            <!--begin::Row-->
+            <div class="row">
+              <div class="col-sm-6">
+                <h3 class="mb-0">Treeview Plugin</h3>
+              </div>
+              <div class="col-sm-6">
+                <ol class="breadcrumb float-sm-end">
+                  <li class="breadcrumb-item"><a href="#">Docs</a></li>
+                  <li class="breadcrumb-item active" aria-current="page">
+                    Treeview Plugin
+                  </li>
+                </ol>
+              </div>
+            </div>
+            <!--end::Row-->
+          </div>
+          <!--end::Container-->
+        </div>
+        <!--end::App Content Header-->
+        <!--begin::App Content-->
+        <div class="app-content">
+          <!--begin::Container-->
+          <div class="container-fluid">
+            <Treeview />
+          </div>
+          <!--end::Container-->
+        </div>
+        <!--end::App Content-->
+      </main>
+      <!--end::App Main-->
+      <Footer />
+    </div>
+    <!--end::App Wrapper-->
+    <!--begin::Script-->
+    <Scripts path={path} />
+    <!--end::Script-->
+  </body><!--end::Body-->
+</html>