ion-select

shadow

选择是用于从一组选项中选择一个或多个选项的表单控件。当用户点击选择时，会出现一个对话框，其中包含一个大型且易于选择的列表中的所有选项。

¥Selects are form controls to select an option, or options, from a set of options. When a user taps the select, a dialog appears with all of the options in a large, easy to select list.

select 应与子 <ion-select-option> 元素一起使用。如果子选项未指定 value 属性，则其文本将用作值。

¥A select should be used with child <ion-select-option> elements. If the child option is not given a value attribute then its text will be used as the value.

如果在 <ion-select> 上设置了 value，则将根据该值选择所选选项。

¥If value is set on the <ion-select>, the selected option will be chosen based on that value.

label 属性：用于纯文本标签

¥label property: used for plaintext labels
label 插槽：用于自定义 HTML 标签

¥label slot: used for custom HTML labels
aria-label：用于为屏幕阅读器提供标签，但不添加可见标签

¥aria-label: used to provide a label for screen readers but adds no visible label

标签放置

¥Label Placement

默认情况下，标签将占据其内容的宽度。开发者可以使用 labelPlacement 属性来控制标签相对于控件的放置方式。虽然此处使用了 label 属性，但 labelPlacement 也可以与 label 插槽一起使用。

¥Labels will take up the width of their content by default. Developers can use the labelPlacement property to control how the label is placed relative to the control. While the label property is used here, labelPlacement can also be used with the label slot.

标签槽

¥Label Slot

虽然纯文本标签应通过 label 属性传入，但如果需要自定义 HTML，则可以通过 label 插槽传递。

¥While plaintext labels should be passed in via the label property, if custom HTML is needed, it can be passed through the label slot instead.

无可见标签

¥No Visible Label

如果不需要可见标签，开发者仍应提供 aria-label，以便屏幕阅读器可以访问选择。

¥If no visible label is needed, developers should still supply an aria-label so the select is accessible to screen readers.

单选

¥Single Selection

默认情况下，选择仅允许用户选择一个选项。警报界面向用户提供单选按钮样式的选项列表。选择组件的值接收所选选项的值。

¥By default, the select allows the user to select only one option. The alert interface presents users with a radio button styled list of options. The select component's value receives the value of the selected option's value.

下面的键盘交互部分描述了单选的键盘交互。

¥Keyboard interactions for single selection are described in the Keyboard Interactions section below.

多重选择

¥Multiple Selection

通过添加 multiple 属性来选择，用户可以选择多个选项。当可以选择多个选项时，警报、弹出窗口或模式叠加层会向用户显示复选框样式的选项列表。选择组件的值接收所有选定选项值的数组。

¥By adding the multiple attribute to select, users are able to select multiple options. When multiple options can be selected, the alert, popover, or modal overlay presents users with a checkbox styled list of options. The select component's value receives an array of all of the selected option values.

注意

action-sheet 接口不支持多选。

¥The action-sheet interface is not supported with multiple selection.

下面的键盘交互部分描述了用于多项选择的键盘交互。

¥Keyboard interactions for multiple selection are described in the Keyboard Interactions section below.

接口

¥Interfaces

默认情况下，select 使用 ion-alert 打开警报中的选项叠加层。通过将 action-sheet、popover 或 modal 分别传递给 interface 属性，可以将界面更改为使用 ion-action-sheet、ion-popover 或 ion-modal。请继续阅读其他部分，了解不同接口的限制。

¥By default, select uses ion-alert to open up the overlay of options in an alert. The interface can be changed to use ion-action-sheet, ion-popover, or ion-modal by passing action-sheet, popover, or modal, respectively, to the interface property. Read on to the other sections for the limitations of the different interfaces.

警报

¥Alert

动作表

¥Action Sheet

¥Popover

¥Modal

响应交互

¥Responding to Interaction

处理用户与选择交互的主要方式是 ionChange、ionDismiss 和 ionCancel 事件。有关这些事件和其他选择火灾的事件的更多详细信息，请参阅事件。

¥The main ways of handling user interaction with the select are the ionChange, ionDismiss, and ionCancel events. See Events for more details on these and other events that select fires.

Console

Console messages will appear here when logged from the example above.

对象值引用

¥Object Value References

当使用对象作为选择值时，如果这些对象来自服务器或数据库，则它们的标识可能会发生更改，而所选值的标识保持不变。例如，当具有所需对象值的现有记录加载到选择中，但新检索的选择选项现在具有不同的标识时，可能会发生这种情况。这将导致选择看起来根本没有任何值，即使原始选择仍然完好无损。

¥When using objects for select values, it is possible for the identities of these objects to change if they are coming from a server or database, while the selected value's identity remains the same. For example, this can occur when an existing record with the desired object value is loaded into the select, but the newly retrieved select options now have different identities. This will result in the select appearing to have no value at all, even though the original selection in still intact.

默认情况下，选择使用严格相等 (===) 来确定是否选择某个选项。这可以通过向 compareWith 属性提供属性名称或函数来覆盖。

¥By default, the select uses strict equality (===) to determine if an option is selected. This can be overridden by providing a property name or a function to the compareWith property.

使用比较

¥Using compareWith

Console

Console messages will appear here when logged from the example above.

对象值和多重选择

¥Object Values and Multiple Selection

Console

Console messages will appear here when logged from the example above.

齐行

¥Justification

开发者可以使用 justify 属性来控制标签和控件如何打包在一行上。

¥Developers can use the justify property to control how the label and control are packed on a line.

填充选择

¥Filled Selects

Material Design 提供填充样式供选择。选择的 fill 属性可以设置为 "solid" 或 "outline"。

¥Material Design offers filled styles for a select. The fill property on the select can be set to either "solid" or "outline".

通过将选择的 mode 设置为 md，可以在 iOS 上使用填充选择。

¥Filled selects can be used on iOS by setting the select's mode to md.

警告

由于组件之间的样式冲突，使用 fill 的选择不应在 ion-item 中使用。

¥Selects that use fill should not be used in an ion-item due to styling conflicts between the components.

选择按钮

¥Select Buttons

该警报支持两个按钮：Cancel 和 OK。每个按钮的文本都可以使用 cancelText 和 okText 属性进行自定义。

¥The alert supports two buttons: Cancel and OK. Each button's text can be customized using the cancelText and okText properties.

action-sheet 和 popover 界面没有 OK 按钮，单击任何选项都会自动关闭叠加层并选择该值。popover 界面没有 Cancel 按钮，点击背景将关闭叠加层。

¥The action-sheet and popover interfaces do not have an OK button, clicking on any of the options will automatically close the overlay and select that value. The popover interface does not have a Cancel button, clicking on the backdrop will close the overlay.

modal 界面在标题中有一个 Close 按钮。此按钮仅负责关闭模式。单击此按钮后或使用其他方法关闭模式后，所做的任何选择都将保留。

¥The modal interface has a single Close button in the header. This button is only responsible for dismissing the modal. Any selections made will persist after clicking this button or if the modal is dismissed using an alternative method.

接口选项

¥Interface Options

由于 select 使用 alert、action sheet、popover 和 modal 界面，因此可以通过 interfaceOptions 属性将选项传递给这些组件。这可用于传递自定义标头、子标头、CSS 类等。

¥Since select uses the alert, action sheet, popover, and modal interfaces, options can be passed to these components through the interfaceOptions property. This can be used to pass a custom header, subheader, css class, and more.

有关每个接口接受的属性，请参阅 Ionic 警报文档、Ionic 作用表文档、ion-popover 文档和 ion-modal 文档。

¥See the ion-alert docs, ion-action-sheet docs, ion-popover docs, and ion-modal docs for the properties that each interface accepts.

注意：interfaceOptions 不会使用 alert 接口覆盖 inputs 或 buttons。

¥Note: interfaceOptions will not override inputs or buttons with the alert interface.

起始槽和结束槽

¥Start and End Slots

start 和 end 插槽可用于在选择的两侧放置图标、按钮或前缀/后缀文本。如果单击槽内容，则选择将不会打开。

¥The start and end slots can be used to place icons, buttons, or prefix/suffix text on either side of the select. If the slot content is clicked, the select will not open.

注意

在大多数情况下，放置在这些插槽中的图标组件应具有 aria-hidden="true"。请参阅图标辅助功能文档了解更多信息。

¥In most cases, Icon components placed in these slots should have aria-hidden="true". See the Icon accessibility docs for more information.

如果插槽内容需要进行交互，则应将其封装在交互元素中，例如按钮。这确保了可以通过选项卡切换到内容。

¥If slot content is meant to be interacted with, it should be wrapped in an interactive element such as a Button. This ensures that the content can be tabbed to.

定制化

¥Customization

Select 组件由两个单元组成，每个单元都需要单独设置样式。ion-select 元素在视图上由所选值或占位符（如果没有）和下拉图标表示。该界面在上面的接口部分中定义，是单击 ion-select 时打开的对话框。该界面包含通过添加 ion-select-option 元素定义的所有选项。以下部分将介绍这些样式之间的差异。

¥There are two units that make up the Select component and each need to be styled separately. The ion-select element is represented on the view by the selected value(s), or placeholder if there is none, and dropdown icon. The interface, which is defined in the Interfaces section above, is the dialog that opens when clicking on the ion-select. The interface contains all of the options defined by adding ion-select-option elements. The following sections will go over the differences between styling these.

设置选择元素的样式

¥Styling Select Element

如前所述，ion-select 元素仅包含值或占位符以及视图上显示的图标。要自定义此样式，请结合使用 CSS 和任何 CSS 自定义属性。

¥As mentioned, the ion-select element consists only of the value(s), or placeholder, and icon that is displayed on the view. To customize this, style using a combination of CSS and any of the CSS custom properties.

或者，根据所需的浏览器支持，可以使用 CSS 阴影部分来设置选择的样式。请注意，通过使用 ::part，可以将元素上的任何 CSS 属性作为目标。

¥Alternatively, depending on the browser support needed, CSS shadow parts can be used to style the select. Notice that by using ::part, any CSS property on the element can be targeted.

样式选择界面

¥Styling Select Interface

自定义界面对话框应按照该界面文档中的样式部分（CSS 阴影部分、CSS 自定义属性和插槽）进行：

¥Customizing the interface dialog should be done by following the styling sections (CSS shadow parts, CSS custom properties, and slots) in that interface's documentation:

但是，“选择选项”确实设置了一个类，以便更轻松地进行样式设置，并允许将类传递给覆盖选项，请参阅选择选项文档了解自定义选项的使用示例。

¥However, the Select Option does set a class for easier styling and allows for the ability to pass a class to the overlay option, see the Select Options documentation for usage examples of customizing options.

自定义切换图标

¥Custom Toggle Icons

可以使用 toggleIcon 和/或 expandedIcon 属性将显示在所选文本旁边的图标设置为任何 Ionic 康。

¥The icon that displays next to the select text can be set to any Ionicon using the toggleIcon and/or expandedIcon properties.

图标翻转行为

¥Icon Flip Behavior

默认情况下，当选择打开时，切换图标将在 md 模式下自动旋转，并在 ios 模式下保持静态。可以使用 CSS 自定义此行为。

¥By default, when the select is open, the toggle icon will automatically rotate on md mode and remain static on ios mode. This behavior can be customized using CSS.

下面的示例还使用定制 toggleIcon 来更好地演示 ios 上的翻转行为，因为默认图标是垂直对称的。

¥The below example also uses a custom toggleIcon to better demonstrate the flip behavior on ios, since the default icon is vertically symmetrical.

预输入组件

¥Typeahead Component

可以使用现有的 Ionic 组件构建提前输入或自动补齐功能。我们建议使用 ion-modal 以充分利用可用的屏幕空间。

¥Typeahead or autocomplete functionality can be built using existing Ionic components. We recommend using an ion-modal to make the best use of the available screen space.

接口

¥Interfaces

SelectChangeEventDetail

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

SelectCustomEvent

虽然不是必需的，但可以使用此接口代替 CustomEvent 接口，以便使用从此组件发出的 Ionic 事件进行更强的键入。

¥While not required, this interface can be used in place of the CustomEvent interface for stronger typing with Ionic events emitted from this component.

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

从旧版 Select 语法迁移

¥Migrating from Legacy Select Syntax

Ionic 7.0 中引入了更简单的选择语法。这种新语法减少了设置选择所需的样板文件，解决了可访问性问题，并改善了开发者体验。

¥A simpler select syntax was introduced in Ionic 7.0. This new syntax reduces the boilerplate required to setup an select, resolves accessibility issues, and improves the developer experience.

开发者可以一次选择一项来执行此迁移。虽然开发者可以继续使用旧语法，但我们建议尽快迁移。

¥Developers can perform this migration one select at a time. While developers can continue using the legacy syntax, we recommend migrating as soon as possible.

使用现代语法

¥Using the Modern Syntax

使用现代语法涉及两个步骤：

¥Using the modern syntax involves two steps:

删除 ion-label 并使用 ion-select 上的 label 属性。可以使用 ion-select 上的 labelPlacement 属性来配置标签的位置。

¥Remove ion-label and use the label property on ion-select instead. The placement of the label can be configured using the labelPlacement property on ion-select.
将 fill 和 shape 的所有用法从 ion-item 移至 ion-select。

¥Move any usage of fill and shape from ion-item on to 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>

使用旧语法

¥Using the Legacy Syntax

Ionic 使用启发式方法来检测应用是否使用现代选择语法。在某些情况下，最好继续使用旧语法。开发者可以将 ion-select 上的 legacy 属性设置为 true，以强制该输入实例使用旧语法。

¥Ionic uses heuristics to detect if an app is using the modern select syntax. In some instances, it may be preferable to continue using the legacy syntax. Developers can set the legacy property on ion-select to true to force that instance of the input to use the legacy syntax.

无障碍

¥Accessibility

键盘交互

¥Keyboard Interactions

Ionic 的键盘交互遵循 Web 的实现模式，而不是原生 iOS 选择，以在所有平台上获得一致的体验。

¥Ionic's keyboard interactions follow the implementation patterns of the web instead of the native iOS select for a consistent experience across all platforms.

当满足以下条件时，这些键盘交互适用于所有 ion-select 元素：

¥These keyboard interactions apply to all ion-select elements when the following conditions are met:

选择已关闭。

¥The select is closed.
选择是集中的。

¥The select is focused.
该选择未被禁用。

¥The select is not disabled.

密钥	描述
`Enter`	打开叠加层并聚焦于第一个选定的选项。如果没有选择的选项，则重点关注第一个选项。
`Space`	打开叠加层并聚焦于第一个选定的选项。如果没有选择的选项，则重点关注第一个选项。

单选

¥Single Selection

单选键盘交互沿袭单选框的 ARIA 实现模式。

¥Single selection keyboard interaction follows the ARIA implementation patterns of a radio.

当显示并聚焦覆盖层时，这些键盘交互适用于 ion-action-sheet、ion-alert、ion-popover 和 ion-modal 元素。

¥These keyboard interactions apply to ion-action-sheet, ion-alert, ion-popover, and ion-modal elements when the overlay is presented and focused.

密钥	描述
`ArrowDown`	聚焦并选择列表中的下一个选项。如果没有下一个选项，选择将循环到第一个选项。
`ArrowLeft`	聚焦并选择列表中的上一个选项。如果没有上一个选项，则选择将循环到最后一个选项。
`ArrowRight`	聚焦并选择列表中的下一个选项。如果没有下一个选项，选择将循环到第一个选项。
`ArrowUp`	聚焦并选择列表中的上一个选项。如果没有上一个选项，则选择将循环到最后一个选项。
`Enter`	如果某个选项获得焦点，它将选择该选项。没有 'OK' 按钮的叠加层将立即提交值，关闭叠加层并将焦点返回到 `ion-select` 元素。如果 'OK' 按钮获得焦点，它将保存用户的选择，关闭叠加层并返回焦点到 `ion-select` 元素。
`Escape`	关闭叠加层而不更改提交的选项。将焦点返回到 `ion-select` 元素。
`Space`	如果未选中聚焦的单选按钮，则取消选中当前选中的单选按钮并选中聚焦的单选按钮。否则，什么也不做。如果覆盖层没有 'OK' 按钮，则该值将立即提交，并且覆盖层将消失。
`Tab`	将焦点移至叠加层上的下一个可聚焦元素（取消按钮、'OK' 按钮或所选内容或第一个选项）。如果下一个可聚焦元素是一个选项，那么它将聚焦于所选选项，否则它将聚焦于第一个选项。

多重选择

¥Multiple Selection

多选键盘交互遵循复选框的 ARIA 实现模式。

¥Multiple selection keyboard interaction follows the ARIA implementation patterns of a checkbox.

当显示覆盖层并启用多选时，这些键盘交互适用于 ion-alert、ion-popover 和 ion-modal 元素。

¥These keyboard interactions apply to ion-alert, ion-popover, and ion-modal elements when the overlay is presented and multiple selection is enabled.

密钥	描述
`Enter`	当 'OK' 按钮获得焦点时，它将保存用户的选择、消除覆盖并将焦点返回到 `ion-select` 元素。
`Escape`	关闭叠加层而不更改提交的选项。将焦点返回到 `ion-select` 元素。
`Space`	选择或取消选择当前聚焦的选项。这不会取消选择其他选定的选项。如果覆盖层没有 'OK' 按钮，则该值将立即提交。
`Tab`	将焦点移至叠加层上的下一个可聚焦元素（取消按钮、'OK' 按钮或任何选项）。如果下一个可聚焦元素是选项列表，那么它应该迭代每个选项。

属性

¥Properties

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	This property allows developers to specify a custom function or property name for comparing objects when determining the selected option in the ion-select. When not specified, the default behavior will use strict equality (===) for comparison.
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`, `alert`, or `modal`.
Attribute	`interface`
Type	`"action-sheet" ｜ "alert" ｜ "modal" ｜ "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, the ion-popover docs, and the ion-modal 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" ｜ undefined`
Default	`undefined`

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'`

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`

事件

¥Events

Name	Description	Bubbles
`ionBlur`	Emitted when the select loses focus.	`true`
`ionCancel`	Emitted when the selection is cancelled.	`true`
`ionChange`	Emitted when the value has changed. This event will not emit when programmatically setting the `value` property.	`true`
`ionDismiss`	Emitted when the overlay is dismissed.	`true`
`ionFocus`	Emitted when the select has focus.	`true`

方法

¥Methods

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 阴影部分

¥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 自定义属性

¥CSS Custom Properties

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
`--highlight-height`	The height of the highlight on the select. Only applies to md mode.
`--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.

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
`--highlight-height`	The height of the highlight on the select. Only applies to md mode.
`--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
`end`	Content to display at the trailing edge of the select.
`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.
`start`	Content to display at the leading edge of the select.

标签​

标签放置​

标签槽​

无可见标签​

单选​

多重选择​

接口​

警报​

动作表​

弹出窗口​

模态​

响应交互​

对象值引用​

使用比较​

对象值和多重选择​

齐行​

填充选择​

选择按钮​

接口选项​

起始槽和结束槽​

定制化​

设置选择元素的样式​

样式选择界面​

自定义切换图标​

图标翻转行为​

预输入组件​

接口​

SelectChangeEventDetail​

SelectCustomEvent​

从旧版 Select 语法迁移​

使用现代语法​

使用旧语法​

无障碍​

键盘交互​

单选​

多重选择​

属性​

cancelText​

color​

compareWith​

disabled​

expandedIcon​

fill​

interface​

interfaceOptions​

justify​

label​

labelPlacement​

mode​

multiple​

name​

okText​

placeholder​

selectedText​

shape​

toggleIcon​

value​

事件​

方法​

open​

CSS 阴影部分​

CSS 自定义属性​

插槽​

目录

标签

标签放置

标签槽

无可见标签

单选

多重选择

接口

警报

动作表

弹出窗口

模态

响应交互

对象值引用

使用比较

对象值和多重选择

齐行

填充选择

选择按钮

接口选项

起始槽和结束槽

定制化

设置选择元素的样式

样式选择界面

自定义切换图标

图标翻转行为

预输入组件

接口

SelectChangeEventDetail

SelectCustomEvent

从旧版 Select 语法迁移

使用现代语法

使用旧语法

无障碍

键盘交互

单选

多重选择

属性

cancelText

color

compareWith

disabled

expandedIcon

fill

interface

interfaceOptions

justify

label

labelPlacement

mode

multiple

name

okText

placeholder

selectedText

shape

toggleIcon

value

事件

方法

open

CSS 阴影部分

CSS 自定义属性

插槽