ion-select
Selectは、ネイティブの <select> 要素と同様に、オプションのセットからオプションを選択するためのフォームコントロールです。ユーザがselectをタップすると、すべてのオプションを含むダイアログが、選択しやすい大きなリストで表示されます。
selectは、子要素 <ion-select-option> とともに使用する必要があります。子要素のオプションにvalue属性が指定されていない場合、そのtextが値として使用されます。
value が <ion-select> にセットされている場合、オプションはその値に基づいて選択済みになります。
Labels
ラベルは、Selectを説明するために使用します。これらは視覚的に使用することができ、また、ユーザーがSelectにフォーカスしているときには、スクリーンリーダーによって読み上げられます。これにより、ユーザーはSelectの意図を理解しやすくなります。セレクトには、ラベルを割り当てるいくつかの方法があります：
セレクトには、コンポーネントにラベルを指定するためのいくつかのオプションがあります：
labelプロパティ：プレーンテキストのラベルに使用します。labelスロット：カスタム HTML ラベルに使用する。aria-label：スクリーンリーダー用のラベルとして使用されるが、ラベルは表示されない。
Label Placement
ラベルはデフォルトではコンテンツの幅を占めます。開発者は labelPlacement プロパティを使用して、コントロールに対するラベルの配置を制御することができます。ここでは label プロパティを使用しているが、labelPlacement は label スロットと一緒に使用することもできます。
Label Slot
プレーンテキストのラベルは label プロパティで渡すべきですが、カスタムHTMLが必要な場合は、代わりに label スロットで渡すことができます。
No Visible Label
表示するラベルが必要ない場合でも、開発者はaria-labelを指定する必要があります
Single Selection
デフォルトでは、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
複数の選択
Select に multiple 属性を追加することで、ユーザは複数のオプションを選択することができます。複数のオプションが選択可能な場合、アラートまたはポップオーバーオーバーレイは、チェックボックススタイルのオプションリストをユーザに提示します。Select コンポーネントの値は、選択されたすべてのオプション値の配列を受け取ります。
注意: action-sheet インターフェースは複数選択では動作しません。
インタラクションへの応答
Select とユーザのインタラクションを処理する主な方法は、 ionChange イベント、 ionDismiss イベント、 ionCancel イベントです。これらのイベントやselectが発生するその他のイベントの詳細については、Eventsを参照してください。
ConsoleConsole messages will appear here when logged from the example above.オブジェクト値の参照
Selectの値にオブジェクトを使用する場合、Selectの値のidentityはそのままで、サーバやデータベースから取得したオブジェクトのidentityが変わってしまうことがあります。例えば、希望するオブジェクト値を持つ既存のレコードがSelectに読み込まれたが、新しく取得されたselectオプションのIDが異なる場合、このようなことが起こりえます。その結果、Selectは、元のSelectがそのまま残っているにもかかわらず、全く値がないように見えることになります。
デフォルトでは、Selectはオブジェクトの等質性(===)を使用してオプションが選択されているかどうかを判断します。これは compareWith プロパティにプロパティ名または関数を指定することでオーバーライドすることができます。
Using compareWith
ConsoleConsole messages will appear here when logged from the example above.Object Values and Multiple Selection
ConsoleConsole messages will appear here when logged from the example above.Justification
開発者は justify プロパティを使用して、ラベルとコントロールの行の詰め方を制御することができます。
Filled Selects
Material DesignはセレクトにFilledスタイルを提供します。select の fill プロパティは "solid" または "outline" のいずれかに設定できます。
fill スタイルはセレクトコンテナを視覚的に定義するので、fill を使用するセレクトは ion-item では使用しないでください。
Select Buttons
アラートは Cancel と OK の2つのボタンをサポートしている。それぞれのボタンのテキストは cancelText と okText プロパティを使ってカスタマイズすることができます。
action-sheet と popover インターフェースには OK ボタンがありません。オプションのいずれかをクリックすると自動的にオーバーレイが閉じ、その値が選択されます。 popover インターフェースには Cancel ボタンがなく、背景をクリックするとオーバーレイが閉じます。
インターフェイスオプション
Selectはalert、action sheet、popoverインタフェースを使用するので、interfaceOptionsプロパティを通してこれらのコンポーネントにオプションを渡すことができます。これを使用して、カスタムヘッダ、サブヘッダ、CSS クラスなどを渡すことができます。
各インタフェースが受け付けるプロパティについては、ion-alert docs, ion-action-sheet docs, ion-popover docs を参照してください。
注意: alert インターフェイスでは、interfaceOptions は inputs や buttons を上書きしません。
カスタマイズ
Selectコンポーネントには2つのユニットがあり、それぞれ別々にスタイルを設定する必要があります。 ion-select要素は、ビュー上で選択された値、ない場合はプレースホルダ、ドロップダウンのアイコンによって表現されます。インターフェイスは上記のインターフェイスセクションで定義されており、ion-selectをクリックしたときに開くダイアログです。インターフェイスには ion-select-option 要素を追加することで定義されるすべてのオプションが含まれています。以下のセクションでは、これらのスタイリングの違いについて説明します。
Select要素のスタイリング
前述の通り、ion-select要素は値、プレースホルダ、ビューに表示されるアイコンのみで構成されています。これをカスタマイズするには、CSSとCSSカスタムプロパティを組み合わせてスタイルを設定します。
また、必要なブラウザサポートによっては、CSSのシャドウパーツを使用してセレクトのスタイルを設定することもできます。 part を使用することで、要素上の任意の CSS プロパティを対象とすることができることに注意してください。
セレクトインターフェースのスタイリング
インターフェイスのダイアログをカスタマイズするには、そのインターフェイスのドキュメントのカスタマイズのセクションに従ってください：
しかし、セレクト・オプションは、スタイルを簡単にするためにクラスを設定し、オーバーレイ・オプションにクラスを渡すことができます。オプションをカスタマイズする使用例については、セレクト・オプションのドキュメントを参照してください。
Custom Toggle Icons
選択テキストの隣に表示されるアイコンは、toggleIcon プロパティと expandedIcon プロパティを使用して、任意の Ionicon に設定することができます。
アイコンの反転動作
デフォルトでは、セレクトを開いているとき、トグルアイコンは md モードでは自動的に回転し、ios モードでは静止します。この動作はCSSを使ってカスタマイズすることができます。
以下の例ではcustom toggleIconを使って、iosモードでのトグルアイコンの反転動作をより分かりやすく説明しています。
Typeahead Component
Typeaheadまたはオートコンプリート機能は、既存のIonicコンポーネントを使用して構築できます。利用可能なスクリーンスペースを最大限に活用するために、ion-modalを使用することをお勧めします。
Interfaces
SelectChangeEventDetail
interface SelectChangeEventDetail<T = any> {
value: T;
}
SelectCustomEvent
必須ではありませんが、このインターフェイスを CustomEvent インターフェイスの代わりに使用することで、このコンポーネントから発行される Ionic イベントをより強力に片付けすることができます。
interface SelectCustomEvent<T = any> extends CustomEvent {
detail: SelectChangeEventDetail<T>;
target: HTMLIonSelectElement;
}
従来のセレクト構文からの移行
Ionic 7.0では、よりシンプルなセレクト構文が導入されました。この新しい構文は、セレクトのセットアップに必要な定型文を減らし、アクセシビリティの問題を解決し、開発者のエクスペリエンスを向上させます。
開発者はこの移行をセレクトごとに行うことができます。開発者は従来の構文を使い続けることもできますが、できるだけ早く移行することをお勧めします。
最新構文の使用
最新の構文を使用するには、2つのステップがあります：
ion-labelを削除し、代わりにion-selectのlabelプロパティを使用する。ラベルの配置はion-selectのlabelPlacementプロパティで設定できる。
- fill
とshapeをion-itemからion-select` に移動する。
- JavaScript
- Angular
- React
- 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>
<!-- 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>
{/* 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>
<!-- 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 に設定することで、その入力インスタンスにレガシー構文を使用させることができます。
プロパティ
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 ｜ 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 |
expandedIcon
| Description | The toggle icon to show when the select is open. If defined, the icon rotation behavior in md mode will be disabled. If undefined, toggleIcon will be used for when the select is both open and closed. |
| Attribute | expanded-icon |
| Type | string ｜ undefined |
| Default | undefined |
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. Use this if you need to render a plaintext label. The label property will take priority over the label slot if both are used. |
| 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 |
toggleIcon
| Description | The toggle icon to use. Defaults to chevronExpand for ios mode, or caretDownSharp for md mode. |
| Attribute | toggle-icon |
| Type | 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) => Promise<any> |
CSS Shadow Parts
| Name | Description |
|---|---|
container | The container for the selected text or placeholder. |
icon | The select icon container. |
label | The label text describing the select. |
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. A large radius may display unevenly when using fill="outline"; if needed, use shape="round" instead or increase --padding-start. |
--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
| Name | Description |
|---|---|
label | The label text to associate with the select. Use the labelPlacement property to control where the label is placed relative to the select. Use this if you need to render a label with custom HTML. |