mirror of https://github.com/hashicorp/consul
62 lines
2.0 KiB
Markdown
62 lines
2.0 KiB
Markdown
## SearchBar
|
|
|
|
```handlebars
|
|
<SearchBar
|
|
@value={{"search term"}}
|
|
@onsearch={{action "search"}}
|
|
/>
|
|
```
|
|
|
|
### Arguments
|
|
|
|
| Argument | Type | Default | Description |
|
|
| --- | --- | --- | --- |
|
|
| `value` | `String` | | The string `value` of the freetext search bar |
|
|
| `onsearch` | `Function` | | The action to fire when the freetext search bar changes. Emits a native event with a `target.value` property containing the text typed into the search bar |
|
|
| `options` | `Array` | | An array of Key/Values pairs to use for options for either a filter interface or a sort interface |
|
|
| `selected` | `Object` | | An object containing a Key/Value pair of the currently selected option |
|
|
| `onchange` | `Function` | | The action to fire when the filter/sort changes. Emits an Event-like object, when filtering this has a `target.value` property containg the key of the selected filter, when sorting this has a `target.selected` property containing the selected Key/Value pair |
|
|
| `secondary` | `string` | | String identifier to signify what type of secondary filter to show. Currently only value here is 'sort' |
|
|
|
|
`SearchBar` is used for a variety of searching behaviours, freetext searching, filtering and sorting. It is also slot based to enable you to completely overwrite the secondary search if need be.
|
|
|
|
### Examples
|
|
|
|
```handlebars
|
|
{{! Freetext only search bar}}
|
|
<SearchBar
|
|
@value={{"search term"}}
|
|
@onsearch={{action "search"}}
|
|
/>
|
|
```
|
|
|
|
```handlebars
|
|
{{! Freetext and filter search bar}}
|
|
<SearchBar
|
|
@value={{search}}
|
|
@onsearch={{action (mut search) value='target.value'}}
|
|
@selected={{filter.selected}}
|
|
@options={{filter.items}}
|
|
@onchange={{action (mut filterBy) value='target.value'}}
|
|
/>
|
|
```
|
|
|
|
```handlebars
|
|
{{! Freetext and sort search bar}}
|
|
<SearchBar
|
|
@value={{search}}
|
|
@onsearch={{action (mut search) value='target.value'}}
|
|
@secondary="sort"
|
|
@selected={{sort.selected}}
|
|
@options={{sort.items}}
|
|
@onchange={{action (mut sortBy) value='target.selected.key'}}
|
|
/>
|
|
```
|
|
|
|
### See
|
|
|
|
- [Component Source Code](./index.js)
|
|
- [Template Source Code](./index.hbs)
|
|
|
|
---
|