Ionic Bottom 中的自定义 Sheet

Question

我想在底部添加列表 sheet 但 ionic 给了我们一个数组，所以我们可以在那里添加 class 并设置它的样式。我想问的是我们如何制作一个列表或完全是我们自己的 html 代码并将其传递给底部 sheet 函数，该函数将只显示？

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

这是默认操作 sheet，我想要的是在 DOM 中完成。我在这里发现了类似的问题但没有答案 Similar Question URL 请看看我需要什么...！ What i need

Answer 1

当前操作 sheet 不允许您在其中添加 html 代码。但是需要此功能，您可以在此处查看 https://github.com/ionic-team/ionic/issues/16718

Answer 2

尝试使用模态组件

home.page.html

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

home.page.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],

Global.scss

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

屏幕截图

Demo

Answer 3

尝试<ion-card>

<ion-header>  </ion-header>

<ion-content> </ion-content>

<ion-card> </ion-card> 

<ion-footer> </ion-footer>

你可以用*ngIf来控制ion-card

示例：

在 page.ts

showCard:Boolean = true;

constructor(){} 
ngOnInit() {}

在page.html

<ion-card *ngIf="showCard"> </ion-card>

https://ionicframework.com/docs/api/card

Ionic Bottom 中的自定义 Sheet

Customization in Ionic Bottom Sheet

ionic-framework

ionic-native