Geek Answers Handbook

Ionic2 Ion-select without OK and Cancel

I have created an Ionic2 application and am currently trying to improve UX. To do this, I got some reviews that made me think about whether there was a way

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

which, after clicking on it, will immediately give me an exit and do not wait until the user clicks on the current OK and CANCEL buttons that the ionic action sheet ( http://ionicframework.com/docs/v2/api/components/select/Select/ ) by by default.

Any suggestions would be greatly appreciated! :)

EDIT:

As suggested by @sebaferrreras,

If the number of options exceeds 6, it will use the notification interface, even if an action sheet is sent.

So, if you need to use more than 6 options, you will need to find a workaround at the moment, this functionality is NOT listed in the Ionic2 docs section.

+7
source share
3 answers

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

To do this, you need to add interface="action-sheet" to 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>

I'm not sure if this is a valid option (from a UX perspective) in your application.

EDIT:

As you can find in the Ionic 2 docs

If the number of options exceeds 6, it will use the notification interface even if an action sheet is transferred.

+9
source

I know that this branch is 7 months old, and the OP probably passed this question a long time ago, but since this feature has not yet been added to the ion infrastructure, I am adding a workaround that I came up with for linking other people.

PART PART

Intuitively, the first thing you need to do is add some sass / css to hide the unwanted buttons. I did this by passing the css class "remove-ok" to selectOptions for my ion-select element. (I only remove the OK button, but if someone needs to remove the cancel button as well, this is a simple css change).

In component:

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

and in HTML:

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

And in app.scss add:

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

SCRIPT PART

Now that the OK button is hidden, you need to somehow close the warning window.

To trigger the click() event on a hidden OK button is simple and intuitive, but soon you will find out that although it works fine on ionic serve , it will not work on a real iOS device.

The solution is to find a link to the alert view, pass the selected option to the selection handler, and finally reject the view.

So, in ngOnInit in your component class, you will need the following:

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

Again, if you intend to remove the Cancel button, think of the css links in this code.

+3
source

Pass an empty value:

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

This works in my case.

0
source

More articles:


All Articles