Customization in Ionic Bottom Sheet

问题

I am trying to add list in bottom sheet but ionic gave us an array so we can add class there and style it. What i am trying to ask is how we can make a list or totally our own html code and pass it to bottom sheet function that will just display?

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

It is by default action sheet, what i want is to make it in DOM. I have found the similar question here with no answer Similar Question URL Please see what i need...! What i need

回答1:

Try with Modal Component

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>

Declare in app.module.ts

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

Global.scss

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

ScreenShot

Demo

回答2:

Currently action sheet does not allow you to add html code in it. This feature is however requested you can see here https://github.com/ionic-team/ionic/issues/16718

回答3:

Try <ion-card>

<ion-header>  </ion-header>

<ion-content> </ion-content>

<ion-card> </ion-card> 

<ion-footer> </ion-footer>

you can use *ngIf to control ion-card

example:

in page.ts

showCard:Boolean = true;

constructor(){} 
ngOnInit() {}

in page.html

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

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

来源：https://stackoverflow.com/questions/58134091/customization-in-ionic-bottom-sheet

标签

ionic-framework

ionic-native