@stratio/egeo
Version:
Stratio egeo library of components in Angular 2
138 lines (134 loc) • 5.21 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<title>Stratio Egeo - Documentation</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" type="image/png" href="assets/images/favicon.png">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
</head>
<body class="container-fluid">
<a href="/index.html">Go Back to index</a><br>
<h1 id="treecomponent">Tree (Component)</h1>
<p>The tree is a component for representing information in a hierarchical way.It allows navigating between the different nodes and visualizing the parent-child relationships between nodes.Up to 5 depth levels can be displayed at a time. To avoid a horizontal
scroll,from the 5th level will be collapsing previous levels, starting with the first parent.</p>
<h2 id="inputs">Inputs</h2>
<table class="table table-striped">
<thead>
<tr>
<th>Property</th>
<th>Type</th>
<th>Req</th>
<th>Description</th>
<th>Default</th>
</tr>
</thead>
<tbody>
<tr>
<td>qaTag</td>
<td>String</td>
<td>False</td>
<td>Id value for qa test</td>
<td>''</td>
</tr>
<tr>
<td>tree</td>
<td>StNodeTree</td>
<td>True</td>
<td>Tree root node</td>
<td></td>
</tr>
<tr>
<td>maxLevel</td>
<td>Number</td>
<td>False</td>
<td>Max level to show. From this level the tree does not expand more</td>
<td></td>
</tr>
<tr>
<td>isRoot</td>
<td>Boolean</td>
<td>False</td>
<td>TRUE: the first node is root and not show dots, FALSE: the first node is not root andwe put three dots to indicate that are more levels upper</td>
<td>true</td>
</tr>
<tr>
<td>expandFatherBranch</td>
<td>Boolean</td>
<td>False</td>
<td>TRUE: Expand the path from the root to the expanded node if any node is not expanded.FALSE: Only expand the selected node</td>
<td>true</td>
</tr>
<tr>
<td>collapseChildsBranch</td>
<td>Boolean</td>
<td>False</td>
<td>TRUE: Collapse all child nodes. FALSE: Only collapse the selected node</td>
<td>true</td>
</tr>
<tr>
<td>changeStreamNotification</td>
<td>Observable<StNodeTreeChange></td>
<td>False</td>
<td>Stream for notificating changes in some node and not change all tree</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="outputs">Outputs</h2>
<table class="table table-striped">
<thead>
<tr>
<th>Property</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>toogleNode</td>
<td>StNodeTreeChange</td>
<td>Notify any node expansion or collapsed</td>
</tr>
<tr>
<td>selectNode</td>
<td>StNodeTreeChange</td>
<td>Notify any node selection</td>
</tr>
<tr>
<td>navigatePrevious</td>
<td>Event</td>
<td>Notify click over three dots to indicate that user wants to go up in tree structrure</td>
</tr>
</tbody>
</table>
<h2 id="example">Example</h2>
<pre><code class="html language-html"><st-tree [tree]="treeA"
[maxLevel]="treeModel.max"
[isRoot]="true"
(toogleNode)="onToogleNode($event, treeA)"
(selectNode)="onSelectNode($event, treeA)"
(navigatePrevious)="onNavigatePrevious($event)"
[changeStreamNotification]="notificationChangeStream">
</st-tree>
</code></pre>
<h2 id="models">Models</h2>
<p><em>Node of tree</em> (StNodeTree)</p>
<pre><code class="typescript language-typescript">export class StNodeTree {
name: string;
icon: string;
children ? : StNodeTree[];
expanded ? : boolean;
selected ? : boolean;
}
</code></pre>
<p><em>Object emited on changes</em> (StNodeTreeChange)</p>
<pre><code class="typescript language-typescript">export class StNodeTreeChange {
node: StNodeTree;
path: string;
}
</code></pre>
</body>
</html>