Skip to main content
Version: v7

ion-alert

scoped

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

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

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

isOpen を使う

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

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

Controller Alerts

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

Buttons

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

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

Console
Console messages will appear here when logged from the example above.

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

Radio Example

カスタマイズ

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

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

アクセシビリティ

Screen Readers

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

Role

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

Alert の概要

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

ARIAの仕様に合わせるために、アラートには messageheader または subHeader を含めることを強くお勧めします。もし headersubHeader を含めない場合は、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の設定で innerHTMLTemplatesEnabledtrue に設定する必要があります。
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.