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" に設定すると、アイコンが虫眼鏡からarriage 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

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 & Record<never, never> ｜ 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

mode

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

placeholder

Description	Inputのplaceholderを設定します。 placeholder には、文字列としてプレーンテキストまたはHTMLのいずれかを指定することができます。通常HTML用に予約されている文字を表示するには、エスケープする必要があります。例えば <Ionic> は &lt;Ionic&gt; になります。詳細は セキュリティ・ドキュメンテーション をご覧ください。
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
ionBlur	Inputのフォーカスが外れたときに発行されます。
ionCancel	キャンセルボタンがクリックされたときに発行されます。
ionChange	ionChange イベントは、<ion-searchbar> 要素に対して、ユーザがその要素の値を変更したときに発生します。ionInputイベントとは異なり、要素の値が変更されるたびにionChange イベントが発生する必要はない。ionChangeイベントは、ユーザーによって値がコミットされたときに発生します。これは、要素のフォーカスが外れたときや、"Enter "キーが押されたときに発生します。また、クリアボタンやキャンセルボタンをクリックしたときにも ionChange` イベントが発生することがあります。
ionClear	Clear Inputボタンがクリックされたときに発行されます。
ionFocus	Inputにフォーカスが当たったときに発行されます。
ionInput	ion-searchbar要素の value` が変更されたときに発行されます。

メソッド

getInputElement

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

setFocus

Description	指定された ion-searchbar にフォーカスを合わせる。グローバルな input.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の不透明度

Slots

No slots available for this component.