メインコンテンツまでスキップ
Version: v6

ion-select

shadow

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 または popoverinterface プロパティに渡します。各インタフェースの制限については、他のセクションを参照してください。

Action Sheet

Popover

複数選択

multiple 属性を追加して選択すると、複数のOptionを選択できます。複数のOptionを選択できる場合は、checkbox形式のオプションのリストがAlertオーバーレイで表示されます。selectコンポーネントの値は、選択されたすべてのオプション値の配列を受け取ります。

Note: action-sheetpopover インターフェイスでは、複数選択は動作しません

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はふたつのボタンをサポートしています: CancelOK です。それぞれのボタンは、 cancelTextokText プロパティを使ってカスタマイズできます。

action-sheetpopover インタフェースには OK ボタンがありません。いずれかのオプションをクリックすると、自動的にオーバーレイが閉じ、その値が選択されます。popover インターフェースにはCancelボタンがないので、backdropをクリックするとオーバーレイが閉じます。

インターフェイスオプション

select は alert、action sheet、popover インターフェースを使用するので、interfaceOptions プロパティを通して、これらのコンポーネントにオプションを渡すことができます。これは、カスタムヘッダー、サブヘッダー、CSS クラスなどを渡すために使用できます。

各インターフェースが受け付けるプロパティは、ion-alert docs, ion-action-sheet docs, ion-popover docs を参照してください。

Note: alert インターフェースでは、 interfaceOptionsinputsbuttons をオーバーライドしません。

カスタマイズ

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

DescriptionThe text to display on the cancel button.
Attributecancel-text
Typestring
Default'Cancel'

compareWith

DescriptionA property name or function used to compare object values
Attributecompare-with
Type((currentValue: any, compareValue: any) => boolean) | null | string | undefined
Defaultundefined

disabled

DescriptionIf true, the user cannot interact with the select.
Attributedisabled
Typeboolean
Defaultfalse

interface

DescriptionThe interface the select should use: action-sheet, popover or alert.
Attributeinterface
Type"action-sheet" | "alert" | "popover"
Default'alert'

interfaceOptions

DescriptionAny 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.
Attributeinterface-options
Typeany
Default{}

mode

DescriptionThe mode determines which platform styles to use.
Attributemode
Type"ios" | "md"
Defaultundefined

multiple

DescriptionIf true, the select can accept multiple values.
Attributemultiple
Typeboolean
Defaultfalse

name

DescriptionThe name of the control, which is submitted with the form data.
Attributename
Typestring
Defaultthis.inputId

okText

DescriptionThe text to display on the ok button.
Attributeok-text
Typestring
Default'OK'

placeholder

DescriptionThe text to display when the select is empty.
Attributeplaceholder
Typestring | undefined
Defaultundefined

selectedText

DescriptionThe text to display instead of the selected option's value.
Attributeselected-text
Typenull | string | undefined
Defaultundefined

value

Descriptionthe value of the select.
Attributevalue
Typeany
Defaultundefined

イベント

NameDescription
ionBlurEmitted when the select loses focus.
ionCancelEmitted when the selection is cancelled.
ionChangeEmitted when the value has changed.
ionDismissEmitted when the overlay is dismissed.
ionFocusEmitted when the select has focus.

メソッド

open

DescriptionOpen the select overlay. The overlay is either an alert, action sheet, or popover, depending on the interface property on the ion-select.
Signatureopen(event?: UIEvent) => Promise<any>

CSS Shadow Parts

NameDescription
iconThe select icon container.
placeholderThe text displayed in the select when there is no value.
textThe displayed value of the select.

CSSカスタムプロパティ

NameDescription
--padding-bottomBottom padding of the select
--padding-endRight padding if direction is left-to-right, and left padding if direction is right-to-left of the select
--padding-startLeft padding if direction is left-to-right, and right padding if direction is right-to-left of the select
--padding-topTop padding of the select
--placeholder-colorColor of the select placeholder text
--placeholder-opacityOpacity of the select placeholder text

Slots

No slots available for this component.