Skip to content

Commit 0fd4774

Browse files
rigor789rigor789
committed
docs: cleanup SearchBar
1 parent 3fa38e4 commit 0fd4774

File tree

5 files changed

+52
-193
lines changed

5 files changed

+52
-193
lines changed

‎content/screenshots/android/SearchBar.png

22.3 KB
Loading

‎content/screenshots/ios/SearchBar.png

61.9 KB
Loading

‎content/ui/searchbar.md

Lines changed: 41 additions & 192 deletions
Original file line numberDiff line numberDiff line change
@@ -1,259 +1,108 @@
11
---
22
title: SearchBar
3+
description: UI component for entering search queries.
4+
contributors:
5+
- rigor789
6+
- Ombuweb
37
---
48

5-
<!-- TODO: Add flavors -->
6-
7-
`<SearchBar>` is a UI component that provides a user interface for entering search queries and submitting requests to the search provider.
8-
9-
---
9+
`<SearchBar>` is a UI component that provides a user interface for entering search queries.
1010

1111
<DeviceFrame type="ios">
12-
<img src="https://raw.githubusercontent.com/nativescript-vue/nativescript-vue-ui-tests/master/screenshots/ios-simulator103iPhone6/SearchBar.png"/>
12+
<img src="../screenshots/ios/SearchBar.png"/>
1313
</DeviceFrame>
1414
<DeviceFrame type="android">
15-
<img src="https://raw.githubusercontent.com/nativescript-vue/nativescript-vue-ui-tests/master/screenshots/android23/SearchBar.png" />
15+
<img src="../screenshots/android/SearchBar.png"/>
1616
</DeviceFrame>
1717

18-
<!-- /// flavor plain -->
19-
20-
### A simple SearchBar handling the clear and submit events
21-
22-
```xml
23-
<SearchBar id="searchBar"
24-
hint="Enter search term here ..."
25-
text="{{ searchText }}" clear="{{ onClear }}"
26-
submit="{{ onSubmit }}"
27-
loaded="{{ onSearchBarLoaded }}"/>
28-
```
29-
30-
```ts
31-
import { Observable, Page, SearchBar } from '@nativescript/core'
32-
33-
export function onNavigatingTo(args) {
34-
const page = args.object as Page
35-
const vm = new HelloWorldModel()
36-
page.bindingContext = vm
37-
}
38-
39-
export class HelloWorldModel extends Observable {
40-
searchText = ''
41-
constructor() {
42-
super()
43-
}
44-
45-
onSearchBarLoaded(args: EventData) {
46-
const searchBar = args.object as SearchBar
47-
searchBar.on('textChange', (args: PropertyChangeData) => {
48-
console.log('Event name: ', args.eventName)
49-
})
50-
}
51-
onSubmit(args: EventData) {
52-
const searchBar = args.object as SearchBar
53-
console.log(`Searching for ${searchBar.text}`)
54-
}
55-
56-
onClear(args: EventData) {
57-
const searchBar = args.object as SearchBar
58-
console.log(`Clear event raised`)
59-
}
60-
}
61-
```
62-
63-
<!-- ///
64-
65-
/// flavor angular
66-
67-
```xml
68-
<SearchBar
69-
hint="Enter search term here ..."
70-
[text]="searchPhrase"
71-
(textChange)="onTextChanged($event)"
72-
(clear)="onClear($event)"
73-
(submit)="onSubmit($event)"
74-
>
75-
</SearchBar>
76-
```
77-
78-
```ts
79-
import { Component } from '@angular/core'
80-
import { SearchBar } from '@nativescript/core'
81-
82-
@Component({
83-
moduleId: module.id,
84-
templateUrl: './usage.component.html'
85-
})
86-
export class UsageComponent {
87-
searchPhrase: string
88-
89-
onSubmit(args) {
90-
const searchBar = args.object as SearchBar
91-
console.log(`Searching for ${searchBar.text}`)
92-
}
93-
94-
onTextChanged(args) {
95-
const searchBar = args.object as SearchBar
96-
console.log(`Input changed! New value: ${searchBar.text}`)
97-
}
98-
99-
onClear(args) {
100-
const searchBar = args.object as SearchBar
101-
console.log(`Clear event raised`)
102-
}
103-
}
104-
```
105-
106-
///
107-
108-
/// flavor vue
109-
110-
```xml
111-
<SearchBar
112-
hint="Search hint"
113-
:text="searchPhrase"
114-
@textChange="onTextChanged"
115-
@submit="onSubmit"
116-
/>
117-
```
118-
119-
`<SearchBar>` provides two-way data binding using `v-model`.
120-
121-
```xml
122-
<SearchBar v-model="searchQuery" />
123-
```
124-
125-
///
126-
127-
/// flavor svelte
128-
129-
```tsx
130-
<searchBar
131-
hint="Search hint"
132-
text="{searchQuery}"
133-
on:textChange="{onTextChanged}"
134-
on:submit="{onSubmit}"
135-
/>
136-
```
137-
138-
`<SearchBar>` provides two-way data binding for `text`.
139-
140-
```xml
141-
<searchBar bind:text="{searchQuery}" />
142-
```
143-
144-
///
145-
146-
/// flavor react
147-
148-
```tsx
149-
<searchBar
150-
hint="Search hint"
151-
text="searchPhrase"
152-
onTextChange={onTextChanged}
153-
onSubmit={onSubmit}
154-
onClose={onClose}
155-
/>
156-
```
157-
158-
/// -->
18+
<<< @/../examples/src/ui/SearchBar/template.xml#example
15919

16020
## Props
16121

16222
### hint
16323

164-
```xml
165-
<SearchBar hint="Enter search term here ..." />
24+
```ts
25+
hint: string
16626
```
16727

168-
Gets or sets Placeholder text for the input area.
28+
<!-- textlint-disable terminology -->
16929

170-
---
30+
Gets or sets the placeholder text for the input area.
31+
32+
<!-- textlint-enable -->
17133

17234
### text
17335

174-
```xml
175-
<SearchBar text="{{ searchText }}" />
36+
```ts
37+
text: string
17638
```
17739

17840
Gets or sets the value of the search query.
17941

180-
---
181-
18242
### textFieldBackgroundColor
18343

184-
```xml
185-
<SearchBar textFieldBackgroundColor="#76ABEB"/>
44+
```ts
45+
textFieldBackgroundColor: Color
18646
```
18747

18848
Gets or sets the background color of the input area.
18949

190-
---
50+
See [Color](/api/class/Color).
19151

19252
### textFieldHintColor
19353

194-
```xml
195-
<SearchBar textFieldHintColor="#fff"/>
54+
```ts
55+
textFieldHintColor: Color
19656
```
19757

198-
Gets or sets the color of the Placeholder text.
58+
<!-- textlint-disable terminology -->
19959

200-
---
60+
Gets or sets the color of the placeholder text.
61+
62+
<!-- textlint-enable -->
63+
64+
See [Color](/api/class/Color).
20165

20266
### ...Inherited
20367

204-
For additional inherited properties, refer to the [API Reference](https://docs.nativescript.org/api-reference/classes/searchbar)
68+
For additional inherited properties, refer to the [API Reference](/api/class/SearchBar)
20569

20670
## Events
20771

20872
### textChange
20973

21074
```ts
211-
searchBar.on('textChange', (args: PropertyChangeData) => {
212-
console.log('Event name: ', args.oldValue)
75+
on('textChange', (args: PropertyChangeData) => {
76+
const searchBar = args.object as SearchBar
77+
console.log('Search query:', args.value)
21378
})
21479
```
21580

21681
Emitted when the search text is changed.
21782

218-
---
83+
See [PropertyChangeData](/api/interface/PropertyChangeData).
21984

22085
### submit
22186

222-
```xml
223-
<SearchBar submit="{{ onSubmit }}" />
224-
```
225-
22687
```ts
227-
export class HelloWorldModel extends Observable {
228-
onSubmit(args: EventData) {
229-
const searchBar = args.object as SearchBar
230-
console.log(`Searching for ${searchBar.text}`)
231-
}
232-
}
88+
on('submit', (args: EventData) => {
89+
const searchBar = args.object as SearchBar
90+
console.log('Search for:', searchBar.text)
91+
})
23392
```
23493

23594
Emitted when the search text is submitted.
23695

237-
---
238-
23996
### clear
24097

241-
```xml
242-
<SearchBar clear="{{ onClear }}" />
243-
```
244-
24598
```ts
246-
export class HelloWorldModel extends Observable {
247-
onClear(args: EventData) {
248-
const searchBar = args.object as SearchBar
249-
console.log(`Clear event raised`)
250-
}
251-
}
99+
on('submit', (args: EventData) => {
100+
const searchBar = args.object as SearchBar
101+
console.log('SearchBar cleared')
102+
})
252103
```
253104

254-
Emitted when the current search input is cleared through the **X** button in the input area.
255-
256-
---
105+
Emitted when the search input is cleared through the **&cross;** button in the input area.
257106

258107
## Native Component
259108

‎examples/flows/screenshots.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,5 +12,6 @@ output.screenshots = [
1212
'ListView',
1313
'Placeholder',
1414
'Progress',
15-
'ScrollView'
15+
'ScrollView',
16+
'SearchBar',
1617
]

‎examples/src/ui/SearchBar/template.xml

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<Page>
2+
<GridLayout>
3+
<ContentView verticalAlignment="center">
4+
<!-- #region example -->
5+
<SearchBar hint="Search..." />
6+
<!-- #endregion example -->
7+
</ContentView>
8+
</GridLayout>
9+
</Page>

0 commit comments

Comments
 (0)