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设置Ionic 提供的宽度属性。

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