UNPKG

3.34 kBMarkdownView Raw
1# TdSearchBoxComponent: td-search-box
2
3`td-search-box` element to generate a search box with animations.
4
5## API Summary
6
7#### Inputs
8
9- backIcon?: string
10 - The icon used to close the search toggle, only shown when [alwaysVisible] is false. Defaults to 'search' icon.
11- searchIcon?: string
12 - The icon used to open/focus the search toggle. Defaults to 'search' icon.
13- clearIcon?: string
14 - The icon used to clear the search input. Defaults to 'cancel' icon.
15- showUnderline?: boolean
16 - Sets if the input underline should be visible. Defaults to 'false'.
17- debounce?: number
18 - Debounce timeout between keypresses. Defaults to 400.
19- alwaysVisible?: boolean
20 - Sets if the input should always be visible. Defaults to 'false'.
21- placeholder?: string
22 - Placeholder for the underlying input component.
23
24#### Events
25
26- searchDebounce?: string
27 - Event emitted after the [debounce] timeout.
28 - Emits a [string].
29- search?: string
30 - Event emitted after the key enter has been pressed.
31 - Emits a [string].
32- clear?: string
33 - Event emitted after the clear icon has been clicked.
34 - Emits [void].
35- blur: function
36 - Event emitted after the blur event has been called in underlying input.
37 - Emits [void].
38
39## Usage
40
41Example for HTML usage:
42
43```html
44<td-search-box
45 backIcon="arrow_back"
46 placeholder="Search here"
47 [(ngModel)]="searchInputTerm"
48 [showUnderline]="false|true"
49 [debounce]="500"
50 [alwaysVisible]="false|true"
51 (searchDebounce)="searchInputTerm = $event"
52 (search)="searchInputTerm = $event"
53 (clear)="searchInputTerm = ''"
54 (blur)="onBlurEvent()"
55>
56</td-search-box>
57```
58
59# TdSearchInputComponent: td-search-input
60
61`td-search-input` element to generate a search input with its animated cancel button.
62
63## API Summary
64
65#### Inputs
66
67- debounce?: number
68 - Debounce timeout between keypresses. Defaults to 400.
69- placeholder?: string
70 - Placeholder for the underlying input component.
71- showUnderline?: boolean
72 - Sets if the input underline should be visible. Defaults to 'false'.
73- clearIcon?: string
74 - The icon used to clear the search input. Defaults to 'cancel' icon.
75- appearance?: MatFormFieldAppearance
76 - Appearance style for the underlying input component.
77
78#### Events
79
80- searchDebounce: function
81 - Event emitted after the [debounce] timeout.
82 - Emits a [string].
83- search: function
84 - Event emitted after the key enter has been pressed.
85 - Emits a [string].
86- clear: function
87 - Event emitted after the clear icon has been clicked.
88 - Emits [void].
89- blur: function
90 - Event emitted after the blur event has been called in underlying input.
91 - Emits [void].
92
93#### Methods
94
95- focus: function
96 - Method to focus to underlying input.
97- clearSearch: function
98 - Method to clear the underlying input.
99
100## Usage
101
102Example for HTML usage:
103
104```html
105<td-search-input
106 appearance="fill|outline"
107 placeholder="Search here"
108 [(ngModel)]="searchInputTerm"
109 [showUnderline]="false|true"
110 [debounce]="500"
111 (searchDebounce)="searchInputTerm = $event"
112 (search)="searchInputTerm = $event"
113 (clear)="searchInputTerm = ''"
114>
115</td-search-input>
116```
117
118## Setup
119
120Import the [CovalentSearchModule] in your NgModule:
121
122```typescript
123import { CovalentSearchModule } from '@covalent/core/search';
124@NgModule({
125 imports: [
126 CovalentSearchModule,
127 ...
128 ],
129 ...
130})
131export class MyModule {}
132```