ion-searchbar
Properties
animated
| Description | trueの場合、検索バーのアニメーションを有効にします。 |
| Attribute | animated |
| Type | boolean |
| Default | false |
autocapitalize
| Description | テキスト値がユーザーによって入力／編集される際に、自動的に大文字にするかどうか、またどのようにするかについて示します。利用可能なオプション: "off", "none", "on", "sentences", "words", "characters". |
| Attribute | autocapitalize |
| Type | string |
| Default | 'off' |
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 | Set the cancel button text. Only applies to 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 |
maxlength
| Description | この属性は、ユーザが入力できる最大文字数を指定します。 |
| Attribute | maxlength |
| Type | number ｜ undefined |
| Default | undefined |
minlength
| Description | この属性は、ユーザーが入力できる最小の文字数を指定します。 |
| Attribute | minlength |
| Type | number ｜ undefined |
| Default | undefined |
mode
| Description | modeは、どのプラットフォームのスタイルを使用するかを決定します。 |
| Attribute | mode |
| Type | "ios" ｜ "md" |
| Default | undefined |
name
| Description | フォームで使用する場合は、フォーム・データと一緒に送信されるコントロールの名前を設定します。 |
| Attribute | name |
| Type | string |
| Default | this.inputId |
placeholder
| Description | Inputのplaceholderを設定します。 placeholder には、文字列としてプレーンテキストまたはHTMLのいずれかを指定することができます。通常HTML用に予約されている文字を表示するには、エスケープする必要があります。例えば <Ionic> は <Ionic> になります。詳細は セキュリティ・ドキュメンテーション をご覧ください。 |
| 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 | '' |
Events
| Name | Description |
|---|---|
ionBlur | Inputのフォーカスが外れたときに発行されます。 |
ionCancel | キャンセルボタンがクリックされたときに発行されます。 |
ionChange | onChange イベントは、ユーザが要素の値を変更したときに <ion-searchbar> 要素に対して発生する。ionInput イベントとは異なり、要素の値が変更されるたびに ionChange イベントが発生するわけではない。 ionChange イベントは、ユーザによって値が変更されたときに発生する。これは、要素のフォーカスが外れたときや、"Enter" キーが押されたときに発生する。また、クリアボタンやキャンセルボタンをクリックしたときにも ionChange イベントが発生することがある。 プログラムで value プロパティを設定した場合には、このイベントは発生しない。 |
ionClear | Clear Inputボタンがクリックされたときに発行されます。 |
ionFocus | Inputにフォーカスが当たったときに発行されます。 |
ionInput | ion-searchbar要素の value が変更されたときに発行されます。 |
Methods
getInputElement
| Description | 要素の内部で使用されているネイティブの <input> 要素を返します。 |
| 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 Custom Properties
| Name | Description |
|---|---|
--background | 検索バーのInputの背景 |
--background | 検索バーのInputの背景 |
--border-radius | 検索バーのInputのボーダー半径 |
--border-radius | 検索バーのInputのボーダー半径 |
--box-shadow | 検索バーのInputのボックスシャドウ |
--box-shadow | 検索バーのInputのボックスシャドウ |
--cancel-button-color | 検索バーのキャンセルボタンの色 |
--cancel-button-color | 検索バーのキャンセルボタンの色 |
--clear-button-color | 検索バーのクリアボタンの色 |
--clear-button-color | 検索バーのクリアボタンの色 |
--color | 検索バーのテキストの色 |
--color | 検索バーのテキストの色 |
--icon-color | 検索バーのアイコンの色 |
--icon-color | 検索バーのアイコンの色 |
--placeholder-color | 検索バーのPlaceholderの色 |
--placeholder-color | 検索バーのPlaceholderの色 |
--placeholder-font-style | 検索バーのPlaceholderのFont Style |
--placeholder-font-style | 検索バーのPlaceholderのFont Style |
--placeholder-font-weight | 検索バーのPlaceholderのFont Weight |
--placeholder-font-weight | 検索バーのPlaceholderのFont Weight |
--placeholder-opacity | 検索バーのPlaceholderの不透明度 |
--placeholder-opacity | 検索バーのPlaceholderの不透明度 |