Searchbar Svelte Component

Searchbar Components
Searchbar Props
Examples

Searchbar allows user to search through List View elements. Or it can be used as a visual UI component for your custom search realization.

Searchbar Components

There are following components included:

Searchbar

Searchbar Props

Name	Type	Default	Description
clearButton	boolean	true	Adds input clear button
colors	object		Object with Tailwind CSS colors classes
colors.inputBgIos	string	''
colors.inputBgMaterial	string	'bg-md-light-secondary-container dark:bg-md-dark-secondary-container'
colors.placeholderIos	string	''
colors.placeholderMaterial	string	'placeholder-md-light-on-surface-variant dark:placeholder-md-dark-on-surface-variant'
disableButton	boolean	false	Adds button for cancel search and set its initial state
disableButtonText	string	'Cancel'	Disable button text
inputId	string		Input id attribute
inputStyle	CSSProperties		Additional input classes
placeholder	string \| number	'Search'	Searchbar placeholder
value	any		Searchbar value
onBlur	function(e)		`blur` event handler
onChange	function(e)		`change` event handler
onClear	function(e)		Fired on clear button click
onDisable	function(e)		Fired on searchbar disable
onFocus	function(e)		`focus` event handler
onInput	function(e)		`input` event handler

Examples

Searchbar.svelte

<script>
  import {
    Page,
    Navbar,
    NavbarBackLink,
    Searchbar,
    List,
    ListItem,
  } from 'konsta/svelte';

  let searchQuery = '';
  let items = [
    { title: 'FC Ajax' },
    { title: 'FC Arsenal' },
    { title: 'FC Athletic' },
    { title: 'FC Barcelona' },
    { title: 'FC Bayern München' },
    { title: 'FC Bordeaux' },
    { title: 'FC Borussia Dortmund' },
    { title: 'FC Chelsea' },
    { title: 'FC Galatasaray' },
    { title: 'FC Juventus' },
    { title: 'FC Liverpool' },
    { title: 'FC Manchester City' },
    { title: 'FC Manchester United' },
    { title: 'FC Paris Saint-Germain' },
    { title: 'FC Real Madrid' },
    { title: 'FC Tottenham Hotspur' },
    { title: 'FC Valencia' },
    { title: 'FC West Ham United' },
  ];

  function handleSearch(e) {
    searchQuery = e.target.value;
  }

  function handleClear() {
    searchQuery = '';
  }

  function handleDisable() {
    console.log('Disable');
  }

  let filteredItems = [];
  /* eslint-disable */
  $: {
    filteredItems = searchQuery
      ? items.filter((item) =>
          item.title.toLowerCase().includes(searchQuery.toLowerCase())
        )
      : items;
  }
  /* eslint-enable */
</script>

<Page>
  <Navbar title="Searchbar">    <Searchbar
      slot="subnavbar"
      onInput={handleSearch}
      value={searchQuery}
      onClear={handleClear}
      disableButton
      disableButtonText="Cancel"
      onDisable={handleDisable}
    />
  </Navbar>
  <List strong insetMaterial outlineIos>
    {#if filteredItems.length === 0}
      <ListItem title="Nothing found" />
    {/if}
    {#each filteredItems as item (item.title)}
      <ListItem key={item.title} title={item.title} />
    {/each}
  </List>
</Page>