نمای درختی
Treeview یک تصویر بصری از داده های سلسله مراتبی است که با آیتم ریشه شروع می شود و از طریق فرزندان و فرزندان آنها پیشرفت می کند. جدای از ریشه، هر موردی یک پدر و مادر دارد و می تواند فرزند داشته باشد. برای ایجاد این Treeview، از ویژگی “Collapse” بوت استرپ استفاده کردیم.
مثال پایه
در ابتدا از data-show="true" ویژگی با عنصر collapse برای گسترش درخت استفاده کنید.
<ul class="treeview" id="treeviewExample">
<li class="treeview-list-item">
<a data-bs-toggle="collapse" href="#treeviewExample-1-1" role="button" aria-expanded="false">
<p class="treeview-text">
public</p>
</a>
<ul class="collapse treeview-list" id="treeviewExample-1-1" data-show="false">
<li class="treeview-list-item">
<a data-bs-toggle="collapse" href="#treeviewExample-2-1" role="button" aria-expanded="false">
<p class="treeview-text">
assets</p>
</a>
<ul class="collapse treeview-list" id="treeviewExample-2-1" data-show="false">
<li class="treeview-list-item">
<a data-bs-toggle="collapse" href="#treeviewExample-3-1" role="button" aria-expanded="false">
<p class="treeview-text">
image</p>
</a>
<ul class="collapse treeview-list" id="treeviewExample-3-1" data-show="true">
<li class="treeview-list-item">
<div class="treeview-item">
<a class="flex-1" href="#!">
<p class="treeview-text">
<span class="me-2 fas fa-image text-success"></span>
falcon.png
</p>
</a>
</div>
</li>
<li class="treeview-list-item">
<div class="treeview-item">
<a class="flex-1" href="#!">
<p class="treeview-text">
<span class="me-2 fas fa-image text-success"></span>
generic.png
</p>
</a>
</div>
</li>
<li class="treeview-list-item">
<div class="treeview-item">
<a class="flex-1" href="#!">
<p class="treeview-text">
<span class="me-2 fas fa-sun text-warning"></span>
shield.svg
</p>
</a>
</div>
</li>
</ul>
</li>
<li class="treeview-list-item">
<a data-bs-toggle="collapse" href="#treeviewExample-3-2" role="button" aria-expanded="false">
<p class="treeview-text">
video<span class="badge rounded-pill badge-soft-primary ms-2">3</span></p>
</a>
<ul class="collapse treeview-list" id="treeviewExample-3-2" data-show="true">
<li class="treeview-list-item">
<div class="treeview-item">
<a class="flex-1" href="#!">
<p class="treeview-text">
<span class="me-2 fas fa-play text-danger"></span>
beach.mp4
</p>
</a>
</div>
</li>
<li class="treeview-list-item">
<div class="treeview-item">
<a class="flex-1" href="#!">
<p class="treeview-text">
<span class="me-2 fas fa-play text-danger"></span>
background.map
</p>
</a>
</div>
</li>
</ul>
</li>
<li class="treeview-list-item">
<a data-bs-toggle="collapse" href="#treeviewExample-3-3" role="button" aria-expanded="false">
<p class="treeview-text">
js<span class="badge rounded-pill badge-soft-primary ms-2">2</span></p>
</a>
<ul class="collapse treeview-list" id="treeviewExample-3-3" data-show="false">
<li class="treeview-list-item">
<div class="treeview-item">
<a class="flex-1" href="#!">
<p class="treeview-text">
<span class="me-2 fab fa-js text-success"></span>
theme.js
</p>
</a>
</div>
</li>
<li class="treeview-list-item">
<div class="treeview-item">
<a class="flex-1" href="#!">
<p class="treeview-text">
<span class="me-2 fab fa-js text-success"></span>
theme.min.js
</p>
</a>
</div>
</li>
</ul>
</li>
</ul>
</li>
<li class="treeview-list-item">
<a data-bs-toggle="collapse" href="#treeviewExample-2-3" role="button" aria-expanded="false">
<p class="treeview-text">
dashboard</p>
</a>
<ul class="collapse treeview-list" id="treeviewExample-2-3" data-show="false">
<li class="treeview-list-item">
<div class="treeview-item">
<a class="flex-1" href="#!">
<p class="treeview-text">
<span class="me-2 fab fa-html5 text-danger"></span>
default.html
</p>
</a>
</div>
</li>
<li class="treeview-list-item">
<div class="treeview-item">
<a class="flex-1" href="#!">
<p class="treeview-text">
<span class="me-2 fab fa-html5 text-danger"></span>
analytics.html
</p>
</a>
</div>
</li>
<li class="treeview-list-item">
<div class="treeview-item">
<a class="flex-1" href="#!">
<p class="treeview-text">
<span class="me-2 fab fa-html5 text-danger"></span>
crm.html
</p>
</a>
</div>
</li>
</ul>
</li>
<li class="treeview-list-item">
<div class="treeview-item">
<a class="flex-1" href="#!">
<p class="treeview-text">
<span class="me-2 fab fa-html5 text-danger"></span>
index.html
</p>
</a>
</div>
</li>
</ul>
</li>
<li class="treeview-list-item">
<a data-bs-toggle="collapse" href="#treeviewExample-1-2" role="button" aria-expanded="false">
<p class="treeview-text">
Files</p>
</a>
<ul class="collapse treeview-list" id="treeviewExample-1-2" data-show="true">
<li class="treeview-list-item">
<div class="treeview-item">
<a class="flex-1" href="#!">
<p class="treeview-text">
<span class="me-2 fas fa-file-archive text-warning"></span>
build.zip
</p>
</a>
</div>
</li>
<li class="treeview-list-item">
<div class="treeview-item">
<a class="flex-1" href="#!">
<p class="treeview-text">
<span class="me-2 fas fa-file-archive text-warning"></span>
live-1.3.4.zip
</p>
</a>
</div>
</li>
<li class="treeview-list-item">
<div class="treeview-item">
<a class="flex-1" href="#!">
<p class="treeview-text">
<span class="me-2 fas fa-file text-primary"></span>
app.exe
</p>
</a>
</div>
</li>
<li class="treeview-list-item">
<div class="treeview-item">
<a class="flex-1" href="#!">
<p class="treeview-text">
<span class="me-2 fas fa-file text-primary"></span>
export.csv
</p>
</a>
</div>
</li>
<li class="treeview-list-item">
<div class="treeview-item">
<a class="flex-1" href="#!">
<p class="treeview-text">
<span class="me-2 fas fa-file-pdf text-danger"></span>
default.pdf
</p>
</a>
</div>
</li>
<li class="treeview-list-item">
<div class="treeview-item">
<a class="flex-1" href="#!">
<p class="treeview-text">
<span class="me-2 fas fa-music text-info"></span>
Yellow_Coldplay.wav
</p>
</a>
</div>
</li>
</ul>
</li>
<li class="treeview-list-item">
<div class="treeview-item">
<a class="flex-1" href="#!">
<p class="treeview-text">
<span class="me-2 fab fa-node-js text-success"></span>
package.json
</p>
</a>
</div>
</li>
<li class="treeview-list-item">
<div class="treeview-item">
<a class="flex-1" href="#!">
<p class="treeview-text">
<span class="me-2 fab fa-node-js text-success"></span>
package-lock.json
</p>
</a>
</div>
</li>
<li class="treeview-list-item">
<div class="treeview-item">
<a class="flex-1" href="#!">
<p class="treeview-text">
<span class="me-2 fas fa-exclamation-circle text-primary"></span>
README.md
</p>
</a>
</div>
</li>
</ul>نمونه راه راه
از treeview-stripe class and data-options='{"striped":true}' برای ایجاد نمای درختی راه راه استفاده کنید.
<ul class="treeview treeview-stripe" id="treeviewStriped" data-options='{"striped":true}'>
<li class="treeview-list-item">
<a data-bs-toggle="collapse" href="#treeviewStriped-1-1" role="button" aria-expanded="false">
<p class="treeview-text">
public</p>
</a>
<ul class="collapse treeview-list" id="treeviewStriped-1-1" data-show="false">
<li class="treeview-list-item">
<a data-bs-toggle="collapse" href="#treeviewStriped-2-1" role="button" aria-expanded="false">
<p class="treeview-text">
assets</p>
</a>
<ul class="collapse treeview-list" id="treeviewStriped-2-1" data-show="false">
<li class="treeview-list-item">
<a data-bs-toggle="collapse" href="#treeviewStriped-3-1" role="button" aria-expanded="false">
<p class="treeview-text">
image</p>
</a>
<ul class="collapse treeview-list" id="treeviewStriped-3-1" data-show="true">
<li class="treeview-list-item">
<div class="treeview-item">
<a class="flex-1" href="#!">
<p class="treeview-text">
<span class="me-2 fas fa-image text-success"></span>
falcon.png
</p>
</a>
<div class="dot bg-info"></div>
</div>
</li>
<li class="treeview-list-item">
<div class="treeview-item">
<a class="flex-1" href="#!">
<p class="treeview-text">
<span class="me-2 fas fa-image text-success"></span>
generic.png
</p>
</a>
<div class="dot bg-primary"></div>
</div>
</li>
<li class="treeview-list-item">
<div class="treeview-item">
<a class="flex-1" href="#!">
<p class="treeview-text">
<span class="me-2 fas fa-sun text-warning"></span>
shield.svg
</p>
</a>
<div class="dot bg-primary"></div>
</div>
</li>
</ul>
</li>
<li class="treeview-list-item">
<a data-bs-toggle="collapse" href="#treeviewStriped-3-2" role="button" aria-expanded="false">
<p class="treeview-text">
video<span class="badge rounded-pill badge-soft-primary ms-2">3</span></p>
</a>
<ul class="collapse treeview-list" id="treeviewStriped-3-2" data-show="true">
<li class="treeview-list-item">
<div class="treeview-item">
<a class="flex-1" href="#!">
<p class="treeview-text">
<span class="me-2 fas fa-play text-danger"></span>
beach.mp4
</p>
</a>
<div class="dot bg-warning"></div>
</div>
</li>
<li class="treeview-list-item">
<div class="treeview-item">
<a class="flex-1" href="#!">
<p class="treeview-text">
<span class="me-2 fas fa-play text-danger"></span>
background.map
</p>
</a>
<div class="dot bg-warning"></div>
</div>
</li>
</ul>
</li>
<li class="treeview-list-item">
<a data-bs-toggle="collapse" href="#treeviewStriped-3-3" role="button" aria-expanded="false">
<p class="treeview-text">
js<span class="badge rounded-pill badge-soft-primary ms-2">2</span></p>
</a>
<ul class="collapse treeview-list" id="treeviewStriped-3-3" data-show="false">
<li class="treeview-list-item">
<div class="treeview-item">
<a class="flex-1" href="#!">
<p class="treeview-text">
<span class="me-2 fab fa-js text-success"></span>
theme.js
</p>
</a>
</div>
</li>
<li class="treeview-list-item">
<div class="treeview-item">
<a class="flex-1" href="#!">
<p class="treeview-text">
<span class="me-2 fab fa-js text-success"></span>
theme.min.js
</p>
</a>
</div>
</li>
</ul>
</li>
</ul>
</li>
<li class="treeview-list-item">
<a data-bs-toggle="collapse" href="#treeviewStriped-2-3" role="button" aria-expanded="false">
<p class="treeview-text">
dashboard</p>
</a>
<ul class="collapse treeview-list" id="treeviewStriped-2-3" data-show="false">
<li class="treeview-list-item">
<div class="treeview-item">
<a class="flex-1" href="#!">
<p class="treeview-text">
<span class="me-2 fab fa-html5 text-danger"></span>
default.html
</p>
</a>
</div>
</li>
<li class="treeview-list-item">
<div class="treeview-item">
<a class="flex-1" href="#!">
<p class="treeview-text">
<span class="me-2 fab fa-html5 text-danger"></span>
analytics.html
</p>
</a>
</div>
</li>
<li class="treeview-list-item">
<div class="treeview-item">
<a class="flex-1" href="#!">
<p class="treeview-text">
<span class="me-2 fab fa-html5 text-danger"></span>
crm.html
</p>
</a>
</div>
</li>
</ul>
</li>
<li class="treeview-list-item">
<div class="treeview-item">
<a class="flex-1" href="#!">
<p class="treeview-text">
<span class="me-2 fab fa-html5 text-danger"></span>
index.html
</p>
</a>
</div>
</li>
</ul>
</li>
<li class="treeview-list-item">
<a data-bs-toggle="collapse" href="#treeviewStriped-1-2" role="button" aria-expanded="false">
<p class="treeview-text">
Files</p>
</a>
<ul class="collapse treeview-list" id="treeviewStriped-1-2" data-show="true">
<li class="treeview-list-item">
<div class="treeview-item">
<a class="flex-1" href="#!">
<p class="treeview-text">
<span class="me-2 fas fa-file-archive text-warning"></span>
build.zip
</p>
</a>
</div>
</li>
<li class="treeview-list-item">
<div class="treeview-item">
<a class="flex-1" href="#!">
<p class="treeview-text">
<span class="me-2 fas fa-file-archive text-warning"></span>
live-1.3.4.zip
</p>
</a>
</div>
</li>
<li class="treeview-list-item">
<div class="treeview-item">
<a class="flex-1" href="#!">
<p class="treeview-text">
<span class="me-2 fas fa-file text-primary"></span>
app.exe
</p>
</a>
<div class="dot bg-warning"></div>
</div>
</li>
<li class="treeview-list-item">
<div class="treeview-item">
<a class="flex-1" href="#!">
<p class="treeview-text">
<span class="me-2 fas fa-file text-primary"></span>
export.csv
</p>
</a>
<div class="dot bg-primary"></div>
</div>
</li>
<li class="treeview-list-item">
<div class="treeview-item">
<a class="flex-1" href="#!">
<p class="treeview-text">
<span class="me-2 fas fa-file-pdf text-danger"></span>
default.pdf
</p>
</a>
<div class="dot bg-primary"></div>
</div>
</li>
<li class="treeview-list-item">
<div class="treeview-item">
<a class="flex-1" href="#!">
<p class="treeview-text">
<span class="me-2 fas fa-music text-info"></span>
Yellow_Coldplay.wav
</p>
</a>
</div>
</li>
</ul>
</li>
<li class="treeview-list-item">
<div class="treeview-item">
<a class="flex-1" href="#!">
<p class="treeview-text">
<span class="me-2 fab fa-node-js text-success"></span>
package.json
</p>
</a>
</div>
</li>
<li class="treeview-list-item">
<div class="treeview-item">
<a class="flex-1" href="#!">
<p class="treeview-text">
<span class="me-2 fab fa-node-js text-success"></span>
package-lock.json
</p>
</a>
</div>
</li>
<li class="treeview-list-item">
<div class="treeview-item">
<a class="flex-1" href="#!">
<p class="treeview-text">
<span class="me-2 fas fa-exclamation-circle text-primary"></span>
README.md
</p>
</a>
</div>
</li>
</ul>Example را انتخاب کنید
از treeview-slect class and data-options='{"select":true}' برای ایجاد نمای درختی قابل انتخاب استفاده کنید.
<ul class="treeview treeview-slect" id="treeviewSelect" data-options='{"select":true}'>
<li class="treeview-list-item">
<div class="toggle-container"><input class="form-check-input" type="checkbox" data-target="#treeviewSelect-1-1" />
<a data-bs-toggle="collapse" href="#treeviewSelect-1-1" role="button" aria-expanded="false">
<p class="treeview-text">
public</p>
</a>
</div>
<ul class="collapse treeview-list" id="treeviewSelect-1-1" data-show="false">
<li class="treeview-list-item">
<div class="toggle-container"><input class="form-check-input" type="checkbox" data-target="#treeviewSelect-2-1" />
<a data-bs-toggle="collapse" href="#treeviewSelect-2-1" role="button" aria-expanded="false">
<p class="treeview-text">
assets</p>
</a>
</div>
<ul class="collapse treeview-list" id="treeviewSelect-2-1" data-show="false">
<li class="treeview-list-item">
<div class="toggle-container"><input class="form-check-input" type="checkbox" data-target="#treeviewSelect-3-1" />
<a data-bs-toggle="collapse" href="#treeviewSelect-3-1" role="button" aria-expanded="false">
<p class="treeview-text">
image</p>
</a>
</div>
<ul class="collapse treeview-list" id="treeviewSelect-3-1" data-show="true">
<li class="treeview-list-item">
<div class="treeview-item">
<input class="form-check-input" type="checkbox" />
<a class="flex-1" href="#!">
<p class="treeview-text">
<span class="me-2 fas fa-image text-success"></span>
falcon.png
</p>
</a>
</div>
</li>
<li class="treeview-list-item">
<div class="treeview-item">
<input class="form-check-input" type="checkbox" />
<a class="flex-1" href="#!">
<p class="treeview-text">
<span class="me-2 fas fa-image text-success"></span>
generic.png
</p>
</a>
</div>
</li>
<li class="treeview-list-item">
<div class="treeview-item">
<input class="form-check-input" type="checkbox" />
<a class="flex-1" href="#!">
<p class="treeview-text">
<span class="me-2 fas fa-sun text-warning"></span>
shield.svg
</p>
</a>
</div>
</li>
</ul>
</li>
<li class="treeview-list-item">
<div class="toggle-container"><input class="form-check-input" type="checkbox" data-target="#treeviewSelect-3-2" />
<a data-bs-toggle="collapse" href="#treeviewSelect-3-2" role="button" aria-expanded="false">
<p class="treeview-text">
video<span class="badge rounded-pill badge-soft-primary ms-2">3</span></p>
</a>
</div>
<ul class="collapse treeview-list" id="treeviewSelect-3-2" data-show="true">
<li class="treeview-list-item">
<div class="treeview-item">
<input class="form-check-input" type="checkbox" />
<a class="flex-1" href="#!">
<p class="treeview-text">
<span class="me-2 fas fa-play text-danger"></span>
beach.mp4
</p>
</a>
</div>
</li>
<li class="treeview-list-item">
<div class="treeview-item">
<input class="form-check-input" type="checkbox" />
<a class="flex-1" href="#!">
<p class="treeview-text">
<span class="me-2 fas fa-play text-danger"></span>
background.map
</p>
</a>
</div>
</li>
</ul>
</li>
<li class="treeview-list-item">
<div class="toggle-container"><input class="form-check-input" type="checkbox" data-target="#treeviewSelect-3-3" />
<a data-bs-toggle="collapse" href="#treeviewSelect-3-3" role="button" aria-expanded="false">
<p class="treeview-text">
js<span class="badge rounded-pill badge-soft-primary ms-2">2</span></p>
</a>
</div>
<ul class="collapse treeview-list" id="treeviewSelect-3-3" data-show="false">
<li class="treeview-list-item">
<div class="treeview-item">
<input class="form-check-input" type="checkbox" />
<a class="flex-1" href="#!">
<p class="treeview-text">
<span class="me-2 fab fa-js text-success"></span>
theme.js
</p>
</a>
</div>
</li>
<li class="treeview-list-item">
<div class="treeview-item">
<input class="form-check-input" type="checkbox" />
<a class="flex-1" href="#!">
<p class="treeview-text">
<span class="me-2 fab fa-js text-success"></span>
theme.min.js
</p>
</a>
</div>
</li>
</ul>
</li>
</ul>
</li>
<li class="treeview-list-item">
<div class="toggle-container"><input class="form-check-input" type="checkbox" data-target="#treeviewSelect-2-3" />
<a data-bs-toggle="collapse" href="#treeviewSelect-2-3" role="button" aria-expanded="false">
<p class="treeview-text">
dashboard</p>
</a>
</div>
<ul class="collapse treeview-list" id="treeviewSelect-2-3" data-show="false">
<li class="treeview-list-item">
<div class="treeview-item">
<input class="form-check-input" type="checkbox" />
<a class="flex-1" href="#!">
<p class="treeview-text">
<span class="me-2 fab fa-html5 text-danger"></span>
default.html
</p>
</a>
</div>
</li>
<li class="treeview-list-item">
<div class="treeview-item">
<input class="form-check-input" type="checkbox" />
<a class="flex-1" href="#!">
<p class="treeview-text">
<span class="me-2 fab fa-html5 text-danger"></span>
analytics.html
</p>
</a>
</div>
</li>
<li class="treeview-list-item">
<div class="treeview-item">
<input class="form-check-input" type="checkbox" />
<a class="flex-1" href="#!">
<p class="treeview-text">
<span class="me-2 fab fa-html5 text-danger"></span>
crm.html
</p>
</a>
</div>
</li>
</ul>
</li>
<li class="treeview-list-item">
<div class="treeview-item">
<input class="form-check-input" type="checkbox" />
<a class="flex-1" href="#!">
<p class="treeview-text">
<span class="me-2 fab fa-html5 text-danger"></span>
index.html
</p>
</a>
</div>
</li>
</ul>
</li>
<li class="treeview-list-item">
<div class="toggle-container"><input class="form-check-input" type="checkbox" data-target="#treeviewSelect-1-2" />
<a data-bs-toggle="collapse" href="#treeviewSelect-1-2" role="button" aria-expanded="false">
<p class="treeview-text">
Files</p>
</a>
</div>
<ul class="collapse treeview-list" id="treeviewSelect-1-2" data-show="true">
<li class="treeview-list-item">
<div class="treeview-item">
<input class="form-check-input" type="checkbox" />
<a class="flex-1" href="#!">
<p class="treeview-text">
<span class="me-2 fas fa-file-archive text-warning"></span>
build.zip
</p>
</a>
</div>
</li>
<li class="treeview-list-item">
<div class="treeview-item">
<input class="form-check-input" type="checkbox" />
<a class="flex-1" href="#!">
<p class="treeview-text">
<span class="me-2 fas fa-file-archive text-warning"></span>
live-1.3.4.zip
</p>
</a>
</div>
</li>
<li class="treeview-list-item">
<div class="treeview-item">
<input class="form-check-input" type="checkbox" />
<a class="flex-1" href="#!">
<p class="treeview-text">
<span class="me-2 fas fa-file text-primary"></span>
app.exe
</p>
</a>
</div>
</li>
<li class="treeview-list-item">
<div class="treeview-item">
<input class="form-check-input" type="checkbox" />
<a class="flex-1" href="#!">
<p class="treeview-text">
<span class="me-2 fas fa-file text-primary"></span>
export.csv
</p>
</a>
</div>
</li>
<li class="treeview-list-item">
<div class="treeview-item">
<input class="form-check-input" type="checkbox" />
<a class="flex-1" href="#!">
<p class="treeview-text">
<span class="me-2 fas fa-file-pdf text-danger"></span>
default.pdf
</p>
</a>
</div>
</li>
<li class="treeview-list-item">
<div class="treeview-item">
<input class="form-check-input" type="checkbox" />
<a class="flex-1" href="#!">
<p class="treeview-text">
<span class="me-2 fas fa-music text-info"></span>
Yellow_Coldplay.wav
</p>
</a>
</div>
</li>
</ul>
</li>
<li class="treeview-list-item">
<div class="treeview-item">
<input class="form-check-input" type="checkbox" />
<a class="flex-1" href="#!">
<p class="treeview-text">
<span class="me-2 fab fa-node-js text-success"></span>
package.json
</p>
</a>
</div>
</li>
<li class="treeview-list-item">
<div class="treeview-item">
<input class="form-check-input" type="checkbox" />
<a class="flex-1" href="#!">
<p class="treeview-text">
<span class="me-2 fab fa-node-js text-success"></span>
package-lock.json
</p>
</a>
</div>
</li>
<li class="treeview-list-item">
<div class="treeview-item">
<input class="form-check-input" type="checkbox" />
<a class="flex-1" href="#!">
<p class="treeview-text">
<span class="me-2 fas fa-exclamation-circle text-primary"></span>
README.md
</p>
</a>
</div>
</li>
</ul>نوار را با انتخاب Example
از هر دو کلاس و treeview-stripe برای ایجاد نمای درختی قابل انتخاب و راه راه استفاده کنید. treeview-slect data-options='{"select":true,"striped":true}'
<ul class="treeview treeview-stripe treeview-slect" id="treeviewSelectStriped" data-options='{"striped":true,"select":true}'>
<li class="treeview-list-item">
<div class="toggle-container"><input class="form-check-input" type="checkbox" data-target="#treeviewSelectStriped-1-1" />
<a data-bs-toggle="collapse" href="#treeviewSelectStriped-1-1" role="button" aria-expanded="false">
<p class="treeview-text">
public</p>
</a>
</div>
<ul class="collapse treeview-list" id="treeviewSelectStriped-1-1" data-show="false">
<li class="treeview-list-item">
<div class="toggle-container"><input class="form-check-input" type="checkbox" data-target="#treeviewSelectStriped-2-1" />
<a data-bs-toggle="collapse" href="#treeviewSelectStriped-2-1" role="button" aria-expanded="false">
<p class="treeview-text">
assets</p>
</a>
</div>
<ul class="collapse treeview-list" id="treeviewSelectStriped-2-1" data-show="false">
<li class="treeview-list-item">
<div class="toggle-container"><input class="form-check-input" type="checkbox" data-target="#treeviewSelectStriped-3-1" />
<a data-bs-toggle="collapse" href="#treeviewSelectStriped-3-1" role="button" aria-expanded="false">
<p class="treeview-text">
image</p>
</a>
</div>
<ul class="collapse treeview-list" id="treeviewSelectStriped-3-1" data-show="true">
<li class="treeview-list-item">
<div class="treeview-item">
<input class="form-check-input" type="checkbox" />
<a class="flex-1" href="#!">
<p class="treeview-text">
<span class="me-2 fas fa-image text-success"></span>
falcon.png
</p>
</a>
<div class="dot bg-info"></div>
</div>
</li>
<li class="treeview-list-item">
<div class="treeview-item">
<input class="form-check-input" type="checkbox" />
<a class="flex-1" href="#!">
<p class="treeview-text">
<span class="me-2 fas fa-image text-success"></span>
generic.png
</p>
</a>
<div class="dot bg-primary"></div>
</div>
</li>
<li class="treeview-list-item">
<div class="treeview-item">
<input class="form-check-input" type="checkbox" />
<a class="flex-1" href="#!">
<p class="treeview-text">
<span class="me-2 fas fa-sun text-warning"></span>
shield.svg
</p>
</a>
<div class="dot bg-primary"></div>
</div>
</li>
</ul>
</li>
<li class="treeview-list-item">
<div class="toggle-container"><input class="form-check-input" type="checkbox" data-target="#treeviewSelectStriped-3-2" />
<a data-bs-toggle="collapse" href="#treeviewSelectStriped-3-2" role="button" aria-expanded="false">
<p class="treeview-text">
video<span class="badge rounded-pill badge-soft-primary ms-2">3</span></p>
</a>
</div>
<ul class="collapse treeview-list" id="treeviewSelectStriped-3-2" data-show="true">
<li class="treeview-list-item">
<div class="treeview-item">
<input class="form-check-input" type="checkbox" />
<a class="flex-1" href="#!">
<p class="treeview-text">
<span class="me-2 fas fa-play text-danger"></span>
beach.mp4
</p>
</a>
<div class="dot bg-warning"></div>
</div>
</li>
<li class="treeview-list-item">
<div class="treeview-item">
<input class="form-check-input" type="checkbox" />
<a class="flex-1" href="#!">
<p class="treeview-text">
<span class="me-2 fas fa-play text-danger"></span>
background.map
</p>
</a>
<div class="dot bg-warning"></div>
</div>
</li>
</ul>
</li>
<li class="treeview-list-item">
<div class="toggle-container"><input class="form-check-input" type="checkbox" data-target="#treeviewSelectStriped-3-3" />
<a data-bs-toggle="collapse" href="#treeviewSelectStriped-3-3" role="button" aria-expanded="false">
<p class="treeview-text">
js<span class="badge rounded-pill badge-soft-primary ms-2">2</span></p>
</a>
</div>
<ul class="collapse treeview-list" id="treeviewSelectStriped-3-3" data-show="false">
<li class="treeview-list-item">
<div class="treeview-item">
<input class="form-check-input" type="checkbox" />
<a class="flex-1" href="#!">
<p class="treeview-text">
<span class="me-2 fab fa-js text-success"></span>
theme.js
</p>
</a>
</div>
</li>
<li class="treeview-list-item">
<div class="treeview-item">
<input class="form-check-input" type="checkbox" />
<a class="flex-1" href="#!">
<p class="treeview-text">
<span class="me-2 fab fa-js text-success"></span>
theme.min.js
</p>
</a>
</div>
</li>
</ul>
</li>
</ul>
</li>
<li class="treeview-list-item">
<div class="toggle-container"><input class="form-check-input" type="checkbox" data-target="#treeviewSelectStriped-2-3" />
<a data-bs-toggle="collapse" href="#treeviewSelectStriped-2-3" role="button" aria-expanded="false">
<p class="treeview-text">
dashboard</p>
</a>
</div>
<ul class="collapse treeview-list" id="treeviewSelectStriped-2-3" data-show="false">
<li class="treeview-list-item">
<div class="treeview-item">
<input class="form-check-input" type="checkbox" />
<a class="flex-1" href="#!">
<p class="treeview-text">
<span class="me-2 fab fa-html5 text-danger"></span>
default.html
</p>
</a>
</div>
</li>
<li class="treeview-list-item">
<div class="treeview-item">
<input class="form-check-input" type="checkbox" />
<a class="flex-1" href="#!">
<p class="treeview-text">
<span class="me-2 fab fa-html5 text-danger"></span>
analytics.html
</p>
</a>
</div>
</li>
<li class="treeview-list-item">
<div class="treeview-item">
<input class="form-check-input" type="checkbox" />
<a class="flex-1" href="#!">
<p class="treeview-text">
<span class="me-2 fab fa-html5 text-danger"></span>
crm.html
</p>
</a>
</div>
</li>
</ul>
</li>
<li class="treeview-list-item">
<div class="treeview-item">
<input class="form-check-input" type="checkbox" />
<a class="flex-1" href="#!">
<p class="treeview-text">
<span class="me-2 fab fa-html5 text-danger"></span>
index.html
</p>
</a>
</div>
</li>
</ul>
</li>
<li class="treeview-list-item">
<div class="toggle-container"><input class="form-check-input" type="checkbox" data-target="#treeviewSelectStriped-1-2" />
<a data-bs-toggle="collapse" href="#treeviewSelectStriped-1-2" role="button" aria-expanded="false">
<p class="treeview-text">
Files</p>
</a>
</div>
<ul class="collapse treeview-list" id="treeviewSelectStriped-1-2" data-show="true">
<li class="treeview-list-item">
<div class="treeview-item">
<input class="form-check-input" type="checkbox" />
<a class="flex-1" href="#!">
<p class="treeview-text">
<span class="me-2 fas fa-file-archive text-warning"></span>
build.zip
</p>
</a>
</div>
</li>
<li class="treeview-list-item">
<div class="treeview-item">
<input class="form-check-input" type="checkbox" />
<a class="flex-1" href="#!">
<p class="treeview-text">
<span class="me-2 fas fa-file-archive text-warning"></span>
live-1.3.4.zip
</p>
</a>
</div>
</li>
<li class="treeview-list-item">
<div class="treeview-item">
<input class="form-check-input" type="checkbox" />
<a class="flex-1" href="#!">
<p class="treeview-text">
<span class="me-2 fas fa-file text-primary"></span>
app.exe
</p>
</a>
<div class="dot bg-warning"></div>
</div>
</li>
<li class="treeview-list-item">
<div class="treeview-item">
<input class="form-check-input" type="checkbox" />
<a class="flex-1" href="#!">
<p class="treeview-text">
<span class="me-2 fas fa-file text-primary"></span>
export.csv
</p>
</a>
<div class="dot bg-primary"></div>
</div>
</li>
<li class="treeview-list-item">
<div class="treeview-item">
<input class="form-check-input" type="checkbox" />
<a class="flex-1" href="#!">
<p class="treeview-text">
<span class="me-2 fas fa-file-pdf text-danger"></span>
default.pdf
</p>
</a>
<div class="dot bg-primary"></div>
</div>
</li>
<li class="treeview-list-item">
<div class="treeview-item">
<input class="form-check-input" type="checkbox" />
<a class="flex-1" href="#!">
<p class="treeview-text">
<span class="me-2 fas fa-music text-info"></span>
Yellow_Coldplay.wav
</p>
</a>
</div>
</li>
</ul>
</li>
<li class="treeview-list-item">
<div class="treeview-item">
<input class="form-check-input" type="checkbox" />
<a class="flex-1" href="#!">
<p class="treeview-text">
<span class="me-2 fab fa-node-js text-success"></span>
package.json
</p>
</a>
</div>
</li>
<li class="treeview-list-item">
<div class="treeview-item">
<input class="form-check-input" type="checkbox" />
<a class="flex-1" href="#!">
<p class="treeview-text">
<span class="me-2 fab fa-node-js text-success"></span>
package-lock.json
</p>
</a>
</div>
</li>
<li class="treeview-list-item">
<div class="treeview-item">
<input class="form-check-input" type="checkbox" />
<a class="flex-1" href="#!">
<p class="treeview-text">
<span class="me-2 fas fa-exclamation-circle text-primary"></span>
README.md
</p>
</a>
</div>
</li>
</ul>ساختار
Falcon از Bootstrap Collapse برای ایجاد درخت های تعاملی استفاده می کند. تنها چیزی که برای ایجاد نمای درختی نیاز دارید، چند کلاس درختی خاص در مؤلفه Bootstrap Collapse اضافه کنید. ابتدا یک شناسه منحصر به فرد به عنصر treeview اضافه کنید. معمولاً برای هر عنصر فروپاشی Bootstrap به یک شناسه منحصر به فرد نیاز دارد. توصیه می کنیم از شناسه عنصر درخت نمای به عنوان پیشوند هر عنصر جمع شده همراه با یک شناسه منحصر به فرد استفاده کنید. به جمع کردن اسناد در Bootstrap مراجعه کنید
<ul class="treeview" id="treeviewExample">
<li class="treeview-list-item">
<a data-bs-toggle="collapse" href="#treeviewExample-1-1" role="button" aria-expanded="false">
<p class="treeview-text">public</p>
</a>
<ul class="collapse treeview-list" id="treeviewExample-1-1">
<li class="treeview-list-item">
<a data-bs-toggle="collapse" href="#treeviewExample-2-1" role="button" aria-expanded="false">
<p class="treeview-text">assets</p>
</a>
<!-- Nestesd Childrens-->
</li>
</ul>
</li>
</ul>
