web-dev-qa-db-ja.com

Ionic2イオン-OKなしで選択してキャンセル

Ionic2アプリを作成し、現在UXを改善しようとしています。それをするために、私は私に持っている方法があるかどうかを考えさせたいくつかのフィードバックを受け取りました

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

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

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

編集：

@sebaferrrerasが示唆しているように、

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

したがって、6つ以上のオプションを使用する必要がある場合は、現時点では回避策を見つける必要があります。この機能は[〜＃〜] not [〜＃〜]listedunder theIonic2 docs。

angulartypescriptionic-frameworkionic2ionic3
8
user3153278

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 docs

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

9
sebaferreras

このスレッドは7か月前のものであり、OPはおそらくこの質問をはるかに過ぎていますが、機能はまだionicフレームワークに追加されていないため、私が思いついた回避策を追加しています他の人の参照。

CSSパーツ

直感的に最初に行う必要があるのは、不要なボタンを非表示にするためにsass/cssを追加することです。これを行うには、_ion-select_要素のcssクラス "remove-ok"をselectOptionsに渡します。 （私はOKボタンを削除するだけですが、誰かがキャンセルボタンも削除する必要がある場合、それは簡単なcssの変更です）。

コンポーネント内：

_this.selectOptions = {
      cssClass: 'remove-ok'
    };
_

およびHTMLの場合：

_<ion-select [selectOptions]="selectOptions">
_

そして、_app.scss_に以下を追加します。

_.remove-ok {
    .alert-button:nth-child(2) {
        display: none;
    }
}
_

スクリプトパート

[OK]ボタンが非表示になっているので、アラートビューを何らかの方法で閉じる必要があります。

非表示の[OK]ボタンでclick()イベントを呼び出すのは簡単で直感的ですが、_ionic serve_では完全に機能しますが、実際のiOSデバイスでは機能しないことがすぐにわかります。

解決策は、アラートビューへの参照を見つけ、チェックされたオプションを選択ハンドラーに渡し、最後にビューを閉じることです。

したがって、コンポーネントクラスのngOnInitには、次のものが必要です。

_ngOnInit() {
        let root = this.viewController.instance.navCtrl._app._appRoot;
        document.addEventListener('click', function(event){
        let btn = <HTMLLIElement> document.querySelector('.remove-ok .alert-button-default:nth-child(2)');
        let target = <HTMLElement> event.target;
        if(btn && target.className == 'alert-radio-label')
        {
              let view = root._overlayPortal._views[0];
              let inputs = view.instance.d.inputs;
              for(let input of inputs) {
                if(input.checked) {
                  view.instance.d.buttons[1].handler([input.value]);
                  view.dismiss();
                  break;
                }
              }
            }
        });
    }
_

繰り返しますが、[キャンセル]ボタンも削除する場合は、このコードのcss参照に注意してください。

4
Vahid

空の値を渡す：

<ion-select okText="" cancelText="">
      <ion-option>
      </ion-option>
    </ion-select>

私の場合は機能しています。

1
Khurshid Ansari