9

Ionic2 アプリを作成しましたが、現在 UX の改善に取り組んでいます。そのために、何か方法はないかと考えさせられるフィードバックをいただきました。

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

これをタップすると、すぐに出力が得られ、現在表示されている「OK」ボタンと「キャンセル」ボタンをユーザーが押すのを待たずに、イオン アクション シート ( http://ionicframework.com/docs/v2/ api/components/select/Select/ ) はデフォルトで使用します。

どんな提案でも大歓迎です！:)

編集：

@sebaferrreras が提案したように、

オプションの数が 6 を超えると、action-sheet が渡されてもアラート インターフェイスが使用されます。

したがって、6 つ以上のオプションを使用する必要がある場合は、現時点では回避策を見つける必要があります。この機能は、Ionic2 のドキュメントには記載されていません 。

4

4 に答える 4

9

select 要素で使用される API を ( ActionSheet APIを使用して) 変更することは、オプションである可能性があります。

interface="action-sheet"そのためには、ion-select要素を追加するだけです。

  <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 の観点から) 有効なオプションであるかどうかはわかりません。

編集：

Ionic 2のドキュメントにあるように

オプションの数が 6 を超えると、action-sheet が渡されてもアラート インターフェイスが使用されます。

于 2016-08-18T10:29:13.360 に答える
0

Ionic バージョン 6.12.3 で行われた実装:

HTML でion-select. 属性を追加し[interfaceOptions]="randomOptions"ます:

<ion-select interface="action-sheet" [interfaceOptions]="randomOptions" ngModel>
    <ion-select-option value="...">Option #1</ion-select-option>
    <ion-select-option value="...">Option #2</ion-select-option>
</ion-select>

TS で、HTML で指定した正確な名前でパブリック変数を作成し、目的のオプションを追加しますion-select。属性を追加しますcssClass: 'randomCSSClassName':

public randomOptions: any = { 
    cssClass: 'randomCSSClassName',
    ...
};

最後に、global.scssTS で指定したものとまったく同じ名前の CSS クラスをファイルに追加し、次のようにクラス.action-sheet-group-cancelを追加しdisplay: noneます。

.randomCSSClassName {
    .action-sheet-group-cancel {
        display: none;
    }
}

この実装は、Web、iOS、および Android でテストされました。それは完全に機能します！

于 2021-01-10T16:16:38.550 に答える