نحوه: باز کردن یک کامپوننت مانند شیت مدال با استفاده از ionic 7

Summarize this content to 400 words in Persian Lang
سلام مردم!

هفته گذشته، من یک کار کوچک در محل کار داشتم که تمام جمعه مرا مشغول کرد.

در اینجا، ما ترجیح می دهیم از مدال ها به عنوان اجزا استفاده کنیم. در Ionic، نمی‌توانیم از ویژگی ماشه مانند زیر استفاده کنیم:

trigger=”open-modal” (willDismiss)=”onWillDismiss($event)”>

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

از آنجایی که رویداد تریگر در DOM وجود ندارد، Ionic استثنایی می‌دهد که می‌گوید «ویژگی ماشه باید در DOM باشد» یا چیزی شبیه به آن.

هدف من اضافه کردن بود نقاط شکست و یک انیمیشن و مودال ورق بسازید. اگر می توانستم از تگ ماشه استفاده کنم، این کار به این صورت انجام می شود:

#modal trigger=”open-modal”
[initialBreakpoint]=”0.25″
[breakpoints]=”[0, 0.25, 0.5, 0.75]”>

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

اما ما در حالت یونی نیستیم، و مدال را با خاصیت خودش راه اندازی نمی کنیم. برای افزودن زمینه بیشتر به مشکلم، کامپوننتی که می خواهم باز کنم این بود

{{title}}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

ببینید؟ بدون یون مدال

کاری که من انجام دادم اضافه کردن من بود نقطه شکست اولیه و نقاط شکست در تابع async به عنوان ویژگی های رابط modalOptions.

export interface ModalOptionsT extends ComponentRef = ComponentRef> {
component: T;
componentProps?: ComponentPropsT>;
presentingElement?: HTMLElement;
showBackdrop?: boolean;
backdropDismiss?: boolean;
cssClass?: string | string[];
delegate?: FrameworkDelegate;
animated?: boolean;
canDismiss?: boolean | ((data?: any, role?: string) => Promiseboolean>);
mode?: Mode;
keyboardClose?: boolean;
id?: string;
htmlAttributes?: {
[key: string]: any;
};
enterAnimation?: AnimationBuilder;
leaveAnimation?: AnimationBuilder;
breakpoints?: number[];
initialBreakpoint?: number;
backdropBreakpoint?: number;
handle?: boolean;
handleBehavior?: ModalHandleBehavior;
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

بیشتر برای کشف در آینده

بنابراین، فراخوان من برای باز کردن مدال به این شکل است. نقاط شکست از 0 به 1 می رود و 1 به معنای کاملاً باز است.

async openModal(params: any) {
const modal = await this.modalController.create({
component: ComponentBlabla,
componentProps: {
params: params
},
initialBreakpoint: 1,
breakpoints: [1, 0.75, 0.25],
animated: true,
});

await modal.present();
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

و به این ترتیب، شما یک کامپوننت دارید که مانند یک شیت مدال باز شده است!آسان است، اما من کسی را پیدا نکردم که این کار را به این شکل یا زیاد در اسناد Ionic انجام دهد.

امیدوارم روزی این برای کسی مفید باشد!با تشکر از شما و بچه ها!

 trigger="open-modal" (willDismiss)="onWillDismiss($event)">

 #modal trigger="open-modal" 
[initialBreakpoint]="0.25" 
[breakpoints]="[0, 0.25, 0.5, 0.75]">

    {{title}}


     

export interface ModalOptionsT extends ComponentRef = ComponentRef> {
  component: T;
  componentProps?: ComponentPropsT>;
  presentingElement?: HTMLElement;
  showBackdrop?: boolean;
  backdropDismiss?: boolean;
  cssClass?: string | string[];
  delegate?: FrameworkDelegate;
  animated?: boolean;
  canDismiss?: boolean | ((data?: any, role?: string) => Promiseboolean>);
  mode?: Mode;
  keyboardClose?: boolean;
  id?: string;
  htmlAttributes?: {
    [key: string]: any;
  };
  enterAnimation?: AnimationBuilder;
  leaveAnimation?: AnimationBuilder;
  breakpoints?: number[];
  initialBreakpoint?: number;
  backdropBreakpoint?: number;
  handle?: boolean;
  handleBehavior?: ModalHandleBehavior;
}

 async openModal(params: any) {
    const modal = await this.modalController.create({
      component: ComponentBlabla,
      componentProps: {
        params: params
      },
        initialBreakpoint: 1,
        breakpoints: [1, 0.75, 0.25],
        animated: true,
    });

    await modal.present();
  }