🔥 Meet Our New Project: t0ggles - Your Ultimate Project Management Tool! 🔥

Searchbar Svelte Component

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

NameTypeDefaultDescription
clearButtonbooleantrue

Adds input clear button

colorsobject

Object with Tailwind CSS colors classes

colors.inputBgIosstring''
colors.inputBgMaterialstring'bg-md-light-secondary-container dark:bg-md-dark-secondary-container'
colors.placeholderIosstring''
colors.placeholderMaterialstring'placeholder-md-light-on-surface-variant dark:placeholder-md-dark-on-surface-variant'
disableButtonbooleanfalse

Adds button for cancel search and set its initial state

disableButtonTextstring'Cancel'

Disable button text

inputIdstring

Input id attribute

inputStyleCSSProperties

Additional input classes

placeholderstring | number'Search'

Searchbar placeholder

valueany

Searchbar value

onBlurfunction(e)

blur event handler

onChangefunction(e)

change event handler

onClearfunction(e)

Fired on clear button click

onDisablefunction(e)

Fired on searchbar disable

onFocusfunction(e)

focus event handler

onInputfunction(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>
Code licensed under MIT.
2022 © Konsta UI by nolimits4web.