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 または 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

Label Placement

Labelsは、デフォルトでそのコンテンツの幅を占めます。 開発者は labelPlacement プロパティを使用して、ラベルがどのように配置されるかを制御することができます。

Justification

開発者は justify プロパティを使用して、ラベルとコントロールの行の詰め方を制御することができます。

Filled Selects

Material Designでは、セレクトに塗りつぶしのスタイルが用意されています。セレクトの fill プロパティは "solid" または "outline" のいずれかに設定することができます。

fill スタイルはセレクトコンテナを視覚的に定義するため、fill を使用するセレクトは ion-item で使用すべきではありません。

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オプションのドキュメントを参照してください。

Typeahead Component

Typeaheadやオートコンプリートの機能は、既存のIonicコンポーネントを使用して構築することができます。利用可能なスクリーンスペースを最大限に活用するために、ion-modalを使用することをお勧めします。

Interfaces

SelectChangeEventDetail

interface SelectChangeEventDetail<T = any> {
  value: T;
}

SelectCustomEvent

必須ではありませんが、このコンポーネントから発行される Ionic イベントでより強く型付けを行うために、CustomEvent インターフェースの代わりにこのインターフェースを使用することが可能です。

interface SelectCustomEvent<T = any> extends CustomEvent {
  detail: SelectChangeEventDetail<T>;
  target: HTMLIonSelectElement;
}

Legacy Select Syntaxからの移行

Ionic 7.0では、よりシンプルなselect構文が導入されました。この新しい構文は、selectの設定に必要な定型文を減らし、アクセシビリティの問題を解決し、開発者のエクスペリエンスを向上させます。

開発者は、この移行を一度に1つのセレクトで実行できます。開発者はレガシー構文を使い続けることができますが、できるだけ早く移行することをお勧めします。

最新の構文の使い方

最新の構文を使うには、2つのステップがあります。

1. ion-labelを削除して、代わりにion-selectのlabelプロパティを使用します。ラベルの配置はion-selectのlabelPlacement` プロパティを使用して設定することができる。
2. fillとshapeの使い方をion-itemからion-select` に移動します。

JavaScript

<!-- Label and Label Position -->

<!-- Before -->
<ion-item>
  <ion-label position="floating">Favorite Fruit:</ion-label>
  <ion-select>...</ion-select>
</ion-item>

<!-- After -->
<ion-item>
  <ion-select label="Favorite Fruit:" label-placement="floating">...</ion-select>
</ion-item>


<!-- Fill -->

<!-- Before -->
<ion-item fill="outline" shape="round">
  <ion-label position="floating">Favorite Fruit:</ion-label>
  <ion-select>...</ion-select>
</ion-item>

<!-- After -->

<!-- Inputs using `fill` should not be placed in ion-item -->
<ion-select fill="outline" shape="round" label="Favorite Fruit:" label-placement="floating">...</ion-select>

Angular

<!-- Label and Label Position -->

<!-- Before -->
<ion-item>
  <ion-label position="floating">Favorite Fruit:</ion-label>
  <ion-select>...</ion-select>
</ion-item>

<!-- After -->
<ion-item>
  <ion-select label="Favorite Fruit:" labelPlacement="floating">...</ion-select>
</ion-item>


<!-- Fill -->

<!-- Before -->
<ion-item fill="outline" shape="round">
  <ion-label position="floating">Favorite Fruit:</ion-label>
  <ion-select>...</ion-select>
</ion-item>

<!-- After -->

<!-- Inputs using `fill` should not be placed in ion-item -->
<ion-select fill="outline" shape="round" label="Favorite Fruit:" labelPlacement="floating">...</ion-select>

React

{/* Label and Label Position */}

{/* Before */}
<IonItem>
  <IonLabel position="floating">Favorite Fruit:</IonLabel>
  <IonSelect>...</IonSelect>
</IonItem>

{/* After */}
<IonItem>
  <IonSelect label="Favorite Fruit:" labelPlacement="floating">...</IonSelect>
</IonItem>


{/* Fill */}

{/* Before */}
<IonItem fill="outline" shape="round">
  <IonLabel position="floating">Favorite Fruit:</IonLabel>
  <IonSelect>...</IonSelect>
</IonItem>

{/* After */}

{/* Inputs using `fill` should not be placed in IonItem */}
<IonSelect fill="outline" shape="round" label="Favorite Fruit:" labelPlacement="floating">...</IonSelect>

Vue

<!-- Label and Label Position -->

<!-- Before -->
<ion-item>
  <ion-label position="floating">Favorite Fruit:</ion-label>
  <ion-select>...</ion-select>
</ion-item>

<!-- After -->
<ion-item>
  <ion-select label="Favorite Fruit:" label-placement="floating">...</ion-select>
</ion-item>


<!-- Fill -->

<!-- Before -->
<ion-item fill="outline" shape="round">
  <ion-label position="floating">Favorite Fruit:</ion-label>
  <ion-select>...</ion-select>
</ion-item>

<!-- After -->

<!-- Inputs using `fill` should not be placed in ion-item -->
<ion-select fill="outline" shape="round" label="Favorite Fruit:" label-placement="floating">...</ion-select>

レガシー構文の使用

Ionicは、アプリが最新のセレクト構文を使用しているかどうかをヒューリスティックで検出します。場合によっては、レガシー構文を使い続けることが望ましい場合もあります。開発者は ion-select の legacy プロパティを true に設定することで、そのInputインスタンスでレガシー構文を使用するように強制できます。

プロパティ

cancelText

Description	The text to display on the cancel button.
Attribute	cancel-text
Type	string
Default	'Cancel'

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. This property is only available when using the modern select syntax.
Attribute	color
Type	"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string & Record<never, never> ｜ undefined
Default	undefined

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

fill

Description	The fill for the item. If "solid" the item will have a background. If "outline" the item will be transparent with a border. Only available in md mode.
Attribute	fill
Type	"outline" ｜ "solid" ｜ undefined
Default	undefined

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	{}

justify

Description	How to pack the label and select within a line. justify does not apply when the label and select are on different lines when labelPlacement is set to "floating" or "stacked". "start": The label and select will appear on the left in LTR and on the right in RTL. "end": The label and select will appear on the right in LTR and on the left in RTL. "space-between": The label and select will appear on opposite ends of the line with space between the two elements.
Attribute	justify
Type	"end" ｜ "space-between" ｜ "start"
Default	'space-between'

label

Description	The visible label associated with the select.
Attribute	label
Type	string ｜ undefined
Default	undefined

labelPlacement

Description	Where to place the label relative to the select. "start": The label will appear to the left of the select in LTR and to the right in RTL. "end": The label will appear to the right of the select in LTR and to the left in RTL. "floating": The label will appear smaller and above the select when the select is focused or it has a value. Otherwise it will appear on top of the select. "stacked": The label will appear smaller and above the select regardless even when the select is blurred or has no value. "fixed": The label has the same behavior as "start" except it also has a fixed width. Long text will be truncated with ellipses ("..."). When using "floating" or "stacked" we recommend initializing the select with either a value or a placeholder.
Attribute	label-placement
Type	"end" ｜ "fixed" ｜ "floating" ｜ "stacked" ｜ "start" ｜ undefined
Default	'start'

legacy

Description	Set the legacy property to true to forcibly use the legacy form control markup. Ionic will only opt components in to the modern form markup when they are using either the aria-label attribute or the label property. As a result, the legacy property should only be used as an escape hatch when you want to avoid this automatic opt-in behavior. Note that this property will be removed in an upcoming major release of Ionic, and all form components will be opted-in to using the modern form markup.
Attribute	legacy
Type	boolean ｜ undefined
Default	undefined

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

shape

Description	The shape of the select. If "round" it will have an increased border radius.
Attribute	shape
Type	"round" ｜ 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) => 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
--background	Background of the select
--border-color Color of the select border
--border-radius Radius of the select border
--border-style Style of the select border
--border-width Width of the select border
--highlight-color-focused The color of the highlight on the select when focused
--highlight-color-invalid The color of the highlight on the select when invalid
--highlight-color-valid The color of the highlight on the select when valid
--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
--ripple-color	The color of the ripple effect on MD mode.

Slots

No slots available for this component.