@stratio/egeo
Version:
161 lines (157 loc) • 6.15 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="titlecomponent">{TITLE} (Component)</h1>
<p>Tag InputThis component is a text input box that automatically creates tags out of a typed text.</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>label</td>
<td>String | null</td>
<td>False</td>
<td>Label to show over the input. It is empty by default</td>
<td>null</td>
</tr>
<tr>
<td>tooltip</td>
<td>String | null</td>
<td>False</td>
<td>The tooltip to show over the label. It is empty by default</td>
<td>null</td>
</tr>
<tr>
<td>placeholder</td>
<td>String | null</td>
<td>False</td>
<td>The text that appears as placeholder of the input. It is empty by default</td>
<td>null</td>
</tr>
<tr>
<td>errorMessage</td>
<td>String | null</td>
<td>False</td>
<td>Error message to show. It is empty by default</td>
<td>null</td>
</tr>
<tr>
<td>type</td>
<td>String | null</td>
<td>False</td>
<td>Type of the items</td>
<td>null</td>
</tr>
<tr>
<td>withAutocomplete</td>
<td>Boolean</td>
<td>False</td>
<td>Enable autocomplete feature. It is false by default</td>
<td>false</td>
</tr>
<tr>
<td>autocompleteList</td>
<td>(StDropDownMenuItem | StDropDownMenuGroup)[]</td>
<td>False</td>
<td>List to be used for autocomplete feature. It is empty by default</td>
<td>Array()</td>
</tr>
<tr>
<td>charsToShowAutocompleteList</td>
<td>Boolean</td>
<td>False</td>
<td>List to be used for autocomplete feature. It is empty by default</td>
<td>Array()</td>
</tr>
<tr>
<td>allowFreeText</td>
<td>Boolean</td>
<td>False</td>
<td>Boolean to allow user to type a free text or not</td>
<td>true</td>
</tr>
<tr>
<td>infoMessage</td>
<td>String</td>
<td>False</td>
<td>Message used to inform user about what values he has to introduce</td>
<td></td>
</tr>
<tr>
<td>forbiddenValues</td>
<td>String[]</td>
<td>False</td>
<td>A list of values that user can not type and if he types one of them,tag input will be invalid. It is empty by default</td>
<td>Array()</td>
</tr>
<tr>
<td>regularExpression</td>
<td>String</td>
<td>False</td>
<td>Regular expression to validate values. It is null by default</td>
<td></td>
</tr>
<tr>
<td>forceValidations</td>
<td>Boolean</td>
<td>False</td>
<td>If you specify it to 'true', the tag input checks the errors before being modified by user</td>
<td>false</td>
</tr>
<tr>
<td>disabled</td>
<td>Boolean</td>
<td>False</td>
<td>Disable the component. It is false by default</td>
<td>false</td>
</tr>
</tbody>
</table>
<h2 id="example">Example</h2>
<pre><code class="html language-html"><st-tag-input class="st-form-field"
name="tag-input-reactive"
formControlName="tag-input-reactive"
[autocompleteList]="filteredlist"
[withAutocomplete]="true"
[disabled]="disabled"
[label]="'Tag Input with Reactive Form'"
[id]="'tag-input-reactive'"
[placeholder]="'Add tags separated by commas'"
[tooltip]="'This is a Tag Input component tooltip'"
[forbiddenValues]="['test']"
(input)="onFilterList($event)">
</st-tag-input>
<st-tag-input class="st-form-field"
name="tag-input-template-driven"
[(ngModel)]="tags.templateDriven"
[autocompleteList]="filteredlist"
[withAutocomplete]="true"
[disabled]="disabled"
[label]="'Tag Input with Template Driven Form'"
[id]="'tag-input-template-driven'"
[placeholder]="'Add tags separated by commas'"
[tooltip]="'This is a Tag Input component tooltip'"
[regularExpression]="pattern"
(input)="onFilterList($event)">
</st-tag-input>
</code></pre>
</body>
</html>