Question

Ionic4项目中我们可以使用Ionic4搜索框组件ion-searchbar对项目进行布局。

ion-searchbar官方文档地址:https://ionicframework.com/docs/api/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.

ion-searchbar　用法(Usage)

angularjavascriptreactvue

  
</ion-toolbar>

  
</ion-toolbar>

import React from 'react';

import { IonSearchbar, IonToolbar } from '@ionic/react';

const Example: React.SFC = () => (
  
    {/*-- Default Searchbar --*/}
    

    {/*-- Searchbar with danger color --*/}
    

    {/*-- Searchbar with value --*/}
    

    {/*-- Searchbar with telephone type --*/}
    

    {/*-- Searchbar disabled  --*/}
    

    {/*-- Searchbar with a cancel button and custom cancel button text --*/}
    

    {/*-- Searchbar with a custom debounce --*/}
    

    {/*-- Animated Searchbar --*/}
    

    {/*-- Searchbar with a placeholder --*/}
    

    {/*-- Searchbar in a Toolbar --*/}
    
      
    
  
);

export default Example;

  
  

  
  

  
  

  
  

  
  

  
  

  
  

  
  

  
  

  
  
    
  
</template>

ion-searchbar　属性(Properties)

animated
Description	If true, enable searchbar animation.
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 md mode.
Attribute	cancel-button-icon
Type	string
Default	'md-arrow-back'
cancelButtonText
Description	Set the the cancel button text. Only applies to ios mode.
Attribute	cancel-button-text
Type	string
Default	'Cancel'
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
Default	250
disabled
Description	If true, the user cannot interact with the input.
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. placeholder can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example <Ionic> would become <Ionic> 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 true, show the cancel button.
Attribute	show-cancel-button
Type	boolean
Default	false
spellcheck
Description	If true, enable spellcheck on the input.
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 <input> element used under the hood.
Signature	getInputElement() => Promise<HTMLInputElement>
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