sd-treeview/README.md

simple folders and files view in tree-view formate

# sd-treeview

please flow this link for document https://folder-treeview.web.app/
a folders and files view in tree-view formate

use this Component in this Way

<Treeview
treeViewData={treeViewData}
click:{click}

>

now the formate of treeViewData is :
treeViewData= [
{
name: "Local Disk(C:)",
folder: true,
children: [
{
name: "index.html",
folder: false,
icon: "🗎",
iconCss: {
color: "red",
size: "20px",
},
},
],
isPress: false,
istextPress: false,
},
{
name: "Local Disk(D:)",
folder: true,
children: [
{
name: "index.html",
folder: false,
icon: "🗎",
},
{
name: "sample.css",
folder: false,
icon: "🗝",
},
{
name: "Local Disk(F:)",
folder: true,
children: [
{
name: "index.html",
folder: false,
icon: "🗎",
},
{
name: "Local Disk(E:)",
folder: true,
children: [
{
name: "index.html",
folder: false,
icon: "🗎",
iconCss: {
size: "15px",
color: "red",
},
textCss: {
color: "red",
size: "10px",
},
},
],
isPress: false,
istextPress: false,
},
],
isPress: false,
istextPress: false,
},
],
isPress: false,
istextPress: false,
},
];

please add isPress and istextPress two
and click function is a function that provide after click information

click fun define this way:
click={(e)=>console.log(e)}

Now , Here This is The FolderStructure
Here
name : is the Short name of Folder,
address :is the full path of the folder;
folder: here it take a boolean value that deine it is a folder or not ,
children:[] : this is all child of that folder,
isPress: this define open the folder or not,
istextPress:this also define press on text or not

{
name: "Local Disk(C:)",
folder: true,
children: [
{
name: "index.html",
folder: false,
icon: "🗎",
iconCss: {
color: "red",
size: "20px",
},
},
],
isPress: false,
istextPress: false,
},

now file or children of folder

name : this is the name of the file
folder : this take false so define it is a file
icon : this take only string of file icon
then iconCss take only two formate color and size
also have textCss this also take color formate and size formate

name: "index.html",
folder: false,
icon: "🗎",
iconCss: {
color: "red",
size: "20px",
}
textCss:{
color:"blue",
size:"10px"
}