kemko/nomad
1
0
Fork 0
mirror of https://github.com/kemko/nomad.git synced 2026-01-01 16:05:42 +03:00
Code Issues Packages Projects Releases Wiki Activity

Styleguide entry for Search Box

Browse Source
This commit is contained in:
Michael Lange
2018-07-02 17:37:38 -07:00
parent d3c695ca9c
commit efec4fc62a
2 changed files with 20 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
ui/app/templates/components/freestyle/sg-search-box.hbs Normal file
View File

@@ -0,0 +1,19 @@
{{#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}}

1
ui/app/templates/freestyle.hbs
View File

@@ -69,6 +69,7 @@
{{/section.subsection}}
{{#section.subsection name="Search box"}}
{{freestyle/sg-search-box}}
{{/section.subsection}}
{{#section.subsection name="Table"}}
{{/section.subsection}}