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'
component	string	'div'	Component's HTML Element
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

Searchbar Events

Name	Type	Description
blur	function(e)	blur event handler
change	function(e)	change event handler
clear	function(e)	Fired on clear button click
disable	function(e)	Fired on searchbar disable
focus	function(e)	focus event handler
input	function(e)	input event handler

Examples

Vue

<template>
  <i-page>
    <i-navbar title="Searchbar">
      
      <template #subnavbar>
        <i-searchbar
          :value="searchQuery"
          disable-button
          disable-button-text="Cancel"
          @clear="handleClear"
          @disable="handleDisable"
          @input="handleSearch"
        >
        </i-searchbar>
      </template>
    </i-navbar>
    <i-list strong inset-material outline-ios>
      <i-list-item v-if="filteredItems.length === 0" title="Nothing found" />
      <i-list-item
        v-for="item in filteredItems"
        :key="item.title"
        :title="item.title"
      />
    </i-list>
  </i-page>
</template>
<script>
  import { ref, watch } from 'vue';
  import {
    iPage,
    iNavbar,
    iNavbarBackLink,
    iSearchbar,
    iList,
    iListItem,
  } from 'ina-ui/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: {
      iPage,
      iNavbar,
      iNavbarBackLink,
      iSearchbar,
      iList,
      iListItem,
    },
    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>

React

import React, { useState } from 'react';
import {
  Page,
  Navbar,
  NavbarBackLink,
  Searchbar,
  List,
  ListItem,
} from 'ina-ui/react';

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 function SearchbarPage() {
  const [searchQuery, setSearchQuery] = useState('');

  const handleSearch = (e) => {
    setSearchQuery(e.target.value);
  };
  const handleClear = () => {
    setSearchQuery('');
  };
  const handleDisable = () => {
    console.log('Disable');
  };
  const filteredItems = searchQuery
    ? items.filter((item) =>
        item.title.toLowerCase().includes(searchQuery.toLowerCase())
      )
    : items;

  return (
    <Page>
      <Navbar
        title="Searchbar"
        subnavbar={
          <Searchbar
            onInput={handleSearch}
            value={searchQuery}
            onClear={handleClear}
            disableButton
            disableButtonText="Cancel"
            onDisable={handleDisable}
          />
        }
      />
      <List strong insetMaterial outlineIos>
        {filteredItems.length === 0 ? (
          <ListItem title="Nothing found" className="text-center" />
        ) : (
          filteredItems.map((item) => (
            <ListItem key={item.title} title={item.title} />
          ))
        )}
      </List>
    </Page>
  );
}