Skip to content

SearchBar

Panoramax.components.ui.SearchBar ⇐ lit.LitElement

Kind: static class of Panoramax.components.ui
Extends: lit.LitElement
Emits: result
Element: pnx-search-bar

Search Bar Element displays an interactive search widget.

Example

<pnx-search-bar
  id="my-search-bar"
  placeholder="Search something..."
  .searcher=${mysearchfct}
  ._parent=${viewer}
  reduceable="false"
  reduced="false"
  size="xxl" @result=${e => console.log(e.detail)}
>
  <!-- Optional icon for display on left-side of search bar -->
</pnx-search-bar>

searchBar.properties : Object

Component properties.

Kind: instance property of SearchBar
Properties

Name Type Default Description
[id] string The ID attribute set on component and prefix for input as well
[placeholder] string Default text to display on empty field
[reduceable] boolean false Can the search bar be collapsed (for mobile view)
[reduced] boolean false Is the search bar currently collapsed ?
[value] string The default input value
[size] string "md" The component sizing (md, xxl)
[searcher] function Search callback, function that takes as parameter the input text value, and resolves on list of results ({title, subtitle} and any other data you'd like to get on validation)
[no-menu-closure] boolean false Set to true to ignore menu closure events

"result"

Event for search result clicked

Kind: event emitted by SearchBar
Properties

Name Type Description
detail object | null The data associated to clicked item (format based on searcher function results), or null on reset