スコープ済み
検索バーは、コレクション内を検索するために使用できるテキストフィールドです。ツールバーまたはメインコンテンツ内に表示できます。リストを検索するには、入力ではなく検索バーを使用する必要があります。
検索アイコンは、検索バーの入力フィールドの左側に表示されます。任意のIoniconにカスタマイズできます。
クリアボタンは、検索バーに値がある場合、または検索バーのテキストフィールドに入力すると表示されます。クリアボタンをクリックすると、テキストフィールドが消去され、入力がフォーカスされたままになります。デフォルトでは、検索バーにフォーカスしたときにクリアボタンが表示されるように設定されていますが、常に表示または非表示にするように設定できます。クリアボタン内のアイコンも、任意のIoniconにカスタマイズできます。
クリック時に入力をクリアしてフォーカスを失うキャンセルボタンを有効にできます。デフォルトでは、キャンセルボタンは非表示に設定されていますが、常に表示するか、検索バーにフォーカスしている場合にのみ表示するように設定できます。キャンセルボタンは、`ios`モードではテキストとして、`md`モードではアイコンとして表示されます。テキストとアイコンの両方を異なるプロパティを使用してカスタマイズできます。アイコンは任意のIoniconを使用できます。
検索バーは、ツールバー内に配置するとネイティブのように表示されます。iOSでは、検索バーはページタイトルを含むツールバーの下にある独自のツールバーに配置する必要があります。マテリアルデザインでは、検索バーは独自のツールバーに永続的に表示されるか、ページタイトルを含むツールバーの上に展開されます。
`ionInput`イベントのトリガーを遅らせるために、検索バーにデバウンスを設定できます。これはデータのクエリを行う際に役立ちます。入力に文字が入力されるたびにデータのリクエストを行うのではなく、リクエストを行うのを待つために使用できます。
検索バーはスコープされたカプセル化を使用しているため、実行時に各スタイルに追加のクラスを追加することで、CSSが自動的にスコープされます。CSSでスコープされたセレクターをオーバーライドするには、より高い特異性を持つセレクターが必要です。カスタマイズのために`ion-searchbar`をターゲットにしても機能しないため、クラスを追加してその方法でカスタマイズすることをお勧めします。
デフォルトでは、入力タップすると、送信ボタンに虫眼鏡アイコンが表示されたキーボードが表示されます。オプションで`inputmode`プロパティを`"search"`に設定できます。これにより、アイコンが虫眼鏡からキャリッジリターンに変更されます。
デフォルトでは、入力タップすると、灰色の送信ボタンに「return」というテキストが表示されたキーボードが表示されます。オプションで`inputmode`プロパティを`"search"`に設定できます。これにより、テキストが「return」から「go」に変更され、ボタンの色が灰色から青に変更されます。あるいは、`ion-searchbar`を`action`プロパティを持つ`form`要素でラップすることもできます。これにより、「search」という青い送信ボタンが表示されたキーボードが表示されます。
interface SearchbarChangeEventDetail {
value?: string;
}
必須ではありませんが、このインターフェースを`CustomEvent`インターフェースの代わりに使用して、このコンポーネントから発行されるIonicイベントの型付けを強化できます。
interface SearchbarCustomEvent extends CustomEvent {
detail: SearchbarChangeEventDetail;
target: HTMLIonSearchbarElement;
}
| 説明 | `true`の場合、検索バーアニメーションを有効にします。 |
| 属性 | animated |
| 型 | boolean |
| デフォルト | false |
| 説明 | ユーザーが入力/編集したテキスト値を自動的に大文字にするかどうか、どのように行うかを指定します。使用可能なオプション：`"off"`、`"none"`、`"on"`、`"sentences"`、`"words"`、`"characters"`。 |
| 属性 | autocapitalize |
| 型 | string |
| デフォルト | 'off' |
| 説明 | 入力のautocompleteプロパティを設定します。 |
| 属性 | autocomplete |
| 型 | "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" |
| デフォルト | 'off' |
| 説明 | 入力のautocorrectプロパティを設定します。 |
| 属性 | autocorrect |
| 型 | "off" ｜ "on" |
| デフォルト | 'off' |
| 説明 | キャンセルボタンのアイコンを設定します。`md`モードにのみ適用されます。デフォルトは`arrow-back-sharp`です。 |
| 属性 | cancel-button-icon |
| 型 | string |
| デフォルト | config.get('backButtonIcon', arrowBackSharp) as string |
| 説明 | キャンセルボタンのテキストを設定します。`ios`モードにのみ適用されます。 |
| 属性 | cancel-button-text |
| 型 | string |
| デフォルト | 'Cancel' |
| 説明 | クリアアイコンを設定します。`ios`の場合は`close-circle`、`md`の場合は`close-sharp`がデフォルトです。 |
| 属性 | clear-icon |
| 型 | string ｜ undefined |
| デフォルト | undefined |
| 説明 | アプリケーションの色パレットから使用する色です。デフォルトオプションは、"primary"、"secondary"、"tertiary"、"success"、"warning"、"danger"、"light"、"medium"、"dark"です。色の詳細については、テーマ設定を参照してください。 |
| 属性 | 色 |
| 型 | "danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ 文字列 ｜ 未定義 |
| デフォルト | undefined |
| 説明 | 各キーストロークの後、ionInputイベントをトリガーするまでの待機時間をミリ秒単位で設定します。 |
| 属性 | debounce |
| 型 | 数値 ｜ 未定義 |
| デフォルト | undefined |
| 説明 | trueの場合、ユーザーは入力とインタラクトできません。 |
| 属性 | disabled |
| 型 | boolean |
| デフォルト | false |
| 説明 | 表示するEnterキーをブラウザにヒントします。可能な値："enter"、"done"、"go"、"next"、"previous"、"search"、"send"。 |
| 属性 | enterkeyhint |
| 型 | "done" ｜ "enter" ｜ "go" ｜ "next" ｜ "previous" ｜ "search" ｜ "send" ｜ 未定義 |
| デフォルト | undefined |
| 説明 | 表示するキーボードをブラウザにヒントします。可能な値："none"、"text"、"tel"、"url"、"email"、"numeric"、"decimal"、"search"。 |
| 属性 | inputmode |
| 型 | "decimal" ｜ "email" ｜ "none" ｜ "numeric" ｜ "search" ｜ "tel" ｜ "text" ｜ "url" ｜ 未定義 |
| デフォルト | undefined |
| 説明 | この属性は、ユーザーが入力できる最大文字数を指定します。 |
| 属性 | maxlength |
| 型 | 数値 ｜ 未定義 |
| デフォルト | undefined |
| 説明 | この属性は、ユーザーが入力できる最小文字数を指定します。 |
| 属性 | minlength |
| 型 | 数値 ｜ 未定義 |
| デフォルト | undefined |
| 説明 | modeは、使用するプラットフォームスタイルを決定します。 |
| 属性 | mode |
| 型 | "ios" ｜ "md" |
| デフォルト | undefined |
| 説明 | フォームで使用する場合、フォームデータと共に送信されるコントロールの名前を設定します。 |
| 属性 | name |
| 型 | string |
| デフォルト | this.inputId |
| 説明 | 入力のプレースホルダーを設定します。placeholderは、プレーンテキストまたはHTMLを文字列として受け入れることができます。HTML用に予約されている文字を表示するには、エスケープする必要があります。例えば、<Ionic>は<Ionic>になります。
詳細情報：セキュリティドキュメント |
| 属性 | placeholder |
| 型 | string |
| デフォルト | '検索' |
| 説明 | 検索アイコンとして使用するアイコンです。iosモードではsearch-outline、mdモードではsearch-sharpがデフォルトです。 |
| 属性 | search-icon |
| 型 | string ｜ undefined |
| デフォルト | undefined |
| 説明 | キャンセルボタンの動作を設定します。デフォルトは"never"です。"focus"に設定すると、フォーカス時にキャンセルボタンが表示されます。"never"に設定すると、キャンセルボタンは非表示になります。"always"に設定すると、フォーカス状態に関係なくキャンセルボタンが表示されます。 |
| 属性 | show-cancel-button |
| 型 | "always" ｜ "focus" ｜ "never" |
| デフォルト | 'never' |
| 説明 | クリアボタンの動作を設定します。デフォルトは"focus"です。"focus"に設定すると、入力が空でない場合、フォーカス時にクリアボタンが表示されます。"never"に設定すると、クリアボタンは非表示になります。"always"に設定すると、入力が空でない場合、フォーカス状態に関係なくクリアボタンが表示されます。 |
| 属性 | show-clear-button |
| 型 | "always" ｜ "focus" ｜ "never" |
| デフォルト | 'always' |
| 説明 | trueの場合、入力でスペルチェックを有効にします。 |
| 属性 | spellcheck |
| 型 | boolean |
| デフォルト | false |
| 説明 | 入力の種類を設定します。 |
| 属性 | type |
| 型 | "email" ｜ "number" ｜ "password" ｜ "search" ｜ "tel" ｜ "text" ｜ "url" |
| デフォルト | 'search' |
| 説明 | 検索バーの値。 |
| 属性 | value |
| 型 | null ｜ 文字列 ｜ 未定義 |
| デフォルト | '' |
| 名前 | 説明 | バブルアップ |
|---|
ionBlur | 入力がフォーカスを失ったときに発生します。 | true |
ionCancel | キャンセルボタンがクリックされたときに発生します。 | true |
ionChange | ユーザーが要素の値を変更したときに、<ion-searchbar>要素に対してionChangeイベントが発生します。ionInputイベントとは異なり、ionChangeイベントは要素の値の変更ごとに必ずしも発生するわけではありません。
ユーザーが値を確定したときにionChangeイベントが発生します。これは、要素がフォーカスを失ったとき、または「Enter」キーが押されたときに発生します。ionChangeは、クリアボタンまたはキャンセルボタンをクリックしたときにも発生する可能性があります。
このイベントは、プログラムによってvalueプロパティを設定したときには発生しません。 | true |
ionClear | クリア入力ボタンがクリックされたときに発生します。 | true |
ionFocus | 入力がフォーカスされたときに発生します。 | true |
ionInput | ion-searchbar要素のvalueが変更されたときに発生します。 | true |
| 説明 | 内部で使用されているネイティブの<input>要素を返します。 |
| シグネチャ | getInputElement() => Promise<HTMLInputElement> |
| 説明 | ion-searchbar内のネイティブinputにフォーカスを設定します。グローバルなinput.focus()の代わりにこのメソッドを使用してください。
ページが表示されたときに入力をフォーカスさせたい開発者は、ionViewDidEnter()ライフサイクルメソッドでsetFocus()を呼び出す必要があります。
オーバーレイが表示されたときに入力をフォーカスさせたい開発者は、didPresentが解決した後にsetFocusを呼び出す必要があります。
詳細については、フォーカスの管理を参照してください。 |
| シグネチャ | setFocus() => Promise<void> |
このコンポーネントではCSSシャドウパーツは使用できません。
| 名前 | 説明 |
|---|
--background | 検索バー入力の背景 |
--border-radius | 検索バー入力のボーダー半径 |
--box-shadow | 検索バー入力のボックスシャドウ |
--cancel-button-color | 検索バーキャンセルボタンの色 |
--clear-button-color | 検索バークリアボタンの色 |
--color | 検索バーテキストの色 |
--icon-color | 検索バーアイコンの色 |
--placeholder-color | 検索バープレースホルダーの色 |
--placeholder-font-style | 検索バープレースホルダーのフォントスタイル |
--placeholder-font-weight | 検索バープレースホルダーのフォントウェイト |
--placeholder-opacity | 検索バープレースホルダーの不透明度 |
| 名前 | 説明 |
|---|
--background | 検索バー入力の背景 |
--border-radius | 検索バー入力のボーダー半径 |
--box-shadow | 検索バー入力のボックスシャドウ |
--cancel-button-color | 検索バーキャンセルボタンの色 |
--clear-button-color | 検索バークリアボタンの色 |
--color | 検索バーテキストの色 |
--icon-color | 検索バーアイコンの色 |
--placeholder-color | 検索バープレースホルダーの色 |
--placeholder-font-style | 検索バープレースホルダーのフォントスタイル |
--placeholder-font-weight | 検索バープレースホルダーのフォントウェイト |
--placeholder-opacity | 検索バープレースホルダーの不透明度 |
このコンポーネントではスロットは使用できません。