@stratio/egeo
Version:
97 lines (92 loc) • 3.64 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="headercomponent">Header (Component)</h1>
<p>The header component is a main component of an application. This component must be on top and scroll with page, when scroll is in a calculated position, the header shrinks and fix to top.</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>menu</td>
<td>StHeaderMenuOption[]</td>
<td>False</td>
<td>Array with menu option to show</td>
<td></td>
</tr>
<tr>
<td>navigateByDefault</td>
<td>Boolean</td>
<td>False</td>
<td>True if we want menu to manage navigation, false if navigation will be managed from the outside</td>
<td></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>selectMenu</td>
<td>StHeaderSelection</td>
<td>Notify any menu option selection</td>
</tr>
</tbody>
</table>
<h2 id="example">Example</h2>
<pre><code class="html language-html"><st-header [menu]="headerMenuSchema"
id="header">
<div class="st-header-logo">
<!-- Logo as svg, image, etc. -->
</div>
<div class="st-header-user-menu">
<!-- Right header menu, with user menu, notifications, etc -->
</div>
</st-header>
</code></pre>
<h2 id="models">Models</h2>
<p><em>Header menu options</em> (StHeaderMenuOption)</p>
<pre><code class="typescript language-typescript">export class StHeaderMenuOption {
icon ? : string; // Icon to show on left of menu label
label: string; // Menu label to show
subMenus: StHeaderSubMenuOption[]; // List of submenu options
link: string;
external ? : boolean;
openInNewPage ? : boolean;
}
</code></pre>
<p><em>Submenu options</em> (StHeaderSubMenuOption)</p>
<pre><code class="typescript language-typescript">export class StHeaderSubMenuOption {
label: string; // Label to show
link: string;
external ? : boolean;
openInNewPage ? : boolean;
}
</code></pre>
</body>
</html>