Skip to main content
Version: v7

ion-searchbar

scoped

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

基本的な使い方

検索アイコン

検索バーの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-searchbarform 要素でラップして、 action プロパティを設定することもできます。これにより、キーボードが表示され、"search "という青いSubmitボタンが表示されるようになります。

Interfaces

SearchbarChangeEventDetail

interface SearchbarChangeEventDetail {
value?: string;
}

SearchbarCustomEvent

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

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

プロパティ

animated

Descriptiontrueの場合、検索バーのアニメーションを有効にします。
Attributeanimated
Typeboolean
Defaultfalse

autocomplete

DescriptionInputのオートコンプリートプロパティを設定します。
Attributeautocomplete
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

DescriptionInputのオートコレクトプロパティを設定します。
Attributeautocorrect
Type"off" | "on"
Default'off'

cancelButtonIcon

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

cancelButtonText

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

clearIcon

Descriptionクリアアイコンを設定します。デフォルトは ios の場合は close-circlemd の場合は close-sharp です。
Attributeclear-icon
Typestring | undefined
Defaultundefined

color

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

debounce

Descriptionキーを押すたびに ionInput イベントが発生するまでの待ち時間をミリ秒単位で設定します。
Attributedebounce
Typenumber | undefined
Defaultundefined

disabled

Descriptiontrueの場合、ユーザはInputと対話することができません。
Attributedisabled
Typeboolean
Defaultfalse

enterkeyhint

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

inputmode

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

mode

Descriptionmodeは、どのプラットフォームのスタイルを使用するかを決定します。
Attributemode
Type"ios" | "md"
Defaultundefined

name

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

placeholder

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

searchIcon

Description検索アイコンとして使用するアイコンです。デフォルトは ios modeでは search-outlinemd modeでは search-sharp です。
Attributesearch-icon
Typestring | undefined
Defaultundefined

showCancelButton

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

showClearButton

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

spellcheck

Descriptiontrueの場合、入力値のスペルチェックを有効にします。
Attributespellcheck
Typeboolean
Defaultfalse

type

DescriptionInputの種類を設定します。
Attributetype
Type"email" | "number" | "password" | "search" | "tel" | "text" | "url"
Default'search'

value

Description検索バーの値。
Attributevalue
Typenull | string | undefined
Default''

イベント

NameDescription
ionBlurInputのフォーカスが外れたときに発行されます。
ionCancelキャンセルボタンがクリックされたときに発行されます。
ionChangeionChange イベントは、<ion-searchbar> 要素に対して、ユーザがその要素の値を変更したときに発生します。ionInputイベントとは異なり、要素の値が変更されるたびにionChange イベントが発生する必要はない。ionChangeイベントは、ユーザーによって値がコミットされたときに発生します。これは、要素のフォーカスが外れたときや、"Enter "キーが押されたときに発生します。また、クリアボタンやキャンセルボタンをクリックしたときにも ionChange` イベントが発生することがあります。
ionClearClear Inputボタンがクリックされたときに発行されます。
ionFocusInputにフォーカスが当たったときに発行されます。
ionInpution-searchbar要素の value` が変更されたときに発行されます。

メソッド

getInputElement

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

setFocus

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

CSS Shadow Parts

No CSS shadow parts available for this component.

CSSカスタムプロパティ

NameDescription
--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.