Tree
Design
The tree represents a nested view of other elements with any number of controls.
All the tree element does is provide a way of grouping together nested content. Everything inside a tree is made up of other ACE elements.
More
Code
API: unstable
Trees wrap tables with a few conventions
ace-tree-groupmanages heirarchy and state.expandedcollapseddisableddepth {1..50}
- The first column always visually implements the heirarchy information
- Expanded/ Collapsed component
- Depth indication through indentation
- Content is truncated by default. This behaviour can be disabled at the tree level
- Headings are compact by default. This behaviour can be overridden at the tree level
Example
| Document | Select |
|---|---|
| 01 Annual Reports43.2 gb |
|
| 01.01 Annual Report FY 06.pdf13.46 mb |
|
| 10.23/home/user/.rbenv/versions/2.1.3/bin/ruby ruby13.46 mb |
|
<div class="ace-tree ace-tree-truncated">
<div class="ace-table-scroll-container">
<div class="ace-table-container">
<table class="ace-table ace-tree-with-controls">
<thead>
<tr class="ace-tree-group ace-tree-level-0">
<th class="ace-tree-item">Document
</th>
<th class="ace-tree-item">Select
</th>
</tr>
</thead>
<tbody>
<tr class="ace-tree-group ace-tree-level-0 ace-tree-branch-expanded">
<td class="ace-tree-item"><span class="ace-icon ace-icon-control-expanded">expanded</span><span class="ace-asset ace-asset-directory"><span class="ace-icon ace-icon-objects-folder ace-asset-type"></span><span class="ace-asset-number">01</span>
<span class="ace-asset-name">Annual Reports</span><span class="ace-asset-size">43.2 gb</span></span>
</td>
<td class="ace-tree-item">
<div class="ace-form-input-checkbox-set">
<input class="ace-form-input ace-form-input-checkbox" type="checkbox" id="doc-index-01-01">
</input>
<label class="ace-form-label ace-form-label-assistive" for="doc-index-01-01"><span class="ace-text ace-assistive">select</span>
</label>
</div>
</td>
</tr>
<tr class="ace-tree-group ace-tree-level-1">
<td class="ace-tree-item"><span class="ace-asset ace-asset-file"><span class="ace-icon ace-icon-document-acrobat ace-asset-type"></span><span class="ace-asset-number">01.01</span>
<span class="ace-asset-name">Annual Report FY 06.pdf</span><span class="ace-asset-size">13.46 mb</span></span>
</td>
<td class="ace-tree-item">
<div class="ace-form-input-checkbox-set">
<input class="ace-form-input ace-form-input-checkbox" type="checkbox" id="doc-index-01-02">
</input>
<label class="ace-form-label ace-form-label-assistive" for="doc-index-01-02"><span class="ace-text ace-assistive">select</span>
</label>
</div>
</td>
</tr>
<tr class="ace-tree-group ace-tree-level-0 ace-table-disabled">
<td class="ace-tree-item"><span class="ace-asset ace-asset-file"><span class="ace-icon ace-icon-document-generic ace-asset-type"></span><span class="ace-asset-number">10.23</span><span class="ace-asset-path">/home/user/.rbenv/versions/2.1.3/bin/ruby</span>
<span class="ace-asset-name">ruby</span><span class="ace-asset-size">13.46 mb</span></span>
</td>
<td class="ace-tree-item">
<div class="ace-form-input-checkbox-set">
<input class="ace-form-input ace-form-input-checkbox" type="checkbox" id="doc-index-01-03" disabled="disabled">
</input>
<label class="ace-form-label ace-form-label-assistive" for="doc-index-01-03"><span class="ace-text ace-assistive">select</span>
</label>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<% ace.Tree(Array())
ace.TreeHeader
ace.TreeHeaderGroup(Array())
ace.TreeHeaderItem(Array()) %>Document<%
ace.TreeHeaderItemEnd
ace.TreeHeaderItem(Array()) %>Select<%
ace.TreeHeaderItemEnd
ace.TreeHeaderGroupEnd
ace.TreeHeaderEnd
ace.TreeBody
ace.TreeBodyGroup(Array("expanded", "true"))
ace.TreeBodyItem(Array())
ace.Directory(Array(_
"name", "Annual Reports",_
"size", "43.2 gb",_
"number", "01"_
))
ace.TreeBodyItemEnd
ace.TreeBodyItem(Array())
ace.Checkbox(Array(_
"id", "doc-index-02-01"_
))
ace.CheckboxEnd
ace.TreeBodyItemEnd
ace.TreeBodyGroupEnd
ace.TreeBodyGroup(Array("depth", "1"))
ace.TreeBodyItem(Array())
ace.File(Array(_
"name", "Annual Report FY 06.pdf",_
"number", "01.01",_
"size", "13.46 mb",_
"type", "acrobat"_
))
ace.TreeBodyItemEnd
ace.TreeBodyItem(Array())
ace.Checkbox(Array("id", "doc-index-02-02"))
ace.CheckboxEnd
ace.TreeBodyItemEnd
ace.TreeBodyGroupEnd
ace.TreeBodyGroup(Array("disabled", "true"))
ace.TreeBodyItem(Array())
ace.File(Array(_
"name", "ruby",_
"number", "10.23",_
"type", "generic",_
"size", "13.46 mb",_
"path", "/home/user/.rbenv/versions/2.1.3/bin/ruby"_
))
ace.TreeBodyItemEnd
ace.TreeBodyItem(Array())
ace.Checkbox(Array(_
"id", "doc-index-02-03",_
"disabled", "disabled"_
))
ace.CheckboxEnd
ace.TreeBodyItemEnd
ace.TreeBodyGroupEnd
ace.TreeBodyEnd
ace.TreeEnd %>
Configuration
| Element | Attribute | Description | Example |
|---|---|---|---|
.ace-tree
|
.ace-tree-truncated
|
wrap cell contents |
|
.ace-tree
|
.ace-tree-document
|
use full heading style instead of collapsed |
|
.ace-tree-group
|
.ace-tree-level-{n}
|
nested depth of item |
|
.ace-tree-group
|
.ace-table-disabled
|
disabled item |
|
.ace-tree-group
|
.ace-tree-branch-expanded
|
expanded tree group |
|
.ace-tree-group
|
.ace-tree-branch-collapsed
|
collapsed tree group |
|
| Element | Attribute | Description | Example |
|---|---|---|---|
ace.Tree
|
truncated
|
wrap cell contents |
|
ace.Tree
|
type
|
use full heading style instead of collapsed "document" or nothing |
|
ace.TreeBodyGroup
|
depth
|
nested depth of item integer-string, "1", "2" |
|
ace.TreeBodyGroup
|
disabled
|
disabled item "true" |
|
ace.TreeBodyGroup
|
expanded
|
expanded tree group "true" |
|
ace.TreeBodyGroup
|
collapsed
|
collapsed tree group "true" |
|