Customize Actionsheet Ionic 3


I have an issue that I must resolve. I know the ActionSheetController is a native component and quite frankly there are some limitations when trying to customize it’s use.

I want to accomplish this:


Any ideas? If it doesn’t truly require ActionSheetController by all means I am open for ideas.

Did you find the solution?

you may want to try customizing ModalController instead, and simulating the appearance.


const modal = await this.modalCtrl.create({
    component: CustomModalComponent,
    cssClass: 'custom-modal'
await alert.present()


:root {
    // ion-colors...

    .custom-modal .modal-wrapper {  // cssClass value + modal-wrapper class
        //customized modal css

Hope this can help!

1 Like