ion-searchbar
検索バーは、コレクションを検索するために使用できるテキストフィールドを表します。ツールバーやメインコンテンツの中に表示することができます。検索バーは、検索リストへの入力の代わりに使用する必要があります。
基本的な使い方
- src/app/example.component.html
- src/app/example.component.ts
<ion-searchbar></ion-searchbar>
<ion-searchbar placeholder="Custom Placeholder"></ion-searchbar>
<ion-searchbar disabled="true" placeholder="Disabled"></ion-searchbar>
<ion-searchbar value="Value"></ion-searchbar>
<ion-searchbar animated="true" placeholder="Animated"></ion-searchbar>
検索アイコン
検索バーのInputフィールドの左に表示される検索アイコンです。任意の Ionicon にカスタマイズすることが可能です。
- src/app/example.component.html
- src/app/example.component.ts
<ion-searchbar></ion-searchbar>
<ion-searchbar search-icon="search-circle" placeholder="Custom Search Icon"></ion-searchbar>
クリアボタン
検索バーに値があるとき、または検索バーのテキストフィールドに入力があったときに、クリアボタンが表示されます。クリアボタンをクリックすると、テキストフィールドは消去され、入力はフォーカスされたままになります。デフォルトでは、クリアボタンは検索バーをフォーカスしたときに表示されるように設定されていますが、常に表示する、または全く表示しないように設定することができます。また、クリアボタン内のアイコンは、任意のIoniconにカスタマイズすることができます。
- src/app/example.component.html
- src/app/example.component.ts
<ion-searchbar show-clear-button="focus" value="Show on Focus"></ion-searchbar>
<ion-searchbar show-clear-button="always" value="Always Show"></ion-searchbar>
<ion-searchbar show-clear-button="never" value="Never Show"></ion-searchbar>
<ion-searchbar show-clear-button="always" clear-icon="trash-bin" value="Custom Clear Icon"></ion-searchbar>
キャンセルボタン
キャンセルボタンを有効にすると、クリックすると入力がクリアされ、フォーカスが失われます。デフォルトでは、キャンセルボタンは表示されないように設定されていますが、常に表示するように設定したり、検索バーにフォーカスが当たったときのみ表示するように設定したりすることができます。キャンセルボタンは ios
モードではテキストとして、md
モードではアイコンとして表示されます。テキストとアイコンはそれぞれ別のプロパティでカスタマイズでき、アイコンは任意のIoniconを使用することができます。
- src/app/example.component.html
- src/app/example.component.ts
<ion-searchbar show-cancel-button="focus" placeholder="Show on Focus"></ion-searchbar>
<ion-searchbar show-cancel-button="always" placeholder="Always Show"></ion-searchbar>
<ion-searchbar show-cancel-button="never" placeholder="Never Show"></ion-searchbar>
<ion-searchbar
show-cancel-button="always"
cancel-button-text="Custom Cancel"
cancel-button-icon="trash"
placeholder="Custom Cancel Button"
></ion-searchbar>
ツールバーの中に配置した検索バー
検索バーは、ツールバーの中に配置されたときにネイティブに見えるようにスタイルされています。iOSでは、検索バーは、ページタイトルを含むツールバーの下にある、独自のツールバーに配置されるべきです。Material Designでは、検索バーは、独自のツールバーに永続的に表示されるか、ページタイトルを含むツールバーの上に展開されるかのいずれかです。
- src/app/example.component.html
- src/app/example.component.ts
<ion-header>
<ion-toolbar>
<ion-title>Toolbar</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-searchbar></ion-searchbar>
</ion-toolbar>
</ion-header>
Debounce
検索バーにDebounceを設定して、ionInput
イベントのトリガーを遅延させることができます。これは、入力に文字が入力されるたびにデータを要求するのではなく、要求を出すのを待つために使うことができるので、データを問い合わせるときに便利です。
- src/app/example.component.html
- src/app/example.component.ts
<ion-searchbar [debounce]="1000" (ionInput)="handleInput($event)"></ion-searchbar>
<ion-list>
@for (result of results; track result) {
<ion-item>
<ion-label>{{ result }}</ion-label>
</ion-item>
}
</ion-list>
テーマ
Colors
- src/app/example.component.html
- src/app/example.component.ts
<ion-searchbar placeholder="Default"></ion-searchbar>
<ion-searchbar color="primary" placeholder="Primary"></ion-searchbar>
<ion-searchbar color="secondary" placeholder="Secondary"></ion-searchbar>
<ion-searchbar color="tertiary" placeholder="Tertiary"></ion-searchbar>
<ion-searchbar color="success" placeholder="Success"></ion-searchbar>
<ion-searchbar color="warning" placeholder="Warning"></ion-searchbar>
<ion-searchbar color="danger" placeholder="Danger"></ion-searchbar>
<ion-searchbar color="light" placeholder="Light"></ion-searchbar>
<ion-searchbar color="medium" placeholder="Medium"></ion-searchbar>
<ion-searchbar color="dark" placeholder="Dark"></ion-searchbar>
CSSカスタムプロパティ
検索バーは、スコープをつけてカプセル化されています。これは、実行時に各スタイルに追加のクラスを付加することで、CSSを自動的にスコープ化することを意味します。CSSでscopedセレクタを上書きするには、higher specificity セレクタが必要です。そのため、クラスを追加してカスタマイズすることをお勧めします。
- src/app/example.component.html
- src/app/example.component.css
- src/app/example.component.ts
<ion-searchbar showCancelButton="focus" class="custom"></ion-searchbar>
キーボード表示
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 | If true , enable searchbar animation. |
Attribute | animated |
Type | boolean |
Default | false |
autocapitalize
Description | Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user. Available options: "off" , "none" , "on" , "sentences" , "words" , "characters" . |
Attribute | autocapitalize |
Type | string |
Default | 'off' |
autocomplete
Description | Set the input's autocomplete property. |
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 | Set the input's autocorrect property. |
Attribute | autocorrect |
Type | "off" | "on" |
Default | 'off' |
cancelButtonIcon
Description | Set the cancel button icon. Only applies to md mode. Defaults to arrow-back-sharp . |
Attribute | cancel-button-icon |
Type | string |
Default | config.get('backButtonIcon', arrowBackSharp) as string |
cancelButtonText
Description | Set the the cancel button text. Only applies to ios mode. |
Attribute | cancel-button-text |
Type | string |
Default | 'Cancel' |
clearIcon
Description | Set the clear icon. Defaults to close-circle for ios and close-sharp for md . |
Attribute | clear-icon |
Type | string | undefined |
Default | undefined |
color
Description | The color to use from your application's color palette. Default options are: "primary" , "secondary" , "tertiary" , "success" , "warning" , "danger" , "light" , "medium" , and "dark" . For more information on colors, see theming. |
Attribute | color |
Type | "danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string | undefined |
Default | undefined |
debounce
Description | Set the amount of time, in milliseconds, to wait to trigger the ionInput event after each keystroke. |
Attribute | debounce |
Type | number | undefined |
Default | undefined |
disabled
Description | If true , the user cannot interact with the input. |
Attribute | disabled |
Type | boolean |
Default | false |
enterkeyhint
Description | A hint to the browser for which enter key to display. Possible values: "enter" , "done" , "go" , "next" , "previous" , "search" , and "send" . |
Attribute | enterkeyhint |
Type | "done" | "enter" | "go" | "next" | "previous" | "search" | "send" | undefined |
Default | undefined |
inputmode
Description | A hint to the browser for which keyboard to display. Possible values: "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 | This attribute specifies the maximum number of characters that the user can enter. |
Attribute | maxlength |
Type | number | undefined |
Default | undefined |
minlength
Description | This attribute specifies the minimum number of characters that the user can enter. |
Attribute | minlength |
Type | number | undefined |
Default | undefined |
mode
Description | The mode determines which platform styles to use. |
Attribute | mode |
Type | "ios" | "md" |
Default | undefined |
name
Description | If used in a form, set the name of the control, which is submitted with the form data. |
Attribute | name |
Type | string |
Default | this.inputId |
placeholder
Description | Set the input's placeholder. placeholder can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example <Ionic> would become <Ionic> For more information: Security Documentation |
Attribute | placeholder |
Type | string |
Default | 'Search' |
searchIcon
Description | The icon to use as the search icon. Defaults to search-outline in ios mode and search-sharp in md mode. |
Attribute | search-icon |
Type | string | undefined |
Default | undefined |
showCancelButton
Description | Sets the behavior for the cancel button. Defaults to "never" . Setting to "focus" shows the cancel button on focus. Setting to "never" hides the cancel button. Setting to "always" shows the cancel button regardless of focus state. |
Attribute | show-cancel-button |
Type | "always" | "focus" | "never" |
Default | 'never' |
showClearButton
Description | Sets the behavior for the clear button. Defaults to "focus" . Setting to "focus" shows the clear button on focus if the input is not empty. Setting to "never" hides the clear button. Setting to "always" shows the clear button regardless of focus state, but only if the input is not empty. |
Attribute | show-clear-button |
Type | "always" | "focus" | "never" |
Default | 'always' |
spellcheck
Description | If true , enable spellcheck on the input. |
Attribute | spellcheck |
Type | boolean |
Default | false |
type
Description | Set the type of the input. |
Attribute | type |
Type | "email" | "number" | "password" | "search" | "tel" | "text" | "url" |
Default | 'search' |
value
Description | the value of the searchbar. |
Attribute | value |
Type | null | string | undefined |
Default | '' |
イベント
Name | Description | Bubbles |
---|---|---|
ionBlur | Emitted when the input loses focus. | true |
ionCancel | Emitted when the cancel button is clicked. | 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 | Emitted when the clear input button is clicked. | true |
ionFocus | Emitted when the input has focus. | true |
ionInput | Emitted when the value of the ion-searchbar element has changed. | true |
メソッド
getInputElement
Description | Returns the native <input> element used under the hood. |
Signature | getInputElement() => Promise<HTMLInputElement> |
setFocus
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> |
CSS Shadow Parts
No CSS shadow parts available for this component.
CSSカスタムプロパティ
- iOS
- MD
Name | Description |
---|---|
--background | Background of the searchbar input |
--border-radius | Border radius of the searchbar input |
--box-shadow | Box shadow of the searchbar input |
--cancel-button-color | Color of the searchbar cancel button |
--clear-button-color | Color of the searchbar clear button |
--color | Color of the searchbar text |
--icon-color | Color of the searchbar icon |
--placeholder-color | Color of the searchbar placeholder |
--placeholder-font-style | Font style of the searchbar placeholder |
--placeholder-font-weight | Font weight of the searchbar placeholder |
--placeholder-opacity | Opacity of the searchbar placeholder |
Name | Description |
---|---|
--background | Background of the searchbar input |
--border-radius | Border radius of the searchbar input |
--box-shadow | Box shadow of the searchbar input |
--cancel-button-color | Color of the searchbar cancel button |
--clear-button-color | Color of the searchbar clear button |
--color | Color of the searchbar text |
--icon-color | Color of the searchbar icon |
--placeholder-color | Color of the searchbar placeholder |
--placeholder-font-style | Font style of the searchbar placeholder |
--placeholder-font-weight | Font weight of the searchbar placeholder |
--placeholder-opacity | Opacity of the searchbar placeholder |
Slots
No slots available for this component.