@stratio/egeo
Version:
183 lines (179 loc) • 6.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="dropdownmenucomponent">Dropdown Menu (Component)</h1>
<p>This directive show a dropdown menu list in element that you attach</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>active</td>
<td>Boolean</td>
<td>False</td>
<td>Show or hide list</td>
<td>false</td>
</tr>
<tr>
<td>items</td>
<td>StDropDownMenuItem[] | StDropDownMenuGroup[]</td>
<td>False</td>
<td>List of items or groups of them to show in menu</td>
<td>[]</td>
</tr>
<tr>
<td>placement</td>
<td>StPopPlacement</td>
<td>False</td>
<td>Possible positions of menu with respect element to attach</td>
<td>StPopPlacement.BOTTOM_START</td>
</tr>
<tr>
<td>emptyListMessage</td>
<td>String</td>
<td>False</td>
<td>Message to show in case of empty list</td>
<td>''</td>
</tr>
<tr>
<td>selectedItem</td>
<td>StDropDownMenuItem | undefined</td>
<td>False</td>
<td>Define selected item without passing as property</td>
<td>undefined</td>
</tr>
<tr>
<td>itemsBeforeScroll</td>
<td>StDropDownMenuItem | undefined</td>
<td>False</td>
<td>Define selected item without passing as property</td>
<td>undefined</td>
</tr>
<tr>
<td>moveSelected</td>
<td>Boolean</td>
<td>False</td>
<td>If true, move selected item to top in menu when open</td>
<td>true</td>
</tr>
<tr>
<td>styleSelected</td>
<td>Boolean</td>
<td>False</td>
<td>If true, apply class selected to selected item</td>
<td>true</td>
</tr>
<tr>
<td>isLoading</td>
<td>Boolean</td>
<td>False</td>
<td>If true, show loader at the end of the list</td>
<td>true</td>
</tr>
<tr>
<td>offset</td>
<td>StPopOffset</td>
<td>False</td>
<td>For position with offset in x o y axis</td>
<td>{x: 0 , y: 0}</td>
</tr>
<tr>
<td>openToLeft</td>
<td>Boolean</td>
<td>False</td>
<td>For calculating all positions from the right corner</td>
<td>false</td>
</tr>
<tr>
<td>visualMode</td>
<td>StDropdownVisualMode</td>
<td>False</td>
<td>It is needed to specify the styles applied to the list. By default is displayed as a normal option list</td>
<td>StDropDownVisualMode.OPTION_LIST</td>
</tr>
<tr>
<td>keyBoardMove</td>
<td>Boolean</td>
<td>False</td>
<td>It is needed to activate navigation through options using the keyboard</td>
<td>false</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>StDropDownMenuItem</td>
<td>Event emitted when user select an item</td>
</tr>
<tr>
<td>scrollAtBottom</td>
<td>Any</td>
<td>Event emitted when scroll reach the end of the list</td>
</tr>
<tr>
<td>itemMouseEnter</td>
<td>StDropDownMenuItem</td>
<td>Event emitted when mouse is over an item</td>
</tr>
<tr>
<td>itemMouseLeave</td>
<td>StDropDownMenuItem</td>
<td>Event emitted when mouse leaves an item</td>
</tr>
</tbody>
</table>
<h2 id="example">Example</h2>
<pre><code class="html language-html"><st-dropdown-menu [items]="list"
[active]="show"
(change)="onChange(event)">
<button class="button button-primary"
(click)="show = !show">Show menu</button>
</st-dropdown-menu>
</code></pre>
<h2 id="models">Models</h2>
<p><em>Menu items</em> (StDropDownMenuItem)</p>
<pre><code class="typescript language-typescript">export class StDropDownMenuItem {
label: string;
value: any;
icon ? : string;
labelColor ? : string;
iconColor ? : string;
textInfo ? : string;
selected ? : boolean;
hasHtml ? : boolean;
extraIcon ? : string;
extraIconBubble ? : string;
extraIconColor ? : string;
[key: string]: any; // To do model more extensible if any other component needs to send more data
}
</code></pre>
</body>
</html>