ion-searchbar

概要(CONTENTS)

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)


<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 `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 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 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

ion-searchbar

ion-searchbar 用法(Usage)

ion-searchbar 属性(Properties)

animated

autocomplete

autocorrect

cancelButtonIcon

cancelButtonText

clearIcon

color

debounce

disabled

mode

placeholder

searchIcon

showCancelButton

spellcheck

type

value

ion-searchbar 事件(Events)

ion-searchbar 内置方法(Methods)

getInputElement

setFocus

ion-searchbar中的CSS 自定义属性

ion-searchbar　用法(Usage)

ion-searchbar　属性(Properties)

ion-searchbar　事件(Events)

ion-searchbar　内置方法(Methods)