scoped
Searchbars represent a text field that can be used to search through a collection. They can be displayed inside of a toolbar or the main content. A searchbar should be used instead of an input to search lists.
A search icon is displayed to the left of the input field in a searchbar. It can be customized to any Ionicon.
A clear button is displayed when a searchbar has a value or upon entering input in the searchbar's text field. Clicking on the clear button will erase the text field and the input will remain focused. By default, the clear button is set to show when focusing the searchbar, but it can be set to always show or never show. The icon inside of the clear button can also be customized to any Ionicon.
A cancel button can be enabled which will clear the input and lose the focus upon click. By default, cancel buttons are set to never show, but they can be set to always show or only show when focusing the searchbar. The cancel button is displayed as text in ios mode, and as an icon in md mode. Both the text and icon can be customized using different properties, with the icon accepting any Ionicon.
Searchbars are styled to look native when placed inside of a toolbar. In iOS, searchbars should be placed in their own toolbar, under a toolbar that contains the page title. In Material Design, searchbars are either persistently displayed in their own toolbar, or expand over a toolbar containing the page title.
A debounce can be set on the searchbar in order to delay triggering the ionInput event. This is useful when querying data, as it can be used to wait to make a request instead of requesting the data each time a character is entered in the input.
Searchbar uses scoped encapsulation, which means it will automatically scope its CSS by appending each of the styles with an additional class at runtime. Overriding scoped selectors in CSS requires a higher specificity selector. Targeting the ion-searchbar for customization will not work, therefore we recommend adding a class and customizing it that way.
By default, tapping the input will cause the keyboard to appear with a magnifying glass icon on the submit button. You can optionally set the inputmode property to "search", which will change the icon from a magnifying glass to a carriage return.
By default, tapping the input will cause the keyboard to appear with the text "return" on a gray submit button. You can optionally set the inputmode property to "search", which will change the text from "return" to "go", and change the button color from gray to blue. Alternatively, you can wrap the ion-searchbar in a form element with an action property. This will cause the keyboard to appear with a blue submit button that says "search".
interface SearchbarChangeEventDetail {
value?: string;
}
While not required, this interface can be used in place of the CustomEvent interface for stronger typing with Ionic events emitted from this component.
interface SearchbarCustomEvent extends CustomEvent {
detail: SearchbarChangeEventDetail;
target: HTMLIonSearchbarElement;
}
| Description | trueの場合、検索バーのアニメーションを有効にします。 |
| Attribute | animated |
| Type | boolean |
| Default | false |
| Description | テキスト値が ユーザーによって入力／編集される際に、自動的に大文字にするかどうか、またどのようにするかについて示します。利用可能なオプション: "off", "none", "on", "sentences", "words", "characters". |
| Attribute | autocapitalize |
| Type | string |
| Default | 'off' |
| 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' |
| Description | Inputのオートコレクトプロパティを設定します。 |
| Attribute | autocorrect |
| Type | "off" ｜ "on" |
| Default | 'off' |
| Description | キャンセルボタンのアイコンを設定します。 md modeのみに適用されます。デフォルトは arrow-back-sharp です。 |
| Attribute | cancel-button-icon |
| Type | string |
| Default | config.get('backButtonIcon', arrowBackSharp) as string |
| Description | Set the cancel button text. Only applies to ios mode. |
| Attribute | cancel-button-text |
| Type | string |
| Default | 'Cancel' |
| Description | クリアアイコンを設定します。デフォルトは ios の場合は close-circle 、md の場合は close-sharp です。 |
| Attribute | clear-icon |
| Type | string ｜ undefined |
| Default | undefined |
| 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 |
| Description | キーを押すたびに ionInput イベントが発生するまでの待ち時間をミリ秒単位で設定します。 |
| Attribute | debounce |
| Type | number ｜ undefined |
| Default | undefined |
| Description | trueの場合、ユーザはInputと対話することができません。 |
| Attribute | disabled |
| Type | boolean |
| Default | false |
| Description | どのエンターキーを 表示するかのブラウザへのヒント。指定可能な値。"enter", "done", "go", "next", "previous", "search", and "send". |
| Attribute | enterkeyhint |
| Type | "done" ｜ "enter" ｜ "go" ｜ "next" ｜ "previous" ｜ "search" ｜ "send" ｜ undefined |
| Default | undefined |
| Description | どのキーボードを表示するかのブラウザへのヒント。指定可能な値。"none", "text", "tel", "url", "email", "numeric", "decimal", and "search". |
| Attribute | inputmode |
| Type | "decimal" ｜ "email" ｜ "none" ｜ "numeric" ｜ "search" ｜ "tel" ｜ "text" ｜ "url" ｜ undefined |
| Default | undefined |
| Description | この属性は、ユーザが入力できる最大文字数を指定します。 |
| Attribute | maxlength |
| Type | number ｜ undefined |
| Default | undefined |
| Description | この属性は、ユーザーが入力できる最小の文字数を指定します。 |
| Attribute | minlength |
| Type | number ｜ undefined |
| Default | undefined |
| Description | modeは、どのプラットフォームのスタイルを使用するかを決定します。
This is a virtual property that is set once during initialization and will not update if you change its value after the initial render. |
| Attribute | mode |
| Type | "ios" ｜ "md" |
| Default | undefined |
| Description | フォームで使用する場合は、フォーム・データと一緒に送信されるコントロールの名前を設定します。 |
| Attribute | name |
| Type | string |
| Default | this.inputId |
| Description | Inputのplaceholderを設定します。 placeholder には、文字列としてプレーンテキストまたはHTMLのいずれかを指定することができます。通常HTML用に予約されている文字を表示するには、エスケープする必要があります。例えば <Ionic> は <Ionic> になります。詳細は セキュリティ・ドキュメンテーション をご覧ください。 |
| Attribute | placeholder |
| Type | string |
| Default | 'Search' |
| Description | 検索アイコンとして使用するアイコンです。デフォルトは ios modeでは search-outline 、md modeでは search-sharp です。 |
| Attribute | search-icon |
| Type | string ｜ undefined |
| Default | undefined |
| Description | キャンセルボタンに関する動作を設定します。デフォルトは "never" です。focus" に設定すると、フォーカスが当たったときにキャンセルボタンを表示します。never"に設定すると、キャンセルボタンを非表示にします。always"` に設定すると、フォーカスの状態に関係なくキャンセルボタンを表示します。 |
| Attribute | show-cancel-button |
| Type | "always" ｜ "focus" ｜ "never" |
| Default | 'never' |
| Description | クリアボタンに関する動作を設定します。デフォルトは "focus" です。"focus"に設定すると、Inputが空でない場合、フォーカス時にクリアボタンを表示します。"never"に設定すると、クリアボタンを非表示にします。"always"に設定すると、フォーカスの状態に関係なくクリアボタンを表示するが、Inputが空でない場合にのみクリアボタンを表示します。 |
| Attribute | show-clear-button |
| Type | "always" ｜ "focus" ｜ "never" |
| Default | 'always' |
| Description | trueの場合、入力値のスペルチェックを有効にします。 |
| Attribute | spellcheck |
| Type | boolean |
| Default | false |
| Description | Inputの種類を設定します。 |
| Attribute | type |
| Type | "email" ｜ "number" ｜ "password" ｜ "search" ｜ "tel" ｜ "text" ｜ "url" |
| Default | 'search' |
| Description | 検索バーの値。 |
| Attribute | value |
| Type | null ｜ string ｜ undefined |
| Default | '' |
| Name | Description | Bubbles |
|---|
ionBlur | Inputのフォーカスが外れたときに発行されます。 | true |
ionCancel | キャンセルボタンがクリックされたときに発行されます。 | true |
ionChange | onChange イベントは、ユーザが要素の値を変更したときに <ion-searchbar> 要素に対して発生する。ionInput イベントとは異なり、要素の値が変更されるたびに ionChange イベントが発生するわけではない。 ionChange イベントは、ユーザによって値が変更されたときに発生する。これは、要素のフォーカスが外れたときや、"Enter" キーが押されたときに発生する。また、クリアボタンやキャンセルボタンをクリックしたときにも ionChange イベン トが発生することがある。 プログラムで value プロパティを設定した場合には、このイベントは発生しない。 | true |
ionClear | Clear Inputボタンがクリックされたときに発行されます。 | true |
ionFocus | Inputにフォーカスが当たったときに発行されます。 | true |
ionInput | ion-searchbar要素の value が変更されたときに発行されます。 | true |
| Description | 要素の内部で使用されているネイティブの <input> 要素を返します。 |
| Signature | getInputElement() => Promise<HTMLInputElement> |
| Description | Sets focus on the native input in ion-searchbar. Use this method instead of the global input.focus(). Developers who wish to focus an input when a page enters should call setFocus() in the ionViewDidEnter() lifecycle method. Developers who wish to focus an input when an overlay is presented should call setFocus after didPresent has resolved. See managing focus for more information. |
| Signature | setFocus() => Promise<void> |
No CSS shadow parts available for this component.
| 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の不透明度 |
No slots available for this component.