ionic-framework - 在 actionSheetController 中添加自定义内容

Question

有没有办法在 ionic.actionSheetController 中使用自定义内容而不是按钮列表？ ionic.modalController 就是一个例子，我可以为模态的内容使用自定义的 component。

ionic.modalController 例子

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

...

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

ionic.actionSheetController 尝试

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

下面是我想要实现的图像

Answer 1

Action Sheet Ionic 组件只接受按钮，与 Popover 相反和 Modal每个组件都接受自定义组件。

近似于您想要的行为类型的最佳选择可能是使用 Popover组件，添加自定义 enterAnimation 和 leaveAnimation 并设置 width properties Ionic 已提供。

在过去(Ionic 4 之前)，人们可以抓取 DOM 元素并随意更改，但是对于新的底层 Web 组件，这是不可能的。要获得更多自定义行为，您需要查看 StencilJS或类似的创建一个新组件。这是一种可维护性风险，考虑到 Ionic 中内置的大量功能，这可能没有必要。