ion-searchbar
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.
Usage
<!-- Default Searchbar -->
<ion-searchbar></ion-searchbar>
<!-- Searchbar with danger color -->
<ion-searchbar color="danger"></ion-searchbar>
<!-- Searchbar with value -->
<ion-searchbar value="Ionic"></ion-searchbar>
<!-- Searchbar with telephone type -->
<ion-searchbar type="tel"></ion-searchbar>
<!-- Searchbar with a cancel button and custom cancel button text -->
<ion-searchbar showCancelButton cancelButtonText="Custom Cancel"></ion-searchbar>
<!-- Searchbar with a custom debounce -->
<ion-searchbar debounce="500"></ion-searchbar>
<!-- Animated Searchbar -->
<ion-searchbar animated></ion-searchbar>
<!-- Searchbar with a placeholder -->
<ion-searchbar placeholder="Filter Schedules"></ion-searchbar>
<!-- Searchbar in a Toolbar -->
<ion-toolbar>
<ion-searchbar></ion-searchbar>
</ion-toolbar>
<!-- Default Searchbar -->
<ion-searchbar></ion-searchbar>
<!-- Searchbar with danger color -->
<ion-searchbar color="danger"></ion-searchbar>
<!-- Searchbar with value -->
<ion-searchbar value="Ionic"></ion-searchbar>
<!-- Searchbar with telephone type -->
<ion-searchbar type="tel"></ion-searchbar>
<!-- Searchbar with a cancel button and custom cancel button text -->
<ion-searchbar show-cancel-button cancel-button-text="Custom Cancel"></ion-searchbar>
<!-- Searchbar with a custom debounce -->
<ion-searchbar debounce="500"></ion-searchbar>
<!-- Animated Searchbar -->
<ion-searchbar animated></ion-searchbar>
<!-- Searchbar with a placeholder -->
<ion-searchbar placeholder="Filter Schedules"></ion-searchbar>
<!-- Searchbar in a Toolbar -->
<ion-toolbar>
<ion-searchbar></ion-searchbar>
</ion-toolbar>
Properties
animated | |
---|---|
Description | If |
Attribute | animated |
Type | boolean |
autocomplete | |
Description | Set the input's autocomplete property. |
Attribute | autocomplete |
Type | "off" | "on" |
autocorrect | |
Description | Set the input's autocorrect property. |
Attribute | autocorrect |
Type | "off" | "on" |
cancelButtonIcon | |
Description | Set the cancel button icon. Only applies to |
Attribute | cancel-button-icon |
Type | string |
cancelButtonText | |
Description | Set the the cancel button text. Only applies to |
Attribute | cancel-button-text |
Type | string |
clearIcon | |
Description | Set the clear icon. Defaults to |
Attribute | clear-icon |
Type | string | undefined |
color | |
Description | The color to use from your application's color palette.
Default options are: |
Attribute | color |
Type | string | undefined |
debounce | |
Description | Set the amount of time, in milliseconds, to wait to trigger the |
Attribute | debounce |
Type | number |
mode | |
Description | The mode determines which platform styles to use. |
Attribute | mode |
Type | "ios" | "md" |
placeholder | |
Description | Set the input's placeholder. |
Attribute | placeholder |
Type | string |
searchIcon | |
Description | The icon to use as the search icon. |
Attribute | search-icon |
Type | string |
showCancelButton | |
Description | If |
Attribute | show-cancel-button |
Type | boolean |
spellcheck | |
Description | If |
Attribute | spellcheck |
Type | boolean |
type | |
Description | Set the type of the input. |
Attribute | type |
Type | "email" | "number" | "password" | "search" | "tel" | "text" | "url" |
value | |
Description | the value of the searchbar. |
Attribute | value |
Type | null | string | undefined |
Events
Name | Description |
---|---|
ionBlur | Emitted when the input loses focus. |
ionCancel | Emitted when the cancel button is clicked. |
ionChange | Emitted when the value has changed. |
ionClear | Emitted when the clear input button is clicked. |
ionFocus | Emitted when the input has focus. |
ionInput | Emitted when a keyboard input ocurred. |
Methods
getInputElement | |
---|---|
Description | Returns the native |
Signature | getInputElement() => Promise<HTMLInputElement> |
setFocus | |
Description | Sets focus on the specified |
Signature | setFocus() => 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 |