custom-ionic-search-bar

Searchbars represent a text field that can be used to search through a collection. They can be displayed inside of a toolbar or the main content.

A Searchbar should be used instead of an input to search lists. A clear button is displayed upon entering input in the searchbar's text field. Clicking on the clear button will erase the text field and the input will remain focused. A cancel button can be enabled which will clear the input and lose the focus upon click.

Install

npm install ci-search-bar -SE

Usage

Angular

<!-- Default Searchbar -->
<ci-search-bar></ci-search-bar>

<!-- Searchbar with danger color -->
<ci-search-bar color="danger"></ci-search-bar>

<!-- Searchbar with value -->
<ci-search-bar value="Ionic"></ci-search-bar>

<!-- Searchbar with telephone type -->
<ci-search-bar type="tel"></ci-search-bar>

<!-- Searchbar with a custom debounce -->
<ci-search-bar debounce="500"></ci-search-bar>

<!-- Animated Searchbar -->
<ci-search-bar animated></ci-search-bar>

<!-- Searchbar with a placeholder -->
<ci-search-bar placeholder="Filter Schedules"></ci-search-bar>

<!-- Searchbar in a Toolbar -->
<ion-toolbar>
  <ci-search-bar></ci-search-bar>
</ion-toolbar>

Javascript

<!-- Default Searchbar -->
<ci-search-bar></ci-search-bar>

<!-- Searchbar with danger color -->
<ci-search-bar color="danger"></ci-search-bar>

<!-- Searchbar with value -->
<ci-search-bar value="Ionic"></ci-search-bar>

<!-- Searchbar with telephone type -->
<ci-search-bar type="tel"></ci-search-bar>

<!-- Searchbar with a custom debounce -->
<ci-search-bar debounce="500"></ci-search-bar>

<!-- Animated Searchbar -->
<ci-search-bar animated></ci-search-bar>

<!-- Searchbar with a placeholder -->
<ci-search-bar placeholder="Filter Schedules"></ci-search-bar>

<!-- Searchbar in a Toolbar -->
<ion-toolbar>
  <ci-search-bar></ci-search-bar>
</ion-toolbar>

Properties

| Property | Attribute | Description | Type | Default | | ------------------ | -------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------- | ----------------- | | animated | animated | If true, enable searchbar animation. | boolean | false | | autocomplete | autocomplete | Set the input's autocomplete property. | "off" \| "on" | 'off' | | autocorrect | autocorrect | Set the input's autocorrect property. | "off" \| "on" | 'off' | | cancelButtonIcon | cancel-button-icon | Set the cancel button icon. | string | 'md-arrow-back' | | clearIcon | clear-icon | Set the clear icon. Defaults to "close". | string \| undefined | undefined | | color | color | The color to use from your application's color palette. Default options are: "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", and "dark". For more information on colors, see theming. | string \| undefined | undefined | | debounce | debounce | Set the amount of time, in milliseconds, to wait to trigger the ionChange event after each keystroke. | number | 250 | | placeholder | placeholder | Set the input's placeholder. | string | 'Search' | | searchIcon | search-icon | The icon to use as the search icon. | string | 'search' | | showCancelButton | show-cancel-button | If true, show the cancel button. | boolean | false | | spellcheck | spellcheck | If true, enable spellcheck on the input. | boolean | false | | type | type | Set the type of the input. | "email" \| "number" \| "password" \| "search" \| "tel" \| "text" \| "url" | 'search' | | value | value | the value of the searchbar. | null \| string \| undefined | '' |

Events

| Event | Description | Detail | | ----------- | ----------------------------------------------- | -------------------- | | ionBlur | Emitted when the input loses focus. | void | | ionCancel | Emitted when the cancel button is clicked. | void | | ionChange | Emitted when the value has changed. | TextInputChangeEvent | | ionClear | Emitted when the clear input button is clicked. | void | | ionFocus | Emitted when the input has focus. | void | | ionInput | Emitted when a keyboard input ocurred. | KeyboardEvent |

Methods

setFocus() => void

Sets focus on the specified ci-search-bar. Use this method instead of the global input.focus().

Returns

Type: void

CSS Custom Properties

| Name | Description | | --------------------------- | ---------------------------------------- | | --background | Background of the searchbar | | --cancel-button-color | Color of the searchbar cancel button | | --clear-button-color | Color of the searchbar clear button | | --color | Color of the searchbar text | | --icon-color | Color of the searchbar icon | | --placeholder-color | Color of the searchbar placeholder | | --placeholder-font-style | Font style of the searchbar placeholder | | --placeholder-font-weight | Font weight of the searchbar placeholder | | --placeholder-opacity | Opacity of the searchbar placeholder |

Built with StencilJS