0.3.4 • Published 4 years ago
es6-tree v0.3.4
es6-tree
tree view for web with vanilla ES6 Javascript
Using Octicons from Github
- Override styles easily
- Select event as node is clicked
- Select node from outside
- Supports anchor with href
Dependencies
none
- use static-server from
srcfolder to test
Usage
<head>
<link rel="stylesheet" href="/es6tree.css">
<link rel="stylesheet" href="/icons/octicons.css">
</head>
<body>
<div id="tree-div"></div>
</body>import EsTree from "es6-tree";
const tree = new EsTree('tree-div', config, data);Config
You can pass null to use default config.
Types will be mapped to the type in your data, customize their styles like this:
const config = {
types: {
folder: {
css: "icon icon-file-directory"
},
file: {
css: "icon icon-file"
}
}
};Data
const data = [{
id: "master-node",
name: "#",
type: "main",
expanded: true,
children: [{
id: "folder-1",
type: "folder",
name: "A folder",
children: [{
id: "article-1",
name: "An article",
type: "file",
href: "/blog/1"
},
{
id: "article-2",
name: "Another article",
type: "file"
}
]
}]
}];Events
On select
tree.on("select", (n) => {
console.log(`Node with id ${n.id} and type ${n.type} selected`);
});Methods for interaction
select(id)
Select a node with code, will open all parent nodes as well
tree.select("article-2");open(id)
Open a node that has children with code
tree.open("folder-1");Override styles
color on hover nodes
.es6-tree summary:hover {
background: purple;
}color for selected node
.es6-tree span[selected="true"]{
background-color: red;
}color on icon
.es6-tree .node-text.icon-file::before {
color: #e6d06c;
}