@stratio/egeo
Version:
131 lines (127 loc) • 4.58 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="sidebarcomponent">Sidebar (Component)</h1>
<p>The sidebar component has been designed to navigate through different sections of a web page.</p>
<h2 id="inputs">Inputs</h2>
<table class="table table-striped">
<thead>
<tr>
<th id="property">Property</th>
<th id="type">Type</th>
<th id="req">Req</th>
<th id="description">Description</th>
<th id="default">Default</th>
</tr>
</thead>
<tbody>
<tr>
<td>title</td>
<td>String</td>
<td>False</td>
<td>Title displayed on the top of menu</td>
<td>''</td>
</tr>
<tr>
<td>active</td>
<td>StSidebarItem</td>
<td>False</td>
<td>The current active item</td>
<td>''</td>
</tr>
<tr>
<td>items</td>
<td>StSidebarItem[]</td>
<td>False</td>
<td>List of items displayed on the menu</td>
<td>''</td>
</tr>
<tr>
<td>defaultActive</td>
<td>Boolean</td>
<td>False</td>
<td>Unset first item as active by default if false</td>
<td>true</td>
</tr>
<tr>
<td>searchMode</td>
<td>Boolean</td>
<td>False</td>
<td>Boolean to enable or disable the search mode. By default, it is disabled</td>
<td>''</td>
</tr>
<tr>
<td>searchPlaceholder</td>
<td>String</td>
<td>False</td>
<td>Search placeholder</td>
<td>'Search'</td>
</tr>
<tr>
<td>emptyResults</td>
<td>String</td>
<td>False</td>
<td>Message displayed when search does not have any result</td>
<td></td>
</tr>
<tr>
<td>visualMode</td>
<td>StSidebarVisualMode</td>
<td>False</td>
<td>Visual mode used to display the item list</td>
<td>'StSidebarVisualMode.normal'</td>
</tr>
</tbody>
</table>
<h2 id="outputs">Outputs</h2>
<table class="table table-striped">
<thead>
<tr>
<th id="property">Property</th>
<th id="type">Type</th>
<th id="description">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>change</td>
<td>StSidebarItem</td>
<td>Event emitted when the active item is changed. This emits the active item</td>
</tr>
<tr>
<td>search</td>
<td>String</td>
<td>Event emitted when search mode is enabled and user interacts with the search input</td>
</tr>
</tbody>
</table>
<h2 id="example">Example</h2>
<pre><code class="html language-html"><st-sidebar class="sidebar"
title="Mesos Manager"
[items]="items"
qaTag="sidebar-demo">
</st-sidebar>
</code></pre>
<h2 id="models">Models</h2>
<p><em>Sidebar items</em> (StSidebarItem)</p>
<pre><code class="typescript language-typescript">export interface StSidebarItem {
id: string;
label: string;
class ? : string;
items ? : StSidebarItem[];
result ? : string;
disabled ? : boolean;
}
</code></pre>
</body>
</html>