Version: v8

ion-searchbar

検索バーは、コレクションを検索するために使用できるテキストフィールドを表します。ツールバーやメインコンテンツの中に表示することができます。検索バーは、検索リストへの入力の代わりに使用する必要があります。

基本的な使い方

検索アイコン

検索バーのInputフィールドの左に表示される検索アイコンです。任意の Ionicon にカスタマイズすることが可能です。

クリアボタン

検索バーに値があるとき、または検索バーのテキストフィールドに入力があったときに、クリアボタンが表示されます。クリアボタンをクリックすると、テキストフィールドは消去され、入力はフォーカスされたままになります。デフォルトでは、クリアボタンは検索バーをフォーカスしたときに表示されるように設定されていますが、常に表示する、または全く表示しないように設定することができます。また、クリアボタン内のアイコンは、任意のIoniconにカスタマイズすることができます。

キャンセルボタン

キャンセルボタンを有効にすると、クリックすると入力がクリアされ、フォーカスが失われます。デフォルトでは、キャンセルボタンは表示されないように設定されていますが、常に表示するように設定したり、検索バーにフォーカスが当たったときのみ表示するように設定したりすることができます。キャンセルボタンは ios モードではテキストとして、md モードではアイコンとして表示されます。テキストとアイコンはそれぞれ別のプロパティでカスタマイズでき、アイコンは任意のIoniconを使用することができます。

ツールバーの中に配置した検索バー

検索バーは、ツールバーの中に配置されたときにネイティブに見えるようにスタイルされています。iOSでは、検索バーは、ページタイトルを含むツールバーの下にある、独自のツールバーに配置されるべきです。Material Designでは、検索バーは、独自のツールバーに永続的に表示されるか、ページタイトルを含むツールバーの上に展開されるかのいずれかです。

Debounce

検索バーにDebounceを設定して、ionInputイベントのトリガーを遅延させることができます。これは、入力に文字が入力されるたびにデータを要求するのではなく、要求を出すのを待つために使うことができるので、データを問い合わせるときに便利です。

テーマ

Colors

CSSカスタムプロパティ

検索バーは、スコープをつけてカプセル化されています。これは、実行時に各スタイルに追加のクラスを付加することで、CSSを自動的にスコープ化することを意味します。CSSでscopedセレクタを上書きするには、higher specificity セレクタが必要です。そのため、クラスを追加してカスタマイズすることをお勧めします。

キーボード表示

Android

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

iOS

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

Interfaces

SearchbarChangeEventDetail

interface SearchbarChangeEventDetail {
  value?: string;
}

SearchbarCustomEvent

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

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

プロパティ

animated

Description	`true`の場合、検索バーのアニメーションを有効にします。
Attribute	`animated`
Type	`boolean`
Default	`false`

autocapitalize

Description	テキスト値がユーザーによって入力／編集される際に、自動的に大文字にするかどうか、またどのようにするかについて示します。利用可能なオプションoff"`,` "none"`,` "on"`,` "sentences"`,` "words"`,` "characters"`.
Attribute	`autocapitalize`
Type	`string`
Default	`'off'`

autocomplete

Description	Inputのオートコンプリートプロパティを設定します。
Attribute	`autocomplete`
Type	"name" ｜ "email" ｜ "tel" ｜ "url" ｜ "on" ｜ "off" ｜ "honorific-prefix" ｜ "given-name" ｜ "additional-name" ｜ "family-name" ｜ "honorific-suffix" ｜ "nickname" ｜ "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-country-code" ｜ "tel-national" ｜ "tel-area-code" ｜ "tel-local" ｜ "tel-extension" ｜ "impp" ｜ "photo"
Default	`'off'`

autocorrect

Description	Inputのオートコレクトプロパティを設定します。
Attribute	`autocorrect`
Type	`"off" ｜ "on"`
Default	`'off'`

cancelButtonIcon

Description	キャンセルボタンのアイコンを設定します。 `md` modeのみに適用されます。デフォルトは `arrow-back-sharp` です。
Attribute	`cancel-button-icon`
Type	`string`
Default	`config.get('backButtonIcon', arrowBackSharp) as string`

cancelButtonText

Description	キャンセルボタンのテキストを設定します。 `ios` modeのみ適用されます。
Attribute	`cancel-button-text`
Type	`string`
Default	`'Cancel'`

clearIcon

Description	クリアアイコンを設定します。デフォルトは `ios` の場合は `close-circle` 、`md` の場合は `close-sharp` です。
Attribute	`clear-icon`
Type	`string ｜ undefined`
Default	`undefined`

color

Description	アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, と `"dark"` です．色に関する詳しい情報は theming を参照してください。
Attribute	`color`
Type	`"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string ｜ undefined`
Default	`undefined`

debounce

Description	キーを押すたびに `ionInput` イベントが発生するまでの待ち時間をミリ秒単位で設定します。
Attribute	`debounce`
Type	`number ｜ undefined`
Default	`undefined`

disabled

Description	`true`の場合、ユーザはInputと対話することができません。
Attribute	`disabled`
Type	`boolean`
Default	`false`

enterkeyhint

Description	どのエンターキーを表示するかのブラウザへのヒント。指定可能な値。enter"`,` "done"`,` "go"`,` "next"`,` "previous"`,` "search"`, and` "send"`.
Attribute	`enterkeyhint`
Type	`"done" ｜ "enter" ｜ "go" ｜ "next" ｜ "previous" ｜ "search" ｜ "send" ｜ undefined`
Default	`undefined`

inputmode

Description	どのキーボードを表示するかのブラウザへのヒント。指定可能な値。none"`,` "text"`,` "tel"`,` "url"`,` "email"`,` "numeric"`,` "decimal"`, and` "search"`.
Attribute	`inputmode`
Type	`"decimal" ｜ "email" ｜ "none" ｜ "numeric" ｜ "search" ｜ "tel" ｜ "text" ｜ "url" ｜ undefined`
Default	`undefined`

maxlength

Description	この属性は、ユーザが入力できる最大文字数を指定します。
Attribute	`maxlength`
Type	`number ｜ undefined`
Default	`undefined`

minlength

Description	この属性は、ユーザーが入力できる最小の文字数を指定します。
Attribute	`minlength`
Type	`number ｜ undefined`
Default	`undefined`

mode

Description	modeは、どのプラットフォームのスタイルを使用するかを決定します。
Attribute	`mode`
Type	`"ios" ｜ "md"`
Default	`undefined`

name

Description	フォームで使用する場合は、フォーム・データと一緒に送信されるコントロールの名前を設定します。
Attribute	`name`
Type	`string`
Default	`this.inputId`

placeholder

Description	Inputのplaceholderを設定します。 `placeholder` には、文字列としてプレーンテキストまたはHTMLのいずれかを指定することができます。通常HTML用に予約されている文字を表示するには、エスケープする必要があります。例えば `<Ionic>` は `<Ionic>` になります。詳細はセキュリティ・ドキュメンテーションをご覧ください。
Attribute	`placeholder`
Type	`string`
Default	`'Search'`

searchIcon

Description	検索アイコンとして使用するアイコンです。デフォルトは `ios` modeでは `search-outline` 、`md` modeでは `search-sharp` です。
Attribute	`search-icon`
Type	`string ｜ undefined`
Default	`undefined`

showCancelButton

Description	キャンセルボタンに関する動作を設定します。デフォルトは `"never"` です。focus" `に設定すると、フォーカスが当たったときにキャンセルボタンを表示します。never"`に設定すると、キャンセルボタンを非表示にします。always"` に設定すると、フォーカスの状態に関係なくキャンセルボタンを表示します。
Attribute	`show-cancel-button`
Type	`"always" ｜ "focus" ｜ "never"`
Default	`'never'`

showClearButton

Description	クリアボタンに関する動作を設定します。デフォルトは `"focus"` です。`"focus"`に設定すると、Inputが空でない場合、フォーカス時にクリアボタンを表示します。`"never"`に設定すると、クリアボタンを非表示にします。`"always"`に設定すると、フォーカスの状態に関係なくクリアボタンを表示するが、Inputが空でない場合にのみクリアボタンを表示します。
Attribute	`show-clear-button`
Type	`"always" ｜ "focus" ｜ "never"`
Default	`'always'`

spellcheck

Description	`true`の場合、入力値のスペルチェックを有効にします。
Attribute	`spellcheck`
Type	`boolean`
Default	`false`

type

Description	Inputの種類を設定します。
Attribute	`type`
Type	`"email" ｜ "number" ｜ "password" ｜ "search" ｜ "tel" ｜ "text" ｜ "url"`
Default	`'search'`

value

Description	検索バーの値。
Attribute	`value`
Type	`null ｜ string ｜ undefined`
Default	`''`

イベント

Name	Description	Bubbles
`ionBlur`	Inputのフォーカスが外れたときに発行されます。	`true`
`ionCancel`	キャンセルボタンがクリックされたときに発行されます。	`true`
`ionChange`	The `ionChange` event is fired for `<ion-searchbar>` elements when the user modifies the element's value. Unlike the `ionInput` event, the `ionChange` event is not necessarily fired for each alteration to an element's value. The `ionChange` event is fired when the value has been committed by the user. This can happen when the element loses focus or when the "Enter" key is pressed. `ionChange` can also fire when clicking the clear or cancel buttons. This event will not emit when programmatically setting the `value` property.	`true`
`ionClear`	Clear Inputボタンがクリックされたときに発行されます。	`true`
`ionFocus`	Inputにフォーカスが当たったときに発行されます。	`true`
`ionInput`	ion-searchbar`要素の` value` が変更されたときに発行されます。	`true`

メソッド

getInputElement

Description	要素の内部で使用されているネイティブの `<input>` 要素を返します。
Signature	`getInputElement() => Promise<HTMLInputElement>`

setFocus

Description ion-searchbarのネイティブinputにフォーカスを設定する。グローバルなinput.focus()の代わりにこのメソッドを使用する。ページ入力時に入力にフォーカスを当てたい開発者は、ionViewDidEnter()ライフサイクルメソッド内でsetFocus()を呼び出す必要がある。オーバーレイが表示されたときに入力にフォーカスを当てたい開発者は、didPresentが解決した後にsetFocus` を呼び出してください。詳細については、managing focusを参照してください。

Signature setFocus() => Promise<void>

CSS Shadow Parts

No CSS shadow parts available for this component.

CSSカスタムプロパティ

Name	Description
`--background`	検索バーのInputの背景
`--border-radius`	検索バーのInputのボーダー半径
`--box-shadow`	検索バーのInputのボックスシャドウ
`--cancel-button-color`	検索バーのキャンセルボタンの色
`--clear-button-color`	検索バーのクリアボタンの色
`--color`	検索バーのテキストの色
`--icon-color`	検索バーのアイコンの色
`--placeholder-color`	検索バーのPlaceholderの色
`--placeholder-font-style`	検索バーのPlaceholderのFont Style
`--placeholder-font-weight`	検索バーのPlaceholderのFont Weight
`--placeholder-opacity`	検索バーのPlaceholderの不透明度

Name	Description
`--background`	検索バーのInputの背景
`--border-radius`	検索バーのInputのボーダー半径
`--box-shadow`	検索バーのInputのボックスシャドウ
`--cancel-button-color`	検索バーのキャンセルボタンの色
`--clear-button-color`	検索バーのクリアボタンの色
`--color`	検索バーのテキストの色
`--icon-color`	検索バーのアイコンの色
`--placeholder-color`	検索バーのPlaceholderの色
`--placeholder-font-style`	検索バーのPlaceholderのFont Style
`--placeholder-font-weight`	検索バーのPlaceholderのFont Weight
`--placeholder-opacity`	検索バーのPlaceholderの不透明度

Slots

No slots available for this component.

基本的な使い方​

検索アイコン​

クリアボタン​

キャンセルボタン​

ツールバーの中に配置した検索バー​

Debounce​

テーマ​

Colors​

CSSカスタムプロパティ​

キーボード表示​

Android​

iOS​

Interfaces​

SearchbarChangeEventDetail​

SearchbarCustomEvent​

プロパティ​

animated​

autocapitalize​

autocomplete​

autocorrect​

cancelButtonIcon​

cancelButtonText​

clearIcon​

color​

debounce​

disabled​

enterkeyhint​

inputmode​

maxlength​

minlength​

mode​

name​

placeholder​

searchIcon​

showCancelButton​

showClearButton​

spellcheck​

type​

value​

イベント​

メソッド​

getInputElement​

setFocus​

CSS Shadow Parts​

CSSカスタムプロパティ​

Slots​

Contents

基本的な使い方

検索アイコン

クリアボタン

キャンセルボタン

ツールバーの中に配置した検索バー

Debounce

テーマ

Colors

CSSカスタムプロパティ

キーボード表示

Android

iOS

Interfaces

SearchbarChangeEventDetail

SearchbarCustomEvent

プロパティ

animated

autocapitalize

autocomplete

autocorrect

cancelButtonIcon

cancelButtonText

clearIcon

color

debounce

disabled

enterkeyhint

inputmode

maxlength

minlength

mode

name

placeholder

searchIcon

showCancelButton

showClearButton

spellcheck

type

value

イベント

メソッド

getInputElement

setFocus

CSS Shadow Parts

CSSカスタムプロパティ

Slots