web-dev-qa-db-fra.com

Ionic2 Ion-select sans OK et Annuler

J'ai construit une application Ionic2 et j'essaie actuellement d'améliorer l'UX. Pour ce faire, j’ai reçu des commentaires qui m’ont fait penser à la possibilité d’avoir un

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

qui, en appuyant dessus, me donnerait la sortie immédiatement et n'attendrait pas que l'utilisateur appuie sur les boutons 'OK' et 'ANNULER' qui apparaissent actuellement et que la fiche d'action ionique ( http://ionicframework.com/docs/ v2/api/components/select/Select/ /) utilise par défaut.

Toutes les suggestions seront grandement appréciées! :)

EDIT:

Comme @sebaferrreras l'a suggéré,

Si le nombre d'options dépasse 6, il utilisera l'interface d'alerte même si la feuille d'action est passée.

Donc, si vous devez utiliser plus de 6 options, vous devrez trouver une solution de contournement car pour le moment, cette fonctionnalité estPAS répertorié sous le Ionic2 docs .

angulartypescriptionic-frameworkionic2ionic3
7
user3153278

La modification de l'API utilisée dans l'élément select (à l'aide de ActionSheet API ) peut être une option.

Pour ce faire, il vous suffit d'ajouter interface="action-sheet" dans l'élément 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>

Je ne suis pas sûr que ce soit une option valable (en termes d'UX) dans votre application. 

EDIT:

Comme vous pouvez le trouver dans Ionic 2 docs

Si le nombre d'options dépasse 6, il utilisera l'interface d'alerte Même si la feuille d'action est passée.

9
sebaferreras

Je sais que ce fil a 7 mois et que le PO est probablement dépassé depuis longtemps, mais comme cette fonctionnalité n'a pas encore été ajoutée au cadre ionique, j'ajoute la solution de contournement que j'ai proposée pour référence. 

CSS PART

Intuitivement, la première chose à faire est d’ajouter du sass/css pour masquer les boutons indésirables. Je l'ai fait en passant une classe CSS "remove-ok" à selectOptions pour mon élément ion-select. (Je supprime seulement le bouton OK, mais si quelqu'un doit également supprimer le bouton d'annulation, il s'agit d'une modification css facile).

En composant: 

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

et en HTML: 

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

Et dans app.scss ajouter:

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

PARTIE DE SCRIPT

Maintenant que le bouton OK est masqué, vous devez fermer en quelque sorte la vue des alertes. 

Pour appeler l'événement click() sur le bouton OK masqué est simple et intuitif, mais vous découvrirez bientôt que, même s'il fonctionne parfaitement sur ionic serve, il ne fonctionnera pas sur un périphérique iOS réel. 

La solution consiste à rechercher une référence à la vue des alertes, à transmettre l'option sélectionnée au gestionnaire de sélection et à fermer la vue. 

Donc, dans ngOnInit dans votre classe de composant, vous aurez besoin de ceci:

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;
                }
              }
            }
        });
    }

Encore une fois, si vous souhaitez également supprimer le bouton Annuler, tenez compte des références CSS dans ce code. 

3
Vahid

Passer la valeur vide: 

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

Cela fonctionne dans mon cas. 

0
Khurshid Ansari