离子底片中的定制 [英] Customization in Ionic Bottom Sheet

问题描述

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

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

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

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

推荐答案

尝试使用模态组件

home.page.html

home.page.html

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

home.page.ts

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

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中声明

Declare in app.module.ts

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

Global.scss

Global.scss

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

ScreenShot

ScreenShot

演示

这篇关于离子底片中的定制的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！