github
/
AdminLTE
mirror of https://github.com/ColorlibHQ/AdminLTE
1
0
Fork 0
Code Issues Releases Wiki Activity

treeview docs

pull/5153/head
Daniel 2023-05-31 13:36:50 +05:30
parent 72aaec4761
commit 834892635f
2 changed files with 110 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
src/html/components/javascript/treeview.mdx Normal file
View File

@ -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
src/html/pages/docs/javascript/treeview.astro Normal file
View File

@ -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>