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

Searchbar Vue 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'
componentstring'div'

Component's HTML Element

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

Searchbar Events

NameTypeDescription
blurfunction(e)

blur event handler

changefunction(e)

change event handler

clearfunction(e)

Fired on clear button click

disablefunction(e)

Fired on searchbar disable

focusfunction(e)

focus event handler

inputfunction(e)

input event handler

Examples

Searchbar.vue
<template>
<k-page>
<k-navbar title="Searchbar">
<template #subnavbar>
<k-searchbar
:value="searchQuery"
disable-button
disable-button-text="Cancel"
@clear="handleClear"
@disable="handleDisable"
@input="handleSearch"
>
</k-searchbar>
</template>
</k-navbar>
<k-list strong inset-material outline-ios>
<k-list-item v-if="filteredItems.length === 0" title="Nothing found" />
<k-list-item
v-for="item in filteredItems"
:key="item.title"
:title="item.title"
/>
</k-list>
</k-page>
</template>
<script>
import { ref, watch } from 'vue';
import {
kPage,
kNavbar,
kNavbarBackLink,
kSearchbar,
kList,
kListItem,
} from 'konsta/vue';
const 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' },
];
export default {
components: {
kPage,
kNavbar,
kNavbarBackLink,
kSearchbar,
kList,
kListItem,
},
setup() {
const searchQuery = ref('');
const handleSearch = (e) => {
searchQuery.value = e.target.value;
};
const handleClear = () => {
searchQuery.value = '';
};
const handleDisable = () => {
console.log('Disable');
};
const filteredItems = ref(items);
watch(searchQuery, () => {
filteredItems.value = searchQuery.value
? items.filter((item) =>
item.title.toLowerCase().includes(searchQuery.value.toLowerCase())
)
: items;
});
return {
searchQuery,
filteredItems,
handleSearch,
handleClear,
handleDisable,
};
},
};
</script>
Code licensed under MIT.
2022 © Konsta UI by nolimits4web.