离子底片中的定制

Question

我正在尝试在底部工作表中添加列表，但是 ionic 给了我们一个数组，因此我们可以在那里添加类并为其设置样式。我想问的是我们如何制作一个列表或完全我们自己的 html 代码并将其传递给将显示的底部工作表函数？

async presentActionSheet() {
    const actionSheet = await this.actionSheetController.create({
      header: 'Albums',
      buttons: [{
        text: 'Delete',
        role: 'destructive',
        icon: 'trash',
        handler: () => {
          console.log('Delete clicked');
        }
      }, {
        text: 'Share',
        icon: 'share',
        handler: () => {
          console.log('Share clicked');
        }
      }, {
        text: 'Play (open modal)',
        icon: 'arrow-dropright-circle',
        handler: () => {
          console.log('Play clicked');
        }
      }, {
        text: 'Favorite',
        icon: 'heart',
        handler: () => {
          console.log('Favorite clicked');
        }
      }, {
        text: 'Cancel',
        icon: 'close',
        role: 'cancel',
        handler: () => {
          console.log('Cancel clicked');
        }
      }]
    });
    await actionSheet.present();
  }

它是默认操作表，我想要的是在 DOM 中制作它。我在这里找到了没有答案的类似问题 类似问题 URL请看看我需要什么...！ 我需要的

Answer 1

尝试使用模态组件

主页.html

<ion-button (click)="OpenModel()">
    Open Modal (Bottom)
    <ion-icon mode="ios" name="arrow-forward"></ion-icon>
  </ion-button>

主页.ts

import { ModalController } from '@ionic/angular';
import { ModalpagePage } from '../modalpage/modalpage.page';

constructor(private modalCtrl: ModalController) {}

  async OpenModel(){
    const presentModel = await this.modalCtrl.create({
      component: ModalpagePage,
      componentProps: {
        title: 'Billing Address',
        type:'billing',
      },
      showBackdrop: true,
      mode: "ios",
      cssClass: 'change-address-shipping-modal'
    });

    presentModel.onWillDismiss().then((data)=>{
      console.log(data);
      //custom code
    });

    return await presentModel.present();
  }

modalpage.page.html

<ion-header>
  <ion-toolbar text-center>
    <ion-title>
     Modal title
    </ion-title>
  </ion-toolbar>
</ion-header>
<ion-content>

    <div>
      HTML CODE HERE
    </div>
</ion-content>

在 app.module.ts 中声明

declarations: [AppComponent, ModalpagePage],
  entryComponents: [ModalpagePage],

全局文件

.change-address-shipping-modal{
    --height:60%;
    align-items: flex-end;
  }

截屏

演示