バージョン: v8

ion-alert

アラートは、ユーザーに情報を提示したり、入力を使用してユーザーから情報を収集したりするダイアログです。アラートはアプリのコンテンツの上に表示され、ユーザーがアプリの操作を再開する前に手動で閉じなければなりません。オプションで、header、subHeader、messageを持つこともできます。

インラインアラート（推奨）

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

`isOpen`の使用

ion-alertのisOpenプロパティを使用すると、開発者はアプリケーションの状態からアラートの表示状態を制御できます。つまり、isOpenがtrueに設定されている場合、アラートが表示され、isOpenがfalseに設定されている場合、アラートが閉じられます。

isOpenは一方向データバインディングを使用します。つまり、アラートが閉じられたときに自動的にfalseに設定されることはありません。開発者は、ionAlertDidDismissまたはdidDismissイベントをリッスンし、isOpenをfalseに設定する必要があります。この理由は、ion-alertの内部がアプリケーションの状態と密接に結合されるのを防ぐためです。一方向データバインディングでは、アラートはリアクティブ変数が提供するブール値のみを考慮する必要があります。双方向データバインディングでは、アラートはブール値とリアクティブ変数自体の存在の両方を考慮する必要があります。これにより、非決定的な動作が発生し、アプリケーションのデバッグが困難になる可能性があります。

コントローラーアラート

alertControllerは、アラートが表示および閉じられるタイミングをより細かく制御する必要がある状況で使用できます。

ボタン

buttonsの配列では、各ボタンにtextのプロパティと、オプションでhandlerが含まれています。ハンドラーがfalseを返す場合、ボタンがクリックされたときにアラートは自動的に閉じられません。すべてのボタンは、buttons配列に追加された順序で左から右に表示されます。注: 右端のボタン（配列の最後のボタン）がメインボタンです。

オプションで、roleプロパティをボタンに追加できます（例: cancel）。ボタンのいずれかにcancelロールがある場合、背景をタップしてアラートが閉じられると、キャンセルロールを持つボタンからハンドラーが起動します。

コンソール

上記の例からログが記録されると、ここにコンソールメッセージが表示されます。

入力

アラートには、アプリにデータを渡すことができるいくつかの異なる入力を含めることもできます。入力は、ユーザーに情報を求める簡単な方法として使用できます。ラジオボタン、チェックボックス、テキスト入力はすべて受け入れられますが、混在させることはできません。たとえば、アラートにはすべてのラジオボタン入力またはすべてのチェックボックス入力を含めることができますが、同じアラートでラジオボタン入力とチェックボックス入力を混在させることはできません。ただし、url、email、text、textareaなど、異なるタイプの「テキスト」入力を混在させることはできます。アラートのガイドラインに合わない複雑なフォームUIが必要な場合は、代わりにモーダル内にフォームを構築することをお勧めします。

テキスト入力の例

ラジオボタンの例

カスタマイズ

アラートはスコープ付きカプセル化を使用します。つまり、実行時に各スタイルに追加のクラスを付加することにより、CSSを自動的にスコープします。CSSでスコープ付きセレクターをオーバーライドするには、より高い特異度セレクターが必要です。

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

注

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

アクセシビリティ

スクリーンリーダー

アラートは、スクリーンリーダーでアクセス可能にするためにariaプロパティを設定しますが、これらのプロパティは、十分に説明的でない場合、またはアプリでのアラートの使用方法と一致しない場合に上書きできます。

ロール

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

アラートの説明

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

ARIA仕様に準拠するため、アラートにはmessageと、headerまたはsubHeaderのいずれかを含めることを強くお勧めします。headerまたはsubHeaderを含めない場合は、代わりにhtmlAttributesプロパティを使用して説明的なaria-labelを提供します。

Angular
Javascript
React
Vue

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

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

useIonAlert({
  message: 'This is an alert with custom aria attributes.',
  htmlAttributes: {
    'aria-label': 'alert dialog',
  },
});

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

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

アラートボタンの説明

テキストを含むボタンは、スクリーンリーダーで読み上げられます。既存のテキスト以外の説明が必要な場合は、ボタンのhtmlAttributesプロパティにaria-labelを渡すことで、ボタンにラベルを設定できます。

Angular
Javascript
React
Vue

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

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

useIonAlert({
  header: 'Header',
  buttons: [
    {
      text: 'Exit',
      htmlAttributes: {
        'aria-label': 'close',
      },
    },
  ],
});

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

インターフェース

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

説明	`true`の場合、アラートはアニメーションします。
属性	`animated`
型	`boolean`
デフォルト	`true`

backdropDismiss

説明	`true`の場合、背景をクリックするとアラートが閉じられます。
属性	`backdrop-dismiss`
型	`boolean`
デフォルト	`true`

buttons

説明	アラートに追加されるボタンの配列。
属性	`undefined`
型	`(string ｜ AlertButton)[]`
デフォルト	`[]`

cssClass

説明	カスタムCSSを適用するための追加クラス。複数のクラスを指定する場合は、スペースで区切る必要があります。
属性	`css-class`
型	`string ｜ string[] ｜ undefined`
デフォルト	`undefined`

enterAnimation

説明	アラートが表示されるときに使用するアニメーション。
属性	`undefined`
型	`((baseEl: any, opts?: any) => Animation) ｜ undefined`
デフォルト	`undefined`

説明	アラートの見出しにあるメインタイトル。
属性	`header`
型	`string ｜ undefined`
デフォルト	`undefined`

htmlAttributes

説明	アラートに渡す追加の属性。
属性	`undefined`
型	`undefined ｜ { [key: string]: any; }`
デフォルト	`undefined`

inputs

説明	アラートに表示する入力の配列。
属性	`undefined`
型	`AlertInput[]`
デフォルト	`[]`

isOpen

説明	`true`の場合、アラートが開きます。`false`の場合、アラートが閉じます。プレゼンテーションをより細かく制御する必要がある場合は、これを使用してください。それ以外の場合は、alertControllerまたは`trigger`プロパティを使用してください。注：アラートが閉じられたときに`isOpen`が自動的に`false`に戻ることはありません。コードでそれを行う必要があります。
属性	`is-open`
型	`boolean`
デフォルト	`false`

keyboardClose

説明	`true`の場合、オーバーレイが表示されるとキーボードが自動的に閉じられます。
属性	`keyboard-close`
型	`boolean`
デフォルト	`true`

leaveAnimation

説明	アラートが閉じられるときに使用するアニメーション。
属性	`undefined`
型	`((baseEl: any, opts?: any) => Animation) ｜ undefined`
デフォルト	`undefined`

message

説明	アラートに表示されるメインメッセージ。`message`は、プレーンテキストまたはHTMLを文字列として受け入れることができます。HTML用に通常予約されている文字を表示するには、エスケープする必要があります。たとえば、`<Ionic>`は`<Ionic>`になります。詳細については、セキュリティドキュメントを参照してください。このプロパティは、カスタムHTMLを文字列として受け入れます。コンテンツはデフォルトでプレーンテキストとして解析されます。カスタムHTMLを使用する前に、Ionic構成で`innerHTMLTemplatesEnabled`を`true`に設定する必要があります。
属性	`message`
型	`IonicSafeString ｜ string ｜ undefined`
デフォルト	`undefined`

mode

説明	モードは、使用するプラットフォームスタイルを決定します。
属性	`mode`
型	`"ios" ｜ "md"`
デフォルト	`undefined`

subHeader

説明	アラートの見出しのサブタイトル。タイトルの下に表示されます。
属性	`sub-header`
型	`string ｜ undefined`
デフォルト	`undefined`

translucent

説明	`true`の場合、アラートは半透明になります。モードが`"ios"`で、デバイスが`backdrop-filter`をサポートしている場合にのみ適用されます。
属性	`translucent`
型	`boolean`
デフォルト	`false`

trigger

説明	クリックするとアラートを開くトリガー要素に対応するID。
属性	`trigger`
型	`string ｜ undefined`
デフォルト	`undefined`

イベント

名前	説明	バブル
`didDismiss`	アラートが閉じられた後に発行されます。ionAlertDidDismissの省略形。	`true`
`didPresent`	アラートが表示された後に発行されます。ionAlertWillDismissの省略形。	`true`
`ionAlertDidDismiss`	アラートが閉じられた後に発行されます。	`true`
`ionAlertDidPresent`	アラートが表示された後に発行されます。	`true`
`ionAlertWillDismiss`	アラートが閉じられる前に発行されます。	`true`
`ionAlertWillPresent`	アラートが表示される前に発行されます。	`true`
`willDismiss`	アラートが閉じられる前に発行されます。ionAlertWillDismissの省略形。	`true`
`willPresent`	アラートが表示される前に発行されます。ionAlertWillPresentの省略形。	`true`

メソッド

dismiss

説明	表示された後、アラートオーバーレイを閉じます。
署名	`dismiss(data?: any, role?: string) => Promise<boolean>`

onDidDismiss

説明	アラートが閉じたときに解決されるPromiseを返します。
署名	`onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>`

onWillDismiss

説明	アラートが閉じられるときに解決されるPromiseを返します。
署名	`onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>`

present

説明	作成された後、アラートオーバーレイを表示します。
署名	`present() => Promise<void>`

CSSシャドウパーツ

このコンポーネントで使用できるCSSシャドウパーツはありません。

CSSカスタムプロパティ

名前	説明
`--backdrop-opacity`	背景の不透明度
`--background`	アラートの背景
`--height`	アラートの高さ
`--max-height`	アラートの最大高さ
`--max-width`	アラートの最大幅
`--min-height`	アラートの最小高さ
`--min-width`	アラートの最小幅
`--width`	アラートの幅

名前	説明
`--backdrop-opacity`	背景の不透明度
`--background`	アラートの背景
`--height`	アラートの高さ
`--max-height`	アラートの最大高さ
`--max-width`	アラートの最大幅
`--min-height`	アラートの最小高さ
`--min-width`	アラートの最小幅
`--width`	アラートの幅

スロット

このコンポーネントで使用できるスロットはありません。

インラインアラート（推奨）​

isOpenの使用​

コントローラーアラート​

ボタン​

入力​

テキスト入力の例​

ラジオボタンの例​

カスタマイズ​

アクセシビリティ​

スクリーンリーダー​

ロール​

アラートの説明​

アラートボタンの説明​

インターフェース​

AlertButton​

AlertInput​

AlertOptions​

プロパティ​

animated​

backdropDismiss​

buttons​

cssClass​

enterAnimation​

header​

htmlAttributes​

inputs​

isOpen​

keyboardClose​

leaveAnimation​

message​

mode​

subHeader​

translucent​

trigger​

イベント​

メソッド​

dismiss​

onDidDismiss​

onWillDismiss​

present​

CSSシャドウパーツ​

CSSカスタムプロパティ​

スロット​

目次