JSFiddle - React, Tailwind, and code Playground

by mariomc

HTML

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/ink/2.2.1/css/ink.css">
<script src="https://rawgithub.com/sapo/Ink/develop/js/ink.js"></script>
<script src="https://rawgithub.com/sapo/Ink/develop/Inkjs/Ink/UI/TreeView/1/lib.js"></script>
<script src="https://rawgithub.com/sapo/Ink/develop/Inkjs/Ink/UI/Common/1/lib.js"></script>
<p>Set the data attributes to change the icons. Use <a href="http://ink.sapo.pt/icons">any of this icon class names</a>. Or build your own classes.</p>

<div class="ink-row">
    <div class="large-33">
        
<h3>Default</h3>

        <ul class="ink-tree-view" id="treeview1">
            <li data-open="true"><a href="#">root</a>

                <ul>
                    <li><a href="#">child 1</a>

                    </li>
                    <li><a href="#">child 2</a>

                        <ul>
                            <li><a href="#">grandchild 2a</a>

                            </li>
                            <li><a href="#">grandchild 2b</a>

                                <ul>
                                    <li><a href="">grandgrandchild 1bA</a>

                                    </li>
                                    <li><a href="">grandgrandchild 1bB</a>

                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li><a href="#">child 3</a>

                    </li>
                </ul>
            </li>
        </ul>
    </div>
    <div class="large-33">
        
<h3>Folder View</h3>

        <ul class="ink-tree-view" id="treeview2" data-closed-class="icon-folder-close" data-open-class="icon-folder-open">
            <li data-open="true"><a href="#">root</a>

                <ul>
                    <li><a href="#">child 1</a>

                    </li>
                    <li><a href="#">child 2</a>

                        <ul>
                           ...

CSS

.ink-tree-view li {
  list-style-type: none;
}
.ink-tree-view [data-open] > :before {
  margin-left: -1.3em;
  margin-right: .4em;
  text-decoration: none;
}

JavaScript

var treeview1 = new Ink.UI.TreeView('#treeview1');
var treeview2 = new Ink.UI.TreeView('#treeview2');
var treeview3 = new Ink.UI.TreeView('#treeview3', {closedClass: 'icon-home', openClass: 'icon-save'});
var treeview4 = new Ink.UI.TreeView('#treeview4');