Ionic2 离子选择没有 OK 和 Cancel [英] Ionic2 Ion-select without OK and Cancel

问题描述

我已经构建了一个 Ionic2 应用程序，我目前正在尝试改进用户体验.为此，我收到了一些反馈，这些反馈让我想到是否有办法实现

I have built an Ionic2 app and I am currently trying to improve the UX. To do that, I received some feedback that made me think of whether there is a way of having a

    <ion-select>
      <ion-option>
      </ion-option>
    </ion-select>

点击后，会立即给我输出，而不是等待用户按下离子操作表当前出现的确定"和取消"按钮(http://ionicframework.com/docs/v2/api/components/select/Select/) 使用默认.

which upon tapped on, would give me the output straight away and not wait for the user to press on the currently appearing 'OK'and 'CANCEL' buttons that the ionic action sheet(http://ionicframework.com/docs/v2/api/components/select/Select/) uses by default.

任何建议将不胜感激！:)

Any suggestions will be greatly appreciated! :)

正如@sebaferrreras 所建议的，

As @sebaferrreras has suggested,

如果选项数量超过6个，即使action-sheet通过也会使用alert界面.

因此，如果您需要使用 6 个以上的选项，您将不得不找到一种解决方法，因为目前，此功能不 列出在 Ionic2 文档.

So if you need to use more than 6 options, you are going to have to find a workaround as for the moment, this functionality is NOT listed under the Ionic2 docs.

推荐答案

更改 select 元素中使用的 API(通过使用 ActionSheet API) 可能是一个选项.

Changing the API used in the select element (by using the ActionSheet API) could be an option.

为此，您只需在 ion-select 元素中添加 interface="action-sheet".

In order to do that, you only need to add interface="action-sheet" in the ion-select element.

  <ion-item>
    <ion-label>Gender</ion-label>
    <ion-select interface="action-sheet">
      <ion-option value="f" selected="true">Female</ion-option>
      <ion-option value="m">Male</ion-option>
    </ion-select>
  </ion-item>

我不确定这是否是您应用中的有效选项(就用户体验而言).

I'm not sure if that's a valid option (in terms of UX) in your app.

就像您可以在 Ionic2 个文档

如果选项数量超过6个，会使用alert界面即使通过了操作表.

If the number of options exceed 6, it will use the alert interface even if action-sheet is passed.

这篇关于Ionic2 离子选择没有 OK 和 Cancel的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！