Skip to main content
Version: v7

ion-alert

scoped

アラートは、ユーザーに情報を提示したり、Inputを使ってユーザーから情報を収集したりするダイアログである。アラートはアプリのコンテンツの上に表示され、アプリとの対話を再開する前に、ユーザーが手動で解除する必要があります。また、オプションで header、subHeader、message を持つことができます。

インラインアラート(推奨)​

ion-alert は、テンプレートに直接コンポーネントを記述して使用することができます。これにより、アラートを表示するために必要なハンドラの数を減らすことができます。

<ion-button id="present-alert">Click Me</ion-button>
<ion-alert
  trigger="present-alert"
  header="A Short Title Is Best"
  subHeader="A Sub Header Is Optional"
  message="A message should be a short, complete sentence."
  [buttons]="alertButtons"
></ion-alert>

isOpen を使う​

ion-alert の isOpen プロパティは、開発者がアプリケーションの状態からアラートの表示状態を制御することを可能にします。つまり、isOpen を true に設定するとアラートが表示され、isOpen を false に設定するとアラートは解除されます。

isOpen は一方通行のデータバインディングを使用しているため、アラートが解除されたときに自動的に false に設定されることはありません。開発者は ionAlertDidDismiss または didDismiss イベントを待ち、isOpen を false に設定する必要があります。この理由は、ion-alert の内部がアプリケーションの状態と密接に結合するのを防ぐためである。一方通行のデータバインディングでは、アラートはリアクティブ変数が提供するブーリアン値だけを気にすればよい。双方向のデータバインディングでは、アラートはブーリアン値とリアクティブ変数の存在の両方に関心を持つ必要があります。これは、非決定的な動作につながり、アプリケーションのデバッグを困難にする可能性があります。

<ion-button (click)="setOpen(true)">Click Me</ion-button>
<ion-alert
  [isOpen]="isAlertOpen"
  header="A Short Title Is Best"
  subHeader="A Sub Header Is Optional"
  message="A message should be a short, complete sentence."
  [buttons]="alertButtons"
  (didDismiss)="setOpen(false)"
></ion-alert>

Controller Alerts​

alertControllerは、アラートを表示するタイミングや解除するタイミングをより細かく制御する必要がある場合に使用することができる。

<ion-button (click)="presentAlert()">Click Me</ion-button>

Buttons​

buttons の配列には、各buttonの text のプロパティと、オプションで handler を利用することができます。 handler が false を返した場合、buttonがクリックされてもAlertは自動的に解除されません。すべての buttons は、左から右にボタン配列に追加された順序で表示されます。 Note: 一番右のボタン(配列の最後の1つ)がメインボタンです。

オプションで、cancelのような role プロパティをボタンに追加することができます。もし cancel ロールがボタンのいずれかに設定されている場合、バックドロップをタップしてアラートが解除されると、キャンセルロールを持つボタンから handler が起動されます。

Console
Console messages will appear here when logged from the example above.
<ion-button id="present-alert">Click Me</ion-button>
<ion-alert
  trigger="present-alert"
  header="Alert!"
  [buttons]="alertButtons"
  (didDismiss)="setResult($event)"
></ion-alert>

Inputs​

Alertには、複数の異なるInputを含めることもでき、そのデータをアプリで受け取ることができます。 Inputはユーザーに情報の入力を促す簡単な方法として使用できます。Radios, checkboxes と text inputs textarea はすべて利用できますが、これらを混ぜて利用することはできません。例えば、Alertはすべてbutton Inputであったり、すべてcheckboxでのInputを持つことはできますが、同一のAlertにradioとcheckbox Inputを混ぜることはできません。ただし、"text" Inputでは、 url, email, text などの複数のtypeを混ぜて利用することはできます。アラートのガイドラインに収まらない複雑なForm UIが必要な場合は、代わりにModal内でFormを構築することをお勧めします。

Text Inputs Example​

<ion-button id="present-alert">Click Me</ion-button>
<ion-alert
  trigger="present-alert"
  header="Please enter your info"
  [buttons]="alertButtons"
  [inputs]="alertInputs"
></ion-alert>

Radio Example​

<ion-button id="present-alert">Click Me</ion-button>
<ion-alert
  trigger="present-alert"
  header="Select your favorite color"
  [buttons]="alertButtons"
  [inputs]="alertInputs"
></ion-alert>

カスタマイズ​

Alertはscopedによるカプセル化を使用しており、実行時に各スタイルにクラスを追加することで自動的にCSSをスコープします。CSSでscopedセレクタをオーバーライドするには、higher specificity セレクタが必要です。

create メソッドで 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;
}

CSSカスタムプロパティ は、個々の要素をターゲットにすることなく、アラートのスタイルに使用することができます。

.my-custom-class {
  --background: #e5e5e5;
}
<ion-button id="present-alert">Click Me</ion-button>
<ion-alert trigger="present-alert" class="custom-alert" header="Are you sure?" [buttons]="alertButtons"></ion-alert>
note

IonicのAngularアプリを構築する場合、スタイルはグローバルなスタイルシートファイルに追加する必要があります。

アクセシビリティ​

Screen Readers​

アラートは、スクリーンリーダーにとってアクセシブルであるために、ariaプロパティを設定しますが、これらのプロパティは、十分な説明がない場合、またはアラートがアプリでどのように使用されているかと一致しない場合は、オーバーライドすることができます。

Role​

Ionicは自動的にアラートのroleを、入力やボタンがある場合はalertdialogに、何もない場合はalertに設定します。

Alert の概要​

アラートに header プロパティが定義されている場合、aria-labelledby 属性は自動的にヘッダの ID に設定されます。 header が定義されていない場合、subHeader 要素がフォールバックとして使用されます。同様に、 aria-describedby 属性が定義されている場合は、自動的に message 要素の ID が設定されます。

ARIAの仕様に合わせるために、アラートには message と header または subHeader を含めることを強くお勧めします。もし header や subHeader を含めない場合は、htmlAttributes プロパティを使用して、説明的な aria-label を指定することができます。

const alert = await this.alertController.create({
  message: 'This is an alert with custom aria attributes.',
  htmlAttributes: {
    'aria-label': 'alert dialog',
  },
});

すべてのARIA属性は、アラートのhtmlAttributesプロパティにカスタム値を定義することで、手動で上書きすることができます。

Alert Buttons の概要​

Buttons containing text will be read by a screen reader. If a description other than the existing text is desired, a label can be set on the button by passing aria-label to the htmlAttributes property on the button.

const alert = await this.alertController.create({
  header: 'Header',
  buttons: [
    {
      text: 'Exit',
      htmlAttributes: {
        'aria-label': 'close',
      },
    },
  ],
});

Interfaces​

AlertButton​

type AlertButtonOverlayHandler = boolean | void | { [key: string]: any };

interface AlertButton {
  text: string;
  role?: 'cancel' | 'destructive' | string;
  cssClass?: string | string[];
  id?: string;
  htmlAttributes?: { [key: string]: any };
  handler?: (value: any) => AlertButtonOverlayHandler | Promise<AlertButtonOverlayHandler>;
}

AlertInput​

interface AlertInput {
  type?: TextFieldTypes | 'checkbox' | 'radio' | 'textarea';
  name?: string;
  placeholder?: string;
  value?: any;
  /**
   * The label text to display next to the input, if the input type is `radio` or `checkbox`.
   */
  label?: string;
  checked?: boolean;
  disabled?: boolean;
  id?: string;
  handler?: (input: AlertInput) => void;
  min?: string | number;
  max?: string | number;
  cssClass?: string | string[];
  attributes?: { [key: string]: any };
  tabindex?: number;
}

AlertOptions​

interface AlertOptions {
  header?: string;
  subHeader?: string;
  message?: string | IonicSafeString;
  cssClass?: string | string[];
  inputs?: AlertInput[];
  buttons?: (AlertButton | string)[];
  backdropDismiss?: boolean;
  translucent?: boolean;
  animated?: boolean;
  htmlAttributes?: { [key: string]: any };

  mode?: Mode;
  keyboardClose?: boolean;
  id?: string;

  enterAnimation?: AnimationBuilder;
  leaveAnimation?: AnimationBuilder;
}

プロパティ​

animated​

Descriptiontrueの場合、アラートはアニメーションで表示されます。
Attributeanimated
Typeboolean
Defaulttrue

backdropDismiss​

Descriptiontrueの場合、バックドロップがクリックされるとアラートが解除される。
Attributebackdrop-dismiss
Typeboolean
Defaulttrue

buttons​

Descriptionアラートに追加されるボタンの配列。
Attributeundefined
Type(string ｜ AlertButton)[]
Default[]

cssClass​

DescriptionカスタムCSSに適用する追加のクラス。複数のクラスを指定する場合は、スペースで区切る必要があります。
Attributecss-class
Typestring ｜ string[] ｜ undefined
Defaultundefined

enterAnimation​

Descriptionアラート提示時に使用するアニメーションです。
Attributeundefined
Type((baseEl: any, opts?: any) => Animation) ｜ undefined
Defaultundefined
Descriptionアラートの見出しにあるメインタイトルです。
Attributeheader
Typestring ｜ undefined
Defaultundefined

htmlAttributes​

Descriptionアラートに渡す追加属性。
Attributeundefined
Typeundefined ｜ { [key: string]: any; }
Defaultundefined

inputs​

Descriptionアラートに表示するInputの配列。
Attributeundefined
TypeAlertInput[]
Default[]

isOpen​

Descriptiontrueの場合、アラートは開く。もし false ならば、アラートは閉じます。alertControllerやtriggerプロパティを使用してください。注意: アラートが終了しても isOpen は自動的に false に戻りません。あなたのコードでそれを行う必要があります。
Attributeis-open
Typeboolean
Defaultfalse

keyboardClose​

Descriptiontrueの場合、オーバーレイが表示されたときにキーボードが自動的に解除されます。
Attributekeyboard-close
Typeboolean
Defaulttrue

leaveAnimation​

Descriptionアラートが解除されたときに使用するアニメーション。
Attributeundefined
Type((baseEl: any, opts?: any) => Animation) ｜ undefined
Defaultundefined

message​

Descriptionアラートに表示されるメインメッセージ。messageには、文字列としてプレーンテキストまたはHTMLのいずれかを指定することができます。通常HTML用に予約されている文字を表示するには、エスケープする必要があります。例えば、<Ionic>は &lt;Ionic&gt; になります：セキュリティ・ドキュメント このプロパティは、カスタムHTMLを文字列として受け付けます。デフォルトでは、コンテンツはプレーンテキストとしてパースされます。カスタムHTMLを使用するには、Ionicの設定で innerHTMLTemplatesEnabled を true に設定する必要があります。
Attributemessage
TypeIonicSafeString ｜ string ｜ undefined
Defaultundefined

mode​

Descriptionmodeは、どのプラットフォームのスタイルを使用するかを決定します。
Attributemode
Type"ios" ｜ "md"
Defaultundefined

subHeader​

Descriptionアラートの見出しにあるサブタイトルです。タイトルの下に表示されます。
Attributesub-header
Typestring ｜ undefined
Defaultundefined

translucent​

Descriptiontrueの場合、アラートは半透明になります。modeが "ios" で、デバイスが backdrop-filter をサポートしている場合にのみ適用されます。
Attributetranslucent
Typeboolean
Defaultfalse

trigger​

Descriptionクリックされるとアラートが開くトリガー要素に対応するID。
Attributetrigger
Typestring ｜ undefined
Defaultundefined

イベント​

NameDescription
didDismissアラートが解除された後に発行されます。ionAlertDidDismissの略記。
didPresentアラートが提示された後に発行されます。ionAlertWillDismissの略記。
ionAlertDidDismissアラートが解除された後に発行されます。
ionAlertDidPresentアラートが提示された後に発行されます。
ionAlertWillDismissアラートが解除される前に発行されます。
ionAlertWillPresentアラートが提示される前に発行されます。
willDismissアラートが解除される前に発行されます。ionAlertWillDismissの略記。
willPresentアラートが提示される前に発行されます。ionAlertWillPresentの略記。

メソッド​

dismiss​

Descriptionアラートオーバーレイが表示された後、解除します。
Signaturedismiss(data?: any, role?: string) => Promise<boolean>

onDidDismiss​

Descriptionアラートが解除されたことを解決するPromiseを返します。
SignatureonDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>

onWillDismiss​

Descriptionアラートが解除されるタイミングを解決するPromiseを返します。
SignatureonWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>

present​

Descriptionアラートオーバーレイを作成した後に提示します。
Signaturepresent() => Promise<void>

CSS Shadow Parts​

No CSS shadow parts available for this component.

CSSカスタムプロパティ​

NameDescription
--backdrop-opacity背景の不透明度
--background注意喚起の背景
--heightアラートの高さ
--max-heightアラートの最大の高さ
--max-widthアラートの最大幅
--min-heightアラートの最小の高さ
--min-widthアラートの最小幅
--widthアラートの幅

Slots​

No slots available for this component.

Contents

Edit this page

Mobile CI/CD made easy. Build, publish, and update from the cloud.