Ionic2离子选择没有确定和取消 [英] 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>

一旦点击，会立即给我输出而不是等待用户按下当前出现的'OK'和'CANCEL'按钮是离子动作表（ 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，即使通过了行动表，也会使用提醒界面。

因此，如果您需要使用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（使用< a href =http://ionicframework.com/docs/v2/api/components/action-sheet/ActionSheet/ =noreferrer> ActionSheet API ）可能是一个选项。

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

为了做到这一点，你只需要在离子中添加 interface =action-sheet -select 元素。

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>

我不确定这是否是您应用中的有效选项（就UX而言）。

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

编辑：

就像你可以在 Ionic 2 docs

如果选项数超过6，即使传递了动作表，也会使用警报界面
。

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

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