ion-searchbar
Ionic4项目中我们可以使用Ionic4搜索框组件ion-searchbar对项目进行布局。 ion-searchbar官方文档地址:https://ionicframework.com/docs/api/searchbarSearchbars 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)
<ion-searchbar>ion-searchbar>
<ion-searchbar color="danger">ion-searchbar>
<ion-searchbar value="Ionic">ion-searchbar>
<ion-searchbar type="tel">ion-searchbar>
<ion-searchbar disabled="true">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 disabled="true">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>
import React from 'react';
import { IonSearchbar, IonToolbar } from '@ionic/react';
const Example: React.SFC<{}> = () => (
<>
{/*-- Default Searchbar --*/}
<IonSearchbar>IonSearchbar>
{/*-- Searchbar with danger color --*/}
<IonSearchbar color="danger">IonSearchbar>
{/*-- Searchbar with value --*/}
<IonSearchbar value="Ionic">IonSearchbar>
{/*-- Searchbar with telephone type --*/}
<IonSearchbar type="tel">IonSearchbar>
{/*-- Searchbar disabled --*/}
<IonSearchbar disabled="true">IonSearchbar>
{/*-- Searchbar with a cancel button and custom cancel button text --*/}
<IonSearchbar showCancelButton cancelButtonText="Custom Cancel">IonSearchbar>
{/*-- Searchbar with a custom debounce --*/}
<IonSearchbar debounce={500}>IonSearchbar>
{/*-- Animated Searchbar --*/}
<IonSearchbar animated>IonSearchbar>
{/*-- Searchbar with a placeholder --*/}
<IonSearchbar placeholder="Filter Schedules">IonSearchbar>
{/*-- Searchbar in a Toolbar --*/}
<IonToolbar>
<IonSearchbar>IonSearchbar>
IonToolbar>
>
);
export default Example;
<template>
<ion-searchbar>ion-searchbar>
<ion-searchbar color="danger">ion-searchbar>
<ion-searchbar value="Ionic">ion-searchbar>
<ion-searchbar type="tel">ion-searchbar>
<ion-searchbar disabled="true">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>
template>
ion-searchbar 属性(Properties)
animated | |
---|---|
Description | If |
Attribute | animated |
Type | boolean |
Default | false |
autocomplete | |
Description | Set the input's autocomplete property. |
Attribute | autocomplete |
Type | "off" | "on" |
Default | 'off' |
autocorrect | |
Description | Set the input's autocorrect property. |
Attribute | autocorrect |
Type | "off" | "on" |
Default | 'off' |
cancelButtonIcon | |
Description | Set the cancel button icon. Only applies to |
Attribute | cancel-button-icon |
Type | string |
Default | 'md-arrow-back' |
cancelButtonText | |
Description | Set the the cancel button text. Only applies to |
Attribute | cancel-button-text |
Type | string |
Default | 'Cancel' |
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 |
Default | 250 |
disabled | |
Description | If |
Attribute | disabled |
Type | boolean |
Default | false |
mode | |
Description | The mode determines which platform styles to use. |
Attribute | mode |
Type | "ios" | "md" |
placeholder | |
Description | Set the input's placeholder.
For more information: Security Documentation |
Attribute | placeholder |
Type | string |
Default | 'Search' |
searchIcon | |
Description | The icon to use as the search icon. |
Attribute | search-icon |
Type | string |
Default | 'search' |
showCancelButton | |
Description | If |
Attribute | show-cancel-button |
Type | boolean |
Default | false |
spellcheck | |
Description | If |
Attribute | spellcheck |
Type | boolean |
Default | false |
type | |
Description | Set the type of the input. |
Attribute | type |
Type | "email" | "number" | "password" | "search" | "tel" | "text" | "url" |
Default | 'search' |
value | |
Description | the value of the searchbar. |
Attribute | value |
Type | null | string | undefined |
Default | '' |
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 |
Signature | getInputElement() => Promise |
setFocus | |
Description | Sets focus on the specified |
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 |