angular - Ionic2 Ion-select fără OK și Anulare

Am construit o aplicație Ionic2 și în prezent încerc să îmbunătățesc UX-ul. Pentru a face asta, am primit câteva feedback-uri care m-au făcut să mă gândesc dacă există o modalitate de a avea un

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

care, odată apăsat, mi-ar oferi rezultatul imediat și nu ar aștepta ca utilizatorul să apese pe butoanele „OK” și „CANCEL” care apar în prezent și pe care foaia de acțiuni Ionic (http://ionicframework.com/docs/v2/api/components/select/Select/) le folosește implicit.

Orice sugestie va fi foarte apreciată! :)

EDITARE:

Așa cum a sugerat @sebaferrreras,

Dacă numărul de opțiuni depășește 6, se va folosi interfața de alertă chiar dacă se transmite action-sheet.

Deci, dacă trebuie să folosești mai mult de 6 opțiuni, va trebui să găsești o soluție alternativă, deoarece în acest moment, această funcționalitate NU este listată în documentația Ionic2.

Răspuns #1

Schimbarea API-ului folosit în elementul select (prin utilizarea API-ului ActionSheet) ar putea fi o opțiune.

Pentru a face asta, trebuie doar să adăugați interface="action-sheet" în elementul 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>

Nu sunt sigur dacă aceasta este o opțiune validă (în termeni de UX) în aplicația ta.

EDITARE:

Exact așa cum poți găsi în documentația Ionic 2

Dacă numărul de opțiuni depășește 6, se va folosi interfața de alertă chiar dacă este trecut action-sheet.

Răspunsul #2

Știu că acest fir de discuție are 7 luni și că autorul inițial probabil a trecut de această întrebare de mult, dar deoarece funcționalitatea încă nu a fost adăugată în cadrul Ionic, adaug soluția mea alternativă pe care am descoperit-o pentru referința altor persoane.

PARTEA CSS

Intuitiv, primul lucru pe care trebuie să-l faci este să adaugi niște sass/css pentru a ascunde butoanele nedorite. Am făcut asta prin atribuirea unei clase CSS „remove-ok” la selectOptions pentru elementul meu ion-select. (Eu elimin doar butonul OK, dar dacă cineva are nevoie să elimine și butonul de anulare, este o modificare CSS ușor de realizat).

În componentă:

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

și în HTML:

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

Și în app.scss adaugă:

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

PARTEA SCENARIULUI

Acum că butonul OK este ascuns, va trebui cumva să închizi fereastra de alertă.

Invocarea evenimentului click() pe butonul OK ascuns este simplă și intuitivă, dar vei descoperi curând că, deși funcționează perfect pe ionic serve, nu va funcționa pe un dispozitiv iOS real.

Soluția este să găsești referința la vizualizarea de alertă, să transmiți opțiunea bifată către handler-ul de selectare și, în final, să închizi vizualizarea.

Deci, în ngOnInit din clasa componentului tău, vei avea nevoie de asta:

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

Din nou, dacă intenționezi să elimini și butonul Anulare, fii atent la referințele CSS din acest cod.