Bài 07: Tìm hiểu về cách sử dụng Action Sheet,Alert

  

Ion-action-sheet

Button

role Thuộc tính của một nút có thể là destructive hoặc cancel. Các nút không có thuộc tính vai trò sẽ có giao diện mặc định cho nền tảng. Các nút có cancel vai trò sẽ luôn tải dưới dạng nút dưới cùng, bất kể chúng ở đâu trong mảng. Tất cả các nút khác sẽ được hiển thị theo thứ tự chúng đã được thêm vào buttons mảng. Lưu ý: Chúng tôi khuyến nghị rằng các destructive nút luôn là nút đầu tiên trong mảng, làm cho chúng trở thành nút trên cùng. Ngoài ra, nếu bảng hành động bị loại bỏ bằng cách nhấn vào phông nền, thì nó sẽ kích hoạt trình xử lý từ nút có vai trò hủy.

Customization

Action Sheet sử dụng tính năng đóng gói theo phạm vi, có nghĩa là nó sẽ tự động mở rộng phạm vi CSS của mình bằng cách nối mỗi kiểu với một lớp bổ sung trong thời gian chạy. Ghi đè các bộ chọn theo phạm vi trong CSS yêu cầu một bộ chọn có  higher specificity

Chúng tôi khuyên bạn nên chuyển một lớp tùy chỉnh vào cssClasstrong createphương thức và sử dụng lớp đó để thêm các kiểu tùy chỉnh vào máy chủ và các phần tử bên trong. Thuộc tính này cũng có thể chấp nhận nhiều lớp được phân tách bằng dấu cách. Xem Usage cho một ví dụ về cách vượt qua một lớp bằng cách sử dụng cssClass.

/* DOES NOT WORK - not specific enough */

.action-sheet-group {

  background: #e5e5e5;

}

/* Works - pass "my-custom-class" in cssClass to increase specificity */

.my-custom-class .action-sheet-group {

  background: #e5e5e5;

}

Bất kỳ trong số những điều đã xác định Thuộc tính tùy chỉnh CSS có thể được sử dụng để tạo kiểu cho Trang tính hành động mà không cần nhắm mục tiêu các phần tử riêng lẻ:

  .my-custom-class {

    --background: #e5e5e5;

  }

Usage

import { Component } from '@angular/core';
import { ActionSheetController } from '@ionic/angular';

@Component({
  selector: 'action-sheet-example',
  templateUrl: 'action-sheet-example.html',
  styleUrls: ['./action-sheet-example.css'],
})
export class ActionSheetExample {

  constructor(public actionSheetController: ActionSheetController) {}

  async presentActionSheet() {
    const actionSheet = await this.actionSheetController.create({
      header: 'Albums',
      cssClass: 'my-custom-class',
      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: 'caret-forward-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();

    const { role } = await actionSheet.onDidDismiss();
    console.log('onDidDismiss resolved with role', role);
  }

}

async function presentActionSheet() {
  const actionSheet = document.createElement('ion-action-sheet');

  actionSheet.header = 'Albums';
  actionSheet.cssClass = 'my-custom-class';
  actionSheet.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: 'caret-forward-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');
    }
  }];
  document.body.appendChild(actionSheet);
  await actionSheet.present();

  const { role } = await actionSheet.onDidDismiss();
  console.log('onDidDismiss resolved with role', role);
}
/* Using with useIonActionSheet Hook */

import React from 'react';
import {
  IonButton,
  IonContent,
  IonPage,
  useIonActionSheet,
} from '@ionic/react';

const ActionSheetExample: React.FC = () => {
  const [present, dismiss] = useIonActionSheet();

  return (
    <IonPage>
      <IonContent>
        <IonButton
          expand="block"
          onClick={() =>
            present({
              buttons: [{ text: 'Ok' }, { text: 'Cancel' }],
              header: 'Action Sheet'
            })
          }
        >
          Show ActionSheet
        </IonButton>
        <IonButton
          expand="block"
          onClick={() =>
            present([{ text: 'Ok' }, { text: 'Cancel' }], 'Action Sheet')
          }
        >
          Show ActionSheet using params
        </IonButton>
        <IonButton
          expand="block"
          onClick={() => {
            present([{ text: 'Ok' }, { text: 'Cancel' }], 'Action Sheet');
            setTimeout(dismiss, 3000);
          }}
        >
          Show ActionSheet, hide after 3 seconds
        </IonButton>
      </IonContent>
    </IonPage>
  );
};
CopyCopied
/* Using with IonActionSheet Component */

import React, { useState } from 'react';
import { IonActionSheet, IonContent, IonButton } from '@ionic/react';
import { trash, share, caretForwardCircle, heart, close } from 'ionicons/icons';

export const ActionSheetExample: React.FC = () => {
  const [showActionSheet, setShowActionSheet] = useState(false);

  return (
    <IonContent>
      <IonButton onClick={() => setShowActionSheet(true)} expand="block">
        Show Action Sheet
      </IonButton>
      <IonActionSheet
        isOpen={showActionSheet}
        onDidDismiss={() => setShowActionSheet(false)}
        cssClass='my-custom-class'
        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: caretForwardCircle,
          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');
          }
        }]}
      >
      </IonActionSheet>
    </IonContent>
  );
}
import { Component, h } from '@stencil/core';

import { actionSheetController } from '@ionic/core';

@Component({
  tag: 'action-sheet-example',
  styleUrl: 'action-sheet-example.css'
})
export class ActionSheetExample {
  async presentActionSheet() {
    const actionSheet = await actionSheetController.create({
      header: 'Albums',
      cssClass: 'my-custom-class',
      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: 'caret-forward-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();

    const { role } = await actionSheet.onDidDismiss();
    console.log('onDidDismiss resolved with role', role);
  }

  render() {
    return [
      <ion-content>
        <ion-button onClick={() => this.presentActionSheet()}>Present Action Sheet</ion-button>
      </ion-content>
    ];
  }
}
<template>
  <ion-button @click="presentActionSheet">Show Action Sheet</ion-button>
</template>

<script>
import { IonButton, actionSheetController } from '@ionic/vue';
import { defineComponent } from 'vue';
import { caretForwardCircle, close, heart, trash, share } from 'ionicons/icons';

export default defineComponent({
  components: { IonButton },
  methods: {
    async presentActionSheet() {
      const actionSheet = await actionSheetController
        .create({
          header: 'Albums',
          cssClass: 'my-custom-class',
          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: caretForwardCircle,
              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();

      const { role } = await actionSheet.onDidDismiss();
      console.log('onDidDismiss resolved with role', role);
    },
  },
});
</script

Các nhà phát triển cũng có thể sử dụng thành phần này trực tiếp trong mẫu của họ:

<script>

import { IonActionSheet, IonButton } from '@ionic/vue';

import { defineComponent, ref } from 'vue';

import { caretForwardCircle, close, heart, trash, share } from 'ionicons/icons';

export default defineComponent({

  components: { IonActionSheet, IonButton },

  setup() {

    const isOpenRef = ref(false);

    const setOpen = (state: boolean) => isOpenRef.value = state;

    const 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: caretForwardCircle,

        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')

        },

      },

    ];

    return { buttons, isOpenRef, setOpen }

  }

});

</script>

Properties

animated
Description	If true, the action sheet will animate.
Attribute	animated
Type	boolean
Default	true
backdropDismiss
Description	If true, the action sheet will be dismissed when the backdrop is clicked.
Attribute	backdrop-dismiss
Type	boolean
Default	true
buttons
Description	An array of buttons for the action sheet.
Type	(string | ActionSheetButton)[]
Default	[]
cssClass
Description	Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.
Attribute	css-class
Type	string | string[] | undefined
enterAnimation
Description	Animation to use when the action sheet is presented.
Type	((baseEl: any, opts?: any) => Animation) | undefined
header
Description	Title for the action sheet.
Attribute	header
Type	string | undefined
keyboardClose
Description	If true, the keyboard will be automatically dismissed when the overlay is presented.
Attribute	keyboard-close
Type	boolean
Default	true
leaveAnimation
Description	Animation to use when the action sheet is dismissed.
Type	((baseEl: any, opts?: any) => Animation) | undefined
mode
Description	The mode determines which platform styles to use.
Attribute	mode
Type	"ios" | "md"
subHeader
Description	Subtitle for the action sheet.
Attribute	sub-header
Type	string | undefined
translucent
Description	If true, the action sheet will be translucent. Only applies when the mode is "ios" and the device supports backdrop-filter.
Attribute	translucent
Type	boolean
Default	false

Events

Name	Description
ionActionSheetDidDismiss	Emitted after the alert has dismissed.
ionActionSheetDidPresent	Emitted after the alert has presented.
ionActionSheetWillDismiss	Emitted before the alert has dismissed.
ionActionSheetWillPresent	Emitted before the alert has presented.

Methods

dismiss
Description	Dismiss the action sheet overlay after it has been presented.
Signature	dismiss(data?: any, role?: string | undefined) => Promise<boolean>
onDidDismiss
Description	Returns a promise that resolves when the action sheet did dismiss.
Signature	onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>
onWillDismiss
Description	Returns a promise that resolves when the action sheet will dismiss.
Signature	onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>
present
Description	Present the action sheet overlay after it has been created.
Signature	present() => Promise<void>

CSS Custom Properties

Name	Description
--backdrop-opacity	Opacity of the backdrop
--background	Background of the action sheet group
--button-background	Background of the action sheet button
--button-background-activated	Background of the action sheet button when pressed. Note: setting this will interfere with the Material Design ripple.
--button-background-activated-opacity	Opacity of the action sheet button background when pressed
--button-background-focused	Background of the action sheet button when tabbed to
--button-background-focused-opacity	Opacity of the action sheet button background when tabbed to
--button-background-hover	Background of the action sheet button on hover
--button-background-hover-opacity	Opacity of the action sheet button background on hover
--button-background-selected	Background of the selected action sheet button
--button-background-selected-opacity	Opacity of the selected action sheet button background
--button-color	Color of the action sheet button
--button-color-activated	Color of the action sheet button when pressed
--button-color-focused	Color of the action sheet button when tabbed to
--button-color-hover	Color of the action sheet button on hover
--button-color-selected	Color of the selected action sheet button
--color	Color of the action sheet text
--height	height of the action sheet
--max-height	Maximum height of the action sheet
--max-width	Maximum width of the action sheet
--min-height	Minimum height of the action sheet
--min-width	Minimum width of the action sheet
--width	Width of the action sheet

Alert

Cảnh báo là một hộp thoại hiển thị cho người dùng thông tin hoặc thu thập thông tin từ người dùng bằng cách sử dụng đầu vào. Một cảnh báo xuất hiện trên đầu nội dung của ứng dụng và người dùng phải loại bỏ theo cách thủ công trước khi họ có thể tiếp tục tương tác với ứng dụng. Nó cũng có thể tùy chọn có một header, subHeadervà message.

Buttons

Trong mảng buttons, mỗi nút bao gồm các thuộc tính cho nó textvà tùy chọn a handler. Nếu một trình xử lý quay trở lại falsethì cảnh báo sẽ không tự động bị loại bỏ khi nút được nhấp. Tất cả các nút sẽ hiển thị theo thứ tự chúng đã được thêm vào buttonsmảng từ trái sang phải. Lưu ý: Nút ngoài cùng bên phải (nút cuối cùng trong mảng) là nút chính.

Theo tùy chọn, một thuộc roletính có thể được thêm vào một nút, chẳng hạn như cancel. Nếu một cancelvai trò nằm trên một trong các nút, thì nếu cảnh báo bị loại bỏ bằng cách nhấn vào phông nền, thì nó sẽ kích hoạt trình xử lý khỏi nút với vai trò hủy.

 Inputs

Cảnh báo cũng có thể bao gồm một số đầu vào khác nhau mà dữ liệu của chúng có thể được chuyển trở lại ứng dụng. Đầu vào có thể được sử dụng như một cách đơn giản để nhắc người dùng về thông tin. Bộ đàm, hộp kiểm và đầu vào văn bản đều được chấp nhận, nhưng chúng không thể bị trộn lẫn. Ví dụ: một cảnh báo có thể có tất cả đầu vào nút radio hoặc tất cả đầu vào hộp kiểm, nhưng cùng một cảnh báo không thể kết hợp đầu vào radio và hộp kiểm. Do lưu ý tuy nhiên, loại khác nhau của nguyên liệu đầu vào "văn bản" có thể được trộn lẫn, chẳng hạn như url, email, text, textareavv Nếu bạn yêu cầu một giao diện người dùng dạng phức tạp mà không phù hợp trong các nguyên tắc của một cảnh báo sau đó chúng tôi khuyên bạn nên thiết kế Form trong một phương thức thay vì .

Customization

Alert sử dụng tính năng đóng gói theo phạm vi, có nghĩa là nó sẽ tự động mở rộng phạm vi CSS của mình bằng cách nối mỗi kiểu với một lớp bổ sung trong thời gian chạy. Ghi đè các bộ chọn theo phạm vi trong CSS yêu cầu một bộ chọn có độ cụ thể cao hơn .

Chúng tôi khuyên bạn nên chuyển một lớp tùy chỉnh vào cssClasstrong createphương thức và sử dụng lớp đó để thêm các kiểu tùy chỉnh vào máy chủ và các phần tử bên trong. Thuộc tính này cũng có thể chấp nhận nhiều lớp được phân tách bằng dấu cách. XemSử dụngcho một ví dụ về cách vượt qua một lớp bằng cách sử dụng cssClass.

/* DOES NOT WORK - not specific enough */
.alert-wrapper {
  background: #e5e5e5;
}

/* Works - pass "my-custom-class" in cssClass to increase specificity */
.my-custom-class .alert-wrapper {
  background: #e5e5e5;
}

Sao chépĐã sao chép

Bất kỳ trong số những điều đã xác định Thuộc tính tùy chỉnh CSS có thể được sử dụng để tạo kiểu cho Cảnh báo mà không cần nhắm mục tiêu các phần tử riêng lẻ:

.my-custom-class {
  --background: #e5e5e5;
}

Sao chépĐã sao chép

Nếu bạn đang xây dựng ứng dụng Ionic Angular, các kiểu cần được thêm vào tệp biểu định kiểu chung. ĐọcVị trí tạo kiểu trong phần Angular bên dưới để biết thêm thông tin.

Sử dụng

import { Component } from '@angular/core';
import { AlertController } from '@ionic/angular';

@Component({
  selector: 'alert-example',
  templateUrl: 'alert-example.html',
  styleUrls: ['./alert-example.css'],
})
export class AlertExample {

  constructor(public alertController: AlertController) {}

  async presentAlert() {
    const alert = await this.alertController.create({
      cssClass: 'my-custom-class',
      header: 'Alert',
      subHeader: 'Subtitle',
      message: 'This is an alert message.',
      buttons: ['OK']
    });

    await alert.present();

    const { role } = await alert.onDidDismiss();
    console.log('onDidDismiss resolved with role', role);
  }

  async presentAlertMultipleButtons() {
    const alert = await this.alertController.create({
      cssClass: 'my-custom-class',
      header: 'Alert',
      subHeader: 'Subtitle',
      message: 'This is an alert message.',
      buttons: ['Cancel', 'Open Modal', 'Delete']
    });

    await alert.present();
  }

  async presentAlertConfirm() {
    const alert = await this.alertController.create({
      cssClass: 'my-custom-class',
      header: 'Confirm!',
      message: 'Message <strong>text</strong>!!!',
      buttons: [
        {
          text: 'Cancel',
          role: 'cancel',
          cssClass: 'secondary',
          handler: (blah) => {
            console.log('Confirm Cancel: blah');
          }
        }, {
          text: 'Okay',
          handler: () => {
            console.log('Confirm Okay');
          }
        }
      ]
    });

    await alert.present();
  }

  async presentAlertPrompt() {
    const alert = await this.alertController.create({
      cssClass: 'my-custom-class',
      header: 'Prompt!',
      inputs: [
        {
          name: 'name1',
          type: 'text',
          placeholder: 'Placeholder 1'
        },
        {
          name: 'name2',
          type: 'text',
          id: 'name2-id',
          value: 'hello',
          placeholder: 'Placeholder 2'
        },
        // multiline input.
        {
          name: 'paragraph',
          id: 'paragraph',
          type: 'textarea',
          placeholder: 'Placeholder 3'
        },
        {
          name: 'name3',
          value: 'http://ionicframework.com',
          type: 'url',
          placeholder: 'Favorite site ever'
        },
        // input date with min & max
        {
          name: 'name4',
          type: 'date',
          min: '2017-03-01',
          max: '2018-01-12'
        },
        // input date without min nor max
        {
          name: 'name5',
          type: 'date'
        },
        {
          name: 'name6',
          type: 'number',
          min: -5,
          max: 10
        },
        {
          name: 'name7',
          type: 'number'
        },
        {
          name: 'name8',
          type: 'password',
          placeholder: 'Advanced Attributes',
          cssClass: 'specialClass',
          attributes: {
            maxlength: 4,
            inputmode: 'decimal'
          }
        }
      ],
      buttons: [
        {
          text: 'Cancel',
          role: 'cancel',
          cssClass: 'secondary',
          handler: () => {
            console.log('Confirm Cancel');
          }
        }, {
          text: 'Ok',
          handler: () => {
            console.log('Confirm Ok');
          }
        }
      ]
    });

    await alert.present();
  }

  async presentAlertRadio() {
    const alert = await this.alertController.create({
      cssClass: 'my-custom-class',
      header: 'Radio',
      inputs: [
        {
          name: 'radio1',
          type: 'radio',
          label: 'Radio 1',
          value: 'value1',
          handler: () => {
            console.log('Radio 1 selected');
          },
          checked: true
        },
        {
          name: 'radio2',
          type: 'radio',
          label: 'Radio 2',
          value: 'value2',
          handler: () => {
            console.log('Radio 2 selected');
          }
        },
        {
          name: 'radio3',
          type: 'radio',
          label: 'Radio 3',
          value: 'value3',
          handler: () => {
            console.log('Radio 3 selected');
          }
        },
        {
          name: 'radio4',
          type: 'radio',
          label: 'Radio 4',
          value: 'value4',
          handler: () => {
            console.log('Radio 4 selected');
          }
        },
        {
          name: 'radio5',
          type: 'radio',
          label: 'Radio 5',
          value: 'value5',
          handler: () => {
            console.log('Radio 5 selected');
          }
        },
        {
          name: 'radio6',
          type: 'radio',
          label: 'Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 ',
          value: 'value6',
          handler: () => {
            console.log('Radio 6 selected');
          }
        }
      ],
      buttons: [
        {
          text: 'Cancel',
          role: 'cancel',
          cssClass: 'secondary',
          handler: () => {
            console.log('Confirm Cancel');
          }
        }, {
          text: 'Ok',
          handler: () => {
            console.log('Confirm Ok');
          }
        }
      ]
    });

    await alert.present();
  }

  async presentAlertCheckbox() {
    const alert = await this.alertController.create({
      cssClass: 'my-custom-class',
      header: 'Checkbox',
      inputs: [
        {
          name: 'checkbox1',
          type: 'checkbox',
          label: 'Checkbox 1',
          value: 'value1',
          handler: () => {
            console.log('Checkbox 1 selected');
          },
          checked: true
        },

        {
          name: 'checkbox2',
          type: 'checkbox',
          label: 'Checkbox 2',
          value: 'value2',
          handler: () => {
            console.log('Checkbox 2 selected');
          }
        },

        {
          name: 'checkbox3',
          type: 'checkbox',
          label: 'Checkbox 3',
          value: 'value3',
          handler: () => {
            console.log('Checkbox 3 selected');
          }
        },

        {
          name: 'checkbox4',
          type: 'checkbox',
          label: 'Checkbox 4',
          value: 'value4',
          handler: () => {
            console.log('Checkbox 4 selected');
          }
        },

        {
          name: 'checkbox5',
          type: 'checkbox',
          label: 'Checkbox 5',
          value: 'value5',
          handler: () => {
            console.log('Checkbox 5 selected');
          }
        },

        {
          name: 'checkbox6',
          type: 'checkbox',
          label: 'Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6',
          value: 'value6',
          handler: () => {
            console.log('Checkbox 6 selected');
          }
        }
      ],
      buttons: [
        {
          text: 'Cancel',
          role: 'cancel',
          cssClass: 'secondary',
          handler: () => {
            console.log('Confirm Cancel');
          }
        }, {
          text: 'Ok',
          handler: () => {
            console.log('Confirm Ok');
          }
        }
      ]
    });

    await alert.present();
  }
}

Sao chépĐã sao chép

Vị trí tạo kiểu

Trong Angular, CSS của một trang cụ thể chỉ được áp dụng cho các phần tử của trang đó. Mặc dù Cảnh báo có thể được hiển thị từ bên trong một trang, ion-alertphần tử được nối bên ngoài trang hiện tại. Điều này có nghĩa là bất kỳ kiểu tùy chỉnh nào cũng cần phải đi trong tệp biểu định kiểu chung. Trong bộ khởi động Ionic Angular, đây có thể là src/global.scsstệp hoặc bạn có thể đăng ký tệp kiểu toàn cục mới bằng cách thêm vào stylestùy chọn xây dựng trongangular.json .

Tính chất

hoạt hình
Sự miêu tả	Nếu true, cảnh báo sẽ hoạt động.
Thuộc tính	animated
Kiểu	boolean
Mặc định	true
phông nền
Sự miêu tả	Nếu true, cảnh báo sẽ bị loại bỏ khi nhấp vào phông nền.
Thuộc tính	backdrop-dismiss
Kiểu	boolean
Mặc định	true
nút
Sự miêu tả	Mảng các nút sẽ được thêm vào cảnh báo.
Kiểu	(string | AlertButton)[]
Mặc định	[]
cssClass
Sự miêu tả	Các lớp bổ sung để áp dụng cho CSS tùy chỉnh. Nếu cung cấp nhiều lớp, chúng phải được phân tách bằng dấu cách.
Thuộc tính	css-class
Kiểu	string | string[] | undefined
enterAnimation
Sự miêu tả	Hoạt ảnh để sử dụng khi cảnh báo được hiển thị.
Kiểu	((baseEl: any, opts?: any) => Animation) | undefined
tiêu đề
Sự miêu tả	Tiêu đề chính trong tiêu đề của cảnh báo.
Thuộc tính	header
Kiểu	string | undefined
đầu vào
Sự miêu tả	Mảng đầu vào để hiển thị trong cảnh báo.
Kiểu	AlertInput[]
Mặc định	[]
bàn phím
Sự miêu tả	Nếu true, bàn phím sẽ tự động bị loại bỏ khi lớp phủ được hiển thị.
Thuộc tính	keyboard-close
Kiểu	boolean
Mặc định	true
rời đi
Sự miêu tả	Hoạt ảnh để sử dụng khi cảnh báo bị loại bỏ.
Kiểu	((baseEl: any, opts?: any) => Animation) | undefined
thông điệp
Sự miêu tả	Thông báo chính sẽ được hiển thị trong cảnh báo. messagecó thể chấp nhận bản rõ hoặc HTML dưới dạng một chuỗi. Để hiển thị các ký tự thường được dành riêng cho HTML, chúng phải được thoát ra. Ví dụ <Ionic>sẽ trở thành &lt;Ionic&gt; Để biết thêm thông tin: Tài liệu bảo mật
Thuộc tính	message
Kiểu	IonicSafeString | string | undefined
chế độ
Sự miêu tả	Chế độ xác định kiểu nền tảng nào sẽ sử dụng.
Thuộc tính	mode
Kiểu	"ios" | "md"
subHeader
Sự miêu tả	Phụ đề trong tiêu đề của cảnh báo. Hiển thị dưới tiêu đề.
Thuộc tính	sub-header
Kiểu	string | undefined
trong mờ
Sự miêu tả	Nếu true, cảnh báo sẽ trong mờ. Chỉ áp dụng khi chế độ "ios"và thiết bị hỗ trợ backdrop-filter.
Thuộc tính	translucent
Kiểu	boolean
Mặc định	false

Sự kiện

Tên	Sự miêu tả
ionAlertDidDismiss	Được phát ra sau khi cảnh báo đã loại bỏ.
ionAlertDidPresent	Được phát ra sau khi cảnh báo đã xuất hiện.
ionAlertWillDismiss	Được phát ra trước khi cảnh báo bị loại bỏ.
ionAlertWillPresent	Phát ra trước khi cảnh báo đã xuất hiện.

Phương pháp

bỏ qua
Sự miêu tả	Loại bỏ lớp phủ cảnh báo sau khi nó đã được hiển thị.
Chữ ký	dismiss(data?: any, role?: string | undefined) => Promise<boolean>
onDidDismiss
Sự miêu tả	Trả về một lời hứa sẽ giải quyết khi cảnh báo đã loại bỏ.
Chữ ký	onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>
onWillDismiss
Sự miêu tả	Trả về một lời hứa sẽ giải quyết khi nào cảnh báo sẽ loại bỏ.
Chữ ký	onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>
hiện tại
Sự miêu tả	Trình bày lớp phủ cảnh báo sau khi nó đã được tạo.
Chữ ký	present() => Promise<void>

Thuộc tính tùy chỉnh

Tên	Sự miêu tả
--backdrop-opacity	Độ mờ của phông nền
--background	Bối cảnh của cảnh báo
--height	Chiều cao của cảnh báo
--max-height	Chiều cao tối đa của cảnh báo
--max-width	Chiều rộng tối đa của cảnh báo
--min-height	Chiều cao tối thiểu của cảnh báo
--min-width	Chiều rộng tối thiểu của cảnh báo
--width	Chiều rộng của cảnh báo