treebox
See a live example on CodePen
Install
npm i treeboxjs
Import
External JS with NPM:
const TreeBox = ; ...
ES6 module:
ES6 module:
<script type="module"> ; ...
Use
const TreeBox = ; const nodes = display: `<h1>treebox example</h1>` // This will display by default when treebox is rendered children: directory: children: file: display: `<p>A file</p>` file: display: Stringraw`<div> <p>Another file</p> <p>Multiple elements must be wrapped in a single enclosing element</p> <a treebox-href="/directory/file">Link to /directory/file within treebox</a></div> ` ; // const root = document.getElementById('myTreeBoxRoot'); // if in the browserconst root = console console; const tb = nodes root; // Initiate treebox and append it to the "root" element tb; // This code will cause treebox to render the `display` HTML at `nodes.children.file`tb; // This code will cause treebox to render the `display` HTML at `nodes.children.directory.children.file`tb; // This code will cause treebox to render the `display` HTML at `nodes.children` /* OUTPUT: *//* * Rendered: * <h1>treebox example</h1> * * Cleared * * Rendered: * <div> * <p>Another file</p> * <p>Multiple elements must be wrapped in a single enclosing element</p> * <a treebox-href="/directory/file">Link to /directory/file within treebox</a> * </div> * * Cleared * * Rendered: * <p>A file</p> * * Cleared * * Rendered: * <h1>treebox example</h1> */