20 lines
1.2 KiB
Handlebars
20 lines
1.2 KiB
Handlebars
|
{{#freestyle-usage "search-box" title="Search Box"}}
|
||
|
|
{{search-box
|
||
|
|
searchTerm=(mut searchTerm1)
|
||
|
|
placeholder="Search things..."}}
|
||
|
|
{{/freestyle-usage}}
|
||
|
|
{{#freestyle-annotation}}
|
||
|
|
<p>The search box component is a thin wrapper around a simple input. Although the searchTerm passed to it is a mutable reference, internally search term is debounced. This is to prevent potentially expensive code that depends on searchTerm from recomputing many times as a user types.</p>
|
||
|
|
<p>There is no form of the search box component that defers updating the searchTerm reference until the user manually clicks a "Search" button. This can be achieved by placing a button next to the search bar component and using it to perform search, but search should be automatic whenever possible.</p>
|
||
|
|
{{/freestyle-annotation}}
|
||
|
|
|
||
|
|
{{#freestyle-usage "search-box-compact" title="Search Box Compact"}}
|
||
|
|
{{search-box
|
||
|
|
searchTerm=(mut searchTerm2)
|
||
|
|
placeholder="Search things..."
|
||
|
|
inputClass="is-compact"}}
|
||
|
|
{{/freestyle-usage}}
|
||
|
|
{{#freestyle-annotation}}
|
||
|
|
<p>Search box provides an inputClass property to control the inner input. This is nice for fitting the search box into smaller spaces, such as boxed-section heads.</p>
|
||
|
|
{{/freestyle-annotation}}
|