Customize Actionsheet Ionic 3

Ionic Framework ionic-v3
1

Greetings!

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:

image

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

2

Did you find the solution?

3

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

page.component.ts

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

variable.scss

:root {
    // ion-colors...

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

Hope this can help!

1 Like