@stratio/egeo
Version:
166 lines (160 loc) • 5.98 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="searchcomponent">Search (Component)</h1>
<p>The search component has been designed to allow user to find a specific content according to his needs.</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>debounce</td>
<td>Number</td>
<td>False</td>
<td>Time elapsed in milliseconds before displaying the autocomplete list</td>
<td>0</td>
</tr>
<tr>
<td>liveSearch</td>
<td>Boolean</td>
<td>False</td>
<td>Boolean to enable or disable the automatic search while the user is typing</td>
<td>true</td>
</tr>
<tr>
<td>minLength</td>
<td>Number</td>
<td>False</td>
<td>Minimum of characters typed by the user before launching the search</td>
<td>0</td>
</tr>
<tr>
<td>placeholder</td>
<td>String</td>
<td>False</td>
<td>Text displayed in the search input</td>
<td>'Search'</td>
</tr>
<tr>
<td>qaTag</td>
<td>String</td>
<td>False</td>
<td>Label used as id</td>
<td>''</td>
</tr>
<tr>
<td>value</td>
<td>String</td>
<td>False</td>
<td>Initial value of the search text</td>
<td>''</td>
</tr>
<tr>
<td>disabled</td>
<td>Boolean</td>
<td>False</td>
<td>Boolean to enable or disable the search</td>
<td>false</td>
</tr>
<tr>
<td>withAutocomplete</td>
<td>Boolean</td>
<td>False</td>
<td>Enable or disable the autocomplete list when user is typing</td>
<td>false</td>
</tr>
<tr>
<td>autocompleteList</td>
<td>StDropDownMenuItem[]</td>
<td>False</td>
<td>List of items displayed in the autocomplete list when user is typing</td>
<td>''</td>
</tr>
<tr>
<td>showIcon</td>
<td>Boolean</td>
<td>False</td>
<td>Boolean to hide/show the loupe icon</td>
<td>true</td>
</tr>
<tr>
<td>emptyAutocompleteListMessage</td>
<td>String</td>
<td>False</td>
<td>Message displayed when the autocomplete list is enabled but there are not any item with the typed text</td>
<td>''</td>
</tr>
<tr>
<td>filterOptions</td>
<td>StDropDownMenuItem[]</td>
<td>False</td>
<td>Options displayed at the filter select. If it is not introduced,filter will not be displayed</td>
<td>''</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>search</td>
<td>Object(filter?: string, text: string)</td>
<td>Event emitted when search is launched. It contains the text typed by the user and the filter value selected (only if filter is displayed)</td>
</tr>
</tbody>
</table>
<h2 id="example">Example</h2>
<pre><code class="html language-html">Search without filters
<st-search [placeholder]="placeholder"
[qaTag]="qaTag"
[value]="searched"
[debounce]="debounceTime"
[minLength]="minLength"
(search)="onSearchResult($event)"></st-search>
Search with filters
<st-search [placeholder]="placeholder"
[qaTag]="qaTag"
[value]="searched"
[debounce]="debounceTime"
[minLength]="minLength"
[filterOptions]="[
{ label: 'All', value: 1 },
{ label: 'Type ', value: 2 },
{ label: 'Color', value: 3 }
]"
(search)="onSearchResult($event)"></st-search>
</code></pre>
</body>
</html>