ion-select
Selectは、ネイティブの <select>
要素と同様に、オプションのセットからオプションを選択するためのフォームコントロールです。ユーザがselectをタップすると、すべてのオプションを含むダイアログが、選択しやすい大きなリストで表示されます。
selectは、子要素 <ion-select-option>
とともに使用する必要があります。子要素のオプションにvalue
属性が指定されていない場合、そのtextが値として使用されます。
value
が <ion-select>
にセットされている場合、オプションはその値に基づいて選択済みになります。
単一選択
デフォルトでは、selectを使用すると、ユーザは1つのOptionだけを選択できます。Alertのインターフェースでは、Optionのリストがradio button形式で表示されます。action sheetインタフェースは、1つの値選択でのみ使用できます。selectコンポーネントの値は、選択したオプションの値の値を受け取ります。
インターフェイス
デフォルトでは、select は ion-alert を使ってAlertのオプションのオーバーレイを開きます。インターフェイスを変更して、ion-action-sheet または ion-popover を使用するには、 action-sheet
または popover
を interface
プロパティに渡します。各インタフェースの制限については、他のセクションを参照してください。
Action Sheet
Popover
複数選択
multiple
属性を追加して選択すると、複数のOptionを選択できます。複数のOptionを選択できる場合は、checkbox形式のオプションのリストがAlertオーバーレイで表示されます。selectコンポーネントの値は、選択されたすべてのオプション値の配列を受け取ります。
Note: action-sheet
と popover
インターフェイスでは、複数選択は動作しません
Responding to Interaction
select とユーザーのインタラクションを処理する主な方法は、 ionChange
イベント、 ionDismiss
イベント、 ionCancel
イベントです。これらのイベントと select が発生するその他のイベントの詳細については、イベント を参照してください。
Object値について
選択した値にObjectを使用する場合、これらのObjectの識別情報がサーバーまたはデータベースからのものであれば変更できますが、選択した値の識別情報は変更されません。たとえば、目的のObject値を持つ既存の値がselectにロードされたが、新しく取得されたselectオプションが異なるIDを持つようになった場合などです。これにより、元の選択がそのままの状態であっても、選択に値がまったく表示されなくなります。
デフォルトでは、selectはObjectの等価性(===
)を使用して、オプションが選択されているかどうかを判断します。これはcompareWiths
プロパティにプロパティ名または関数を指定することで上書きできます。
Using compareWith
Object Values and Multiple Selection
SelectのButton
alertはふたつのボタンをサポートしています: Cancel
と OK
です。それぞれのボタンは、 cancelText
と okText
プロパティを使ってカスタマイズできます。
action-sheet
と popover
インタフェースには OK
ボタンがありません。いずれかのオプションをクリックすると、自動的にオーバーレイが閉じ、その値が選択されます。popover
インターフェースにはCancel
ボタンがないので、backdropをクリックするとオーバーレイが閉じます。
インターフェイスオプション
select は alert、action sheet、popover インターフェースを使用するので、interfaceOptions
プロパティを通して、これらのコンポーネントにオプションを渡すことができます。これは、カスタムヘッダー、サブヘッダー、CSS クラスなどを渡すために使用できます。
各インターフェースが受け付けるプロパティは、ion-alert docs, ion-action-sheet docs, ion-popover docs を参照してください。
Note: alert
インターフェースでは、 interfaceOptions
は inputs
や buttons
をオーバーライドしません。
カスタマイズ
Selectコンポーネントを構成する2つのユニットがあり、それぞれを別々にスタイルする必要があります。 ion-select
要素は、ビュー上で選択された値(複数可)、または何もない場合はプレースホルダー、およびドロップダウンのアイコンによって表現されます。インターフェースは、上記の インターフェース セクションで定義されており、 ion-select
をクリックすると開かれるダイアログです。インターフェースには、 ion-select-option
要素を追加することで定義されるすべてのオプションが含まれています。次のセクションでは、これらのスタイリングの違いについて説明します。
Select 要素のスタイリング
前述の通り、ion-select
要素は、ビューに表示される値 (またはプレースホルダ) とアイコンのみで構成されています。これをカスタマイズするには、CSSとCSSカスタムプロパティを組み合わせてスタイルを設定します。
また、必要な ブラウザサポート に応じて、CSSのシャドウパーツを使用してセレクトのスタイルを設定することができます。part` を使用することで、要素上の任意のCSSプロパティをターゲットにすることができることに注意してください。
Select インターフェイスのスタイリング
インターフェイスのダイアログのカスタマイズは、そのインターフェイスのドキュメントのカスタマイズのセクションにしたがって行ってください。
ただし、Selectオプションでは、スタイリングを容易にするためにクラスを設定し、オーバーレイオプションにクラスを渡す機能があります。オプションのカスタマイズの使用例については、Selectオプションのドキュメントを参照してください。
Interfaces
SelectChangeEventDetail
interface SelectChangeEventDetail<T = any> {
value: T;
}
SelectCustomEvent
必須ではありませんが、このコンポーネントから発行される Ionic イベントでより強く型付けを行うために、CustomEvent
インターフェースの代わりにこのインターフェースを使用することが可能です。
interface SelectCustomEvent<T = any> extends CustomEvent {
detail: SelectChangeEventDetail<T>;
target: HTMLIonSelectElement;
}
プロパティ
cancelText
Description | The text to display on the cancel button. |
Attribute | cancel-text |
Type | string |
Default | 'Cancel' |
compareWith
Description | A property name or function used to compare object values |
Attribute | compare-with |
Type | ((currentValue: any, compareValue: any) => boolean) | null | string | undefined |
Default | undefined |
disabled
Description | If true , the user cannot interact with the select. |
Attribute | disabled |
Type | boolean |
Default | false |
interface
Description | The interface the select should use: action-sheet , popover or alert . |
Attribute | interface |
Type | "action-sheet" | "alert" | "popover" |
Default | 'alert' |
interfaceOptions
Description | Any additional options that the alert , action-sheet or popover interface can take. See the ion-alert docs, the ion-action-sheet docs and the ion-popover docs for the create options for each interface.Note: interfaceOptions will not override inputs or buttons with the alert interface. |
Attribute | interface-options |
Type | any |
Default | {} |
mode
Description | The mode determines which platform styles to use. |
Attribute | mode |
Type | "ios" | "md" |
Default | undefined |
multiple
Description | If true , the select can accept multiple values. |
Attribute | multiple |
Type | boolean |
Default | false |
name
Description | The name of the control, which is submitted with the form data. |
Attribute | name |
Type | string |
Default | this.inputId |
okText
Description | The text to display on the ok button. |
Attribute | ok-text |
Type | string |
Default | 'OK' |
placeholder
Description | The text to display when the select is empty. |
Attribute | placeholder |
Type | string | undefined |
Default | undefined |
selectedText
Description | The text to display instead of the selected option's value. |
Attribute | selected-text |
Type | null | string | undefined |
Default | undefined |
value
Description | the value of the select. |
Attribute | value |
Type | any |
Default | undefined |
イベント
Name | Description |
---|---|
ionBlur | Emitted when the select loses focus. |
ionCancel | Emitted when the selection is cancelled. |
ionChange | Emitted when the value has changed. |
ionDismiss | Emitted when the overlay is dismissed. |
ionFocus | Emitted when the select has focus. |
メソッド
open
Description | Open the select overlay. The overlay is either an alert, action sheet, or popover, depending on the interface property on the ion-select . |
Signature | open(event?: UIEvent | undefined) => Promise<any> |
CSS Shadow Parts
Name | Description |
---|---|
icon | The select icon container. |
placeholder | The text displayed in the select when there is no value. |
text | The displayed value of the select. |
CSSカスタムプロパティ
Name | Description |
---|---|
--padding-bottom | Bottom padding of the select |
--padding-end | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the select |
--padding-start | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the select |
--padding-top | Top padding of the select |
--placeholder-color | Color of the select placeholder text |
--placeholder-opacity | Opacity of the select placeholder text |
Slots
No slots available for this component.