ion-searchbar

概要(CONTENTS)

Ionic4项目中我们可以使用Ionic4搜索框组件ion-searchbar对项目进行布局。ion-searchbar中有ionic ion-searchbar 用法(Usage) ,ionic ion-searchbar 属性(Properties) ,ionic ion-searchbar 事件(Events) ,ionic ion-searchbar 内置方法(Methods) ,ionic ion-searchbar 中的CSS 自定义属性等

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.

ion-searchbar 用法(Usage)

angular javascript

<ion-searchbar>ion-searchbar>


<ion-searchbar color="danger">ion-searchbar>


<ion-searchbar value="Ionic">ion-searchbar>


<ion-searchbar type="tel">ion-searchbar>


<ion-searchbar showCancelButton cancelButtonText="Custom Cancel">ion-searchbar>


<ion-searchbar debounce="500">ion-searchbar>


<ion-searchbar animated>ion-searchbar>


<ion-searchbar placeholder="Filter Schedules">ion-searchbar>


<ion-toolbar>
  <ion-searchbar>ion-searchbar>
ion-toolbar>

<ion-searchbar>ion-searchbar>


<ion-searchbar color="danger">ion-searchbar>


<ion-searchbar value="Ionic">ion-searchbar>


<ion-searchbar type="tel">ion-searchbar>


<ion-searchbar show-cancel-button cancel-button-text="Custom Cancel">ion-searchbar>


<ion-searchbar debounce="500">ion-searchbar>


<ion-searchbar animated>ion-searchbar>


<ion-searchbar placeholder="Filter Schedules">ion-searchbar>


<ion-toolbar>
  <ion-searchbar>ion-searchbar>
ion-toolbar>

ion-searchbar 属性(Properties)

animated

Description

If true, enable searchbar animation.

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 md mode.

Attribute cancel-button-icon
Type string

cancelButtonText

Description

Set the the cancel button text. Only applies to ios mode.

Attribute cancel-button-text
Type string

clearIcon

Description

Set the clear icon. Defaults to "close-circle" for ios and "close" for md.

Attribute clear-icon
Type string | undefined

color

Description

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.

Attribute color
Type string | undefined

debounce

Description

Set the amount of time, in milliseconds, to wait to trigger the ionChange event after each keystroke.

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 true, show the cancel button.

Attribute show-cancel-button
Type boolean

spellcheck

Description

If true, enable spellcheck on the input.

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

ion-searchbar 事件(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.

ion-searchbar 内置方法(Methods)

getInputElement

Description

Returns the native element used under the hood.

Signature getInputElement() => Promise

setFocus

Description

Sets focus on the specified ion-searchbar. Use this method instead of the global input.focus().

Signature setFocus() => void

ion-searchbar中的CSS 自定义属性

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