メインコンテンツまでスキップ
Version: v6

ion-searchbar

scoped

コンテンツ

Searchbarは、collection内の検索に使用できるテキストフィールドを表します。これらは、toolbarまたはメインコンテンツの内部に表示できます。

Listを検索するInputの代わりに、Searchbarを使用する必要があります。Searchbarのテキストフィールドに入力すると、クリアボタンが表示されます。クリアボタンをクリックすると、テキストフィールドが消去され、入力はフォーカスされたままになります。キャンセルボタンを有効にすると、入力がクリアされ、クリック時にフォーカスが失われます。

キーボード表示

Android

デフォルトでは、入力をタップするとキーボードが表示され、サブミットボタンに虫眼鏡のアイコンが表示されます。オプションで inputmode プロパティを "search" に設定すると、アイコンが虫眼鏡からarriage returnに変更されます。

iOS

デフォルトでは、入力をタップするとキーボードが表示され、グレーのSubmitボタンに「return」のテキストが表示されます。オプションで inputmode プロパティを "search" に設定すると、テキストが "return" から "go" に変わり、ボタンの色もグレーから青に変わります。また、ion-searchbarform 要素でラップして、 action プロパティを設定することもできます。これにより、キーボードが表示され、"search "という青いSubmitボタンが表示されるようになります。

Interfaces

SearchbarChangeEventDetail

interface SearchbarChangeEventDetail {
value?: string;
}

SearchbarCustomEvent

必須ではありませんが、このコンポーネントから発行される Ionic イベントでより強く型付けを行うために、CustomEvent インターフェースの代わりにこのインターフェースを使用することが可能です。

interface SearchbarCustomEvent extends CustomEvent {
detail: SearchbarChangeEventDetail;
target: HTMLIonSearchbarElement;
}

使い方

<!-- Default Searchbar -->
<ion-searchbar></ion-searchbar>

<!-- Searchbar with cancel button always shown -->
<ion-searchbar showCancelButton="always"></ion-searchbar>

<!-- Searchbar with cancel button never shown -->
<ion-searchbar showCancelButton="never"></ion-searchbar>

<!-- Searchbar with cancel button shown on focus -->
<ion-searchbar showCancelButton="focus"></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 numeric inputmode -->
<ion-searchbar inputmode="numeric"></ion-searchbar>

<!-- Searchbar disabled -->
<ion-searchbar disabled="true"></ion-searchbar>

<!-- Searchbar with a cancel button and custom cancel button text -->
<ion-searchbar showCancelButton="focus" 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>

プロパティ

animated

DescriptionIf true, enable searchbar animation.
Attributeanimated
Typeboolean
Defaultfalse

autocomplete

DescriptionSet the input's autocomplete property.
Attributeautocomplete
Type"off" | "on" | "name" | "honorific-prefix" | "given-name" | "additional-name" | "family-name" | "honorific-suffix" | "nickname" | "email" | "username" | "new-password" | "current-password" | "one-time-code" | "organization-title" | "organization" | "street-address" | "address-line1" | "address-line2" | "address-line3" | "address-level4" | "address-level3" | "address-level2" | "address-level1" | "country" | "country-name" | "postal-code" | "cc-name" | "cc-given-name" | "cc-additional-name" | "cc-family-name" | "cc-number" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-csc" | "cc-type" | "transaction-currency" | "transaction-amount" | "language" | "bday" | "bday-day" | "bday-month" | "bday-year" | "sex" | "tel" | "tel-country-code" | "tel-national" | "tel-area-code" | "tel-local" | "tel-extension" | "impp" | "url" | "photo"
Default'off'

autocorrect

DescriptionSet the input's autocorrect property.
Attributeautocorrect
Type"off" | "on"
Default'off'

cancelButtonIcon

DescriptionSet the cancel button icon. Only applies to md mode. Defaults to arrow-back-sharp.
Attributecancel-button-icon
Typestring
Defaultconfig.get('backButtonIcon', arrowBackSharp) as string

cancelButtonText

DescriptionSet the the cancel button text. Only applies to ios mode.
Attributecancel-button-text
Typestring
Default'Cancel'

clearIcon

DescriptionSet the clear icon. Defaults to close-circle for ios and close-sharp for md.
Attributeclear-icon
Typestring | undefined
Defaultundefined

color

DescriptionThe 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.
Attributecolor
Type"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined
Defaultundefined

debounce

DescriptionSet the amount of time, in milliseconds, to wait to trigger the ionChange event after each keystroke. This also impacts form bindings such as ngModel or v-model.
Attributedebounce
Typenumber
Default250

disabled

DescriptionIf true, the user cannot interact with the input.
Attributedisabled
Typeboolean
Defaultfalse

enterkeyhint

DescriptionA hint to the browser for which enter key to display. Possible values: "enter", "done", "go", "next", "previous", "search", and "send".
Attributeenterkeyhint
Type"done" | "enter" | "go" | "next" | "previous" | "search" | "send" | undefined
Defaultundefined

inputmode

DescriptionA hint to the browser for which keyboard to display. Possible values: "none", "text", "tel", "url", "email", "numeric", "decimal", and "search".
Attributeinputmode
Type"decimal" | "email" | "none" | "numeric" | "search" | "tel" | "text" | "url" | undefined
Defaultundefined

mode

DescriptionThe mode determines which platform styles to use.
Attributemode
Type"ios" | "md"
Defaultundefined

placeholder

DescriptionSet 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 &lt;Ionic&gt;

For more information: Security Documentation
Attributeplaceholder
Typestring
Default'Search'

searchIcon

DescriptionThe icon to use as the search icon. Defaults to search-outline in ios mode and search-sharp in md mode.
Attributesearch-icon
Typestring | undefined
Defaultundefined

showCancelButton

DescriptionSets the behavior for the cancel button. Defaults to "never". Setting to "focus" shows the cancel button on focus. Setting to "never" hides the cancel button. Setting to "always" shows the cancel button regardless of focus state.
Attributeshow-cancel-button
Type"always" | "focus" | "never"
Default'never'

showClearButton

DescriptionSets the behavior for the clear button. Defaults to "focus". Setting to "focus" shows the clear button on focus if the input is not empty. Setting to "never" hides the clear button. Setting to "always" shows the clear button regardless of focus state, but only if the input is not empty.
Attributeshow-clear-button
Type"always" | "focus" | "never"
Default'always'

spellcheck

DescriptionIf true, enable spellcheck on the input.
Attributespellcheck
Typeboolean
Defaultfalse

type

DescriptionSet the type of the input.
Attributetype
Type"email" | "number" | "password" | "search" | "tel" | "text" | "url"
Default'search'

value

Descriptionthe value of the searchbar.
Attributevalue
Typenull | string | undefined
Default''

イベント

NameDescription
ionBlurEmitted when the input loses focus.
ionCancelEmitted when the cancel button is clicked.
ionChangeEmitted when the value has changed.
ionClearEmitted when the clear input button is clicked.
ionFocusEmitted when the input has focus.
ionInputEmitted when a keyboard input occurred.

メソッド

getInputElement

DescriptionReturns the native <input> element used under the hood.
SignaturegetInputElement() => Promise<HTMLInputElement>

setFocus

DescriptionSets focus on the specified ion-searchbar. Use this method instead of the global input.focus().
SignaturesetFocus() => Promise<void>

CSS Shadow Parts

No CSS shadow parts available for this component.

CSSカスタムプロパティ

NameDescription
--backgroundBackground of the searchbar input
--border-radiusBorder radius of the searchbar input
--box-shadowBox shadow of the searchbar input
--cancel-button-colorColor of the searchbar cancel button
--clear-button-colorColor of the searchbar clear button
--colorColor of the searchbar text
--icon-colorColor of the searchbar icon
--placeholder-colorColor of the searchbar placeholder
--placeholder-font-styleFont style of the searchbar placeholder
--placeholder-font-weightFont weight of the searchbar placeholder
--placeholder-opacityOpacity of the searchbar placeholder

Slots

No slots available for this component.

View Source