メインコンテンツまでスキップ
バージョン: v8

ion-select

shadow

Properties

cancelText

Descriptionキャンセルボタンに表示するテキストです。
Attributecancel-text
Typestring
Default'Cancel'

color

Descriptionアプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです:"primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", と "dark" です.色についての詳細は theming を参照してください。 このプロパティは、modern select構文を使用する場合にのみ利用可能です。
Attributecolor
Type"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined
Defaultundefined

compareWith

Descriptionこのプロパティを使用すると、開発者は、ion-select で選択されたオプションを決定するときにオブジェクトを比較するためのカスタム関数またはプロパティ名を指定できます。指定しない場合、デフォルトの動作では比較に厳密な等式 (===) が使用されます。
Attributecompare-with
Type((currentValue: any, compareValue: any) => boolean) | null | string | undefined
Defaultundefined

disabled

Descriptiontrueの場合、ユーザはセレクトと対話することができません。
Attributedisabled
Typeboolean
Defaultfalse

errorText

DescriptionText that is placed under the select and displayed when an error is detected.
Attributeerror-text
Typestring | undefined
Defaultundefined

expandedIcon

Descriptionセレクトが開いているときに表示するトグルアイコン。定義されている場合、mdモードでのアイコン回転の動作は無効になる。未定義の場合、セレクトが開いているときも閉じているときも toggleIcon が使用される。
Attributeexpanded-icon
Typestring | undefined
Defaultundefined

fill

Descriptionアイテムの塗りつぶし。もし "solid" ならば、アイテムは背景を持つようになります。もし "outline" ならば、アイテムはボーダー付きの透明なものになります。mdモードでのみ使用可能です。
Attributefill
Type"outline" | "solid" | undefined
Defaultundefined

helperText

DescriptionText that is placed under the select and displayed when no error is detected.
Attributehelper-text
Typestring | undefined
Defaultundefined

interface

Descriptionセレクトが使用するインターフェース:action-sheet, popover, alert, または modal`.
Attributeinterface
Type"action-sheet" | "alert" | "modal" | "popover"
Default'alert'

interfaceOptions

Descriptionalertaction-sheetpopoverインターフェースが取ることができる追加オプション。各インターフェイスの作成オプションについては、[ion-alert docs](./alert), [ion-action-sheet docs](./action-sheet), [ion-popover docs](./popover), [ion-modal docs](./modal) を参照してください。 注意:interfaceOptionsalertインターフェイスのinputsbuttons` を上書きしない。
Attributeinterface-options
Typeany
Default{}

justify

Descriptionラベルとセレクトを1行にまとめる方法。labelPlacement"floating" または "stacked" に設定されている場合、ラベルとセレクトが異なる行にあるときは justify は適用されません。"start":ラベルとセレクトはLTRでは左側に、RTLでは右側に表示されます。"end":ラベルとセレクトはLTRでは右に、RTLでは左に表示されます。"space-between"`:ラベルとセレクトは行の反対側の端に表示され、2つの要素の間にはスペースがあります。
Attributejustify
Type"end" | "space-between" | "start" | undefined
Defaultundefined

label

Descriptionセレクトに関連付けられた可視ラベル。 プレーンテキストのラベルをレンダリングする必要がある場合に使用する。 labelプロパティは label スロットよりも優先される。
Attributelabel
Typestring | undefined
Defaultundefined

labelPlacement

Descriptionセレクトに対してラベルを配置する位置。"start":ラベルはLTRではセレクトの左側に、RTLでは右側に表示されます。"end":ラベルはLTRではセレクトの右側に、RTLでは左側に表示されます。"floating":ラベルは、セレクトがフォーカスされているか、セレクトに値がある場合、小さく表示され、セレクトの上に表示されます。それ以外の場合は、セレクトの上に表示されます。"stacked":ラベルは、セレクトがぼやけた状態や値がない状態でも、小さく表示され、セレクトの上に表示されます。"fixed":ラベルの幅が固定される以外は、"start"と同じ動作になります。長いテキストは省略記号("...")で切り捨てられます。"floating"や "stacked"を使用する場合は、selectに valueplaceholder` のどちらかを指定して初期化することをお勧めします。
Attributelabel-placement
Type"end" | "fixed" | "floating" | "stacked" | "start" | undefined
Default'start'

mode

Descriptionmodeは、どのプラットフォームのスタイルを使用するかを決定します。
Attributemode
Type"ios" | "md"
Defaultundefined

multiple

Descriptiontrueの場合、selectは複数の値を受け入れることができる。
Attributemultiple
Typeboolean
Defaultfalse

name

Descriptionフォームデータとともに送信されるコントロールの名前。
Attributename
Typestring
Defaultthis.inputId

okText

Descriptionokボタンに表示するテキストです。
Attributeok-text
Typestring
Default'OK'

placeholder

Descriptionセレクトが空のときに表示するテキストです。
Attributeplaceholder
Typestring | undefined
Defaultundefined

required

Descriptiontrue の場合、スクリーンリーダーは必須項目として読み上げます。このプロパティはアクセシビリティ目的でのみ機能し、値が無効でもフォーム送信は妨げません。
Attributerequired
Typeboolean
Defaultfalse

selectedText

Description選択されたオプションの値の代わりに表示するテキストです。
Attributeselected-text
Typenull | string | undefined
Defaultundefined

shape

Descriptionセレクトの形状を指定します。roundの場合、境界線の半径が大きくなります。
Attributeshape
Type"round" | undefined
Defaultundefined

toggleIcon

Description使用するトグルアイコン。デフォルトは ios モードの場合は chevronExpand で、md モードの場合は caretDownSharp である。
Attributetoggle-icon
Typestring | undefined
Defaultundefined

value

Descriptionセレクトの値です。
Attributevalue
Typeany
Defaultundefined

Events

NameDescription
ionBlurセレクトのフォーカスが外れたときに発行されます。
ionCancel選択がキャンセルされたときに発行されます。
ionChange値が変更されたときに発行される。 プログラムで value プロパティを設定した場合は、このイベントは発生しない。
ionDismissオーバーレイが解除されたときに発行されます。
ionFocusセレクトにフォーカスが当たったときに発行されます。

Methods

open

Descriptionセレクトオーバーレイを開きます。オーバーレイは ion-selectinterface プロパティによって、アラート、アクションシート、ポップオーバーのいずれかになります。
Signatureopen(event?: UIEvent) => Promise<any>

CSS Shadow Parts

NameDescription
containerセレクトテキストまたはプレースホルダーのコンテナ。
error-textSupporting text displayed beneath the select when the select is invalid and touched.
helper-textSupporting text displayed beneath the select when the select is valid.
iconセレクトアイコンのコンテナです。
labelセレクトを表すラベルテキスト。
placeholder値がないときにセレクトに表示されるテキスト。
supporting-textSupporting text displayed beneath the select.
textセレクトの表示値です。

CSS Custom Properties

NameDescription
--backgroundセレクトの背景
--backgroundセレクトの背景
--border-colorセレクトボーダーの色
--border-colorセレクトボーダーの色
--border-radius選択枠の半径。fill="outline "を使う場合、半径が大きいと表示が不均一になることがあります。
--border-radius選択枠の半径。fill="outline "を使う場合、半径が大きいと表示が不均一になることがあります。
--border-styleセレクトボーダーのスタイル
--border-styleセレクトボーダーのスタイル
--border-widthセレクトボーダーの幅
--border-widthセレクトボーダーの幅
--highlight-color-focusedフォーカス時のセレクトのハイライトの色
--highlight-color-focusedフォーカス時のセレクトのハイライトの色
--highlight-color-invalid無効時のセレクトのハイライトの色
--highlight-color-invalid無効時のセレクトのハイライトの色
--highlight-color-valid有効時のセレクトのハイライトの色
--highlight-color-valid有効時のセレクトのハイライトの色
--highlight-heightセレクトのハイライトの高さ。mdモードにのみ適用される。
--highlight-heightセレクトのハイライトの高さ。mdモードにのみ適用される。
--padding-bottomセレクトのBottom Padding
--padding-bottomセレクトのBottom Padding
--padding-endセレクトの方向が左から右の場合はRight Padding、右から左の場合はLeft Paddingを行う
--padding-endセレクトの方向が左から右の場合はRight Padding、右から左の場合はLeft Paddingを行う
--padding-startセレクトの方向が左から右の場合はLeft Padding、右から左の場合はRight Padding
--padding-startセレクトの方向が左から右の場合はLeft Padding、右から左の場合はRight Padding
--padding-topセレクトのTop Padding
--padding-topセレクトのTop Padding
--placeholder-colorセレクトPlaceholderテキストの色
--placeholder-colorセレクトPlaceholderテキストの色
--placeholder-opacityセレクトPlaceholderテキストの不透明度
--placeholder-opacityセレクトPlaceholderテキストの不透明度
--ripple-colorMDモード時のリップルエフェクトの色です。
--ripple-colorMDモード時のリップルエフェクトの色です。

Slots

NameDescription
endセレクトの最後尾に表示するコンテンツ。
labelセレクトに関連付けるラベルテキスト。labelPlacementプロパティを使用して、selectに対するラベルの位置を制御します。ラベルをカスタムHTMLでレンダリングする必要がある場合に使用します。
startセレクトの最先端に表示するコンテンツ。
View Source