3

Is there a way to use custom content instead of button list in ionic.actionSheetController? An example of this is in ionic.modalController I can use a custom component for the modal's content.

ionic.modalController example

import { ProductDetails } from "./../components";

...

return this.$ionic.modalController
  .create({
    component: ProductDetails,
    componentProps: {
      propsData: {
        data: item,
      }
    }
  })
  .then(m => m.present());

ionic.actionSheetController attempt

import { ProductDetails } from "./../components";

...

return this.$ionic.actionSheetController
  .create({
    header: item.title,
    subHeader: item.subTitle,
    component: ProductDetails,
    buttons: [
      {
        text: "Cancel",
        icon: "close",
        role: "cancel"
      }
    ]
  })
  .then(a => a.present());

Below is an image of what I want to achieve

enter image description here

Simo Mafuxwana
  • 3,702
  • 6
  • 41
  • 59

1 Answers1

1

The Action Sheet Ionic component only accepts buttons, in contrast to the Popover and Modal components that each accept a custom component.

Your best bet at approximating the kind of behavior you desire might be to use the Popover component, adding a custom enterAnimation and leaveAnimation and setting the width properties that Ionic have made available.

In the past (pre Ionic 4), one could grab the DOM elements and alter at will but with the new underlying web components, this is not possible. To get even more custom behavior, you would need to look to StencilJS or similar to create a new component. This is a maintainability risk and is probably not necessary given the vast array of functionality built into Ionic.

Alex Steinberg
  • 1,426
  • 13
  • 25
  • 1
    Great workaround. Thanks... I went with Modal instead because it already has the right animation by default then I set `ion-modal { padding-top: 80%; }` – Simo Mafuxwana May 14 '20 at 17:53
  • @SimoD'loMafuxwana `ion-modal { padding-top: 80%; }` does not work when the device is in landscape mode, is there any other solution for this? – Kardon63 Nov 09 '21 at 20:33