在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

的 行动表 Ionic组件只接受按钮，与之形成鲜明对比的是。罩衫 和 模态 组件，每个组件都接受一个自定义组件。

你最好的选择是使用 罩衫 组件，添加一个自定义的 enterAnimation 和 leaveAnimation 并设置 宽度属性 Ionic所提供的。

在过去(Ionic 4之前)，你可以抓取DOM元素并随意改变，但在新的底层网络组件中，这是不可能的。要想获得更多的自定义行为，你需要看一下下面的内容 StencilJS 或类似的方法来创建一个新的组件。这是一个可维护性的风险，而且考虑到Ionic内置的大量功能，这可能是不必要的。