Adding custom content in actionSheetController

Question

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

Answer 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.