ion-alert
アラートは、ユーザーに情報を提示したり、Inputを使ってユーザーから情報を収集したりするダイアログである。アラートはアプリのコンテンツの上に表示され、アプリとの対話を再開する前に、ユーザーが手動で解除する必要があります。また、オプションで header
、subHeader
、message
を持つことができます。
インラインアラート(推奨)
ion-alert
は、テンプレートに直接コンポーネントを記述して使用することができます。これにより、アラートを表示するために必要なハンドラの数を減らすことができます。
isOpen
を使う
ion-alert
の isOpen
プロパティは、開発者がアプリケーションの状態からアラートの表示状態を制御することを可能にします。つまり、isOpen
を true
に設定するとアラートが表示され、isOpen
を false
に設定するとアラートは解除されます。
isOpen
は一方通行のデータバインディングを使用しているため、アラートが解除されたときに自動的に false
に設定されることはありません。開発者は ionAlertDidDismiss
または didDismiss
イベントを待ち、isOpen
を false
に設定する必要があります。この理由は、ion-alert
の内部がアプリケーションの状態と密接に結合するのを防ぐためである。一方通行のデータバインディングでは、アラートはリアクティブ変数が提供するブーリアン値だけを気にすればよい。双方向のデータバインディングでは、アラートはブーリアン値とリアクティブ変数の存在の両方に関心を持つ必要があります。これは、非決定的な動作につながり、アプリケーションのデバッグを困難にする可能性があります。
Controller Alerts
alertController
は、アラートを表示するタイミングや解除するタイミングをより細かく制御する必要がある場合に使用することができる。
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.
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;
}
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
を指定することができます。
- 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
プロパティにカスタム値を定義することで、手動で上書きすることができます。
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.
- 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',
},
},
],
});
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
Description | If true , the alert will animate. |
Attribute | animated |
Type | boolean |
Default | true |
backdropDismiss
Description | If true , the alert will be dismissed when the backdrop is clicked. |
Attribute | backdrop-dismiss |
Type | boolean |
Default | true |
buttons
Description | Array of buttons to be added to the alert. |
Attribute | undefined |
Type | (string | AlertButton)[] |
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 |
Default | undefined |
enterAnimation
Description | Animation to use when the alert is presented. |
Attribute | undefined |
Type | ((baseEl: any, opts?: any) => Animation) | undefined |
Default | undefined |
header
Description | The main title in the heading of the alert. |
Attribute | header |
Type | string | undefined |
Default | undefined |
htmlAttributes
Description | Additional attributes to pass to the alert. |
Attribute | undefined |
Type | undefined | { [key: string]: any; } |
Default | undefined |
inputs
Description | Array of input to show in the alert. |
Attribute | undefined |
Type | AlertInput[] |
Default | [] |
isOpen
Description | If true , the alert will open. If false , the alert will close. Use this if you need finer grained control over presentation, otherwise just use the alertController or the trigger property. Note: isOpen will not automatically be set back to false when the alert dismisses. You will need to do that in your code. |
Attribute | is-open |
Type | boolean |
Default | false |
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 alert is dismissed. |
Attribute | undefined |
Type | ((baseEl: any, opts?: any) => Animation) | undefined |
Default | undefined |
message
Description | The main message to be displayed in the alert. message can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example <Ionic> would become <Ionic> For more information: Security Documentation This property accepts custom HTML as a string. Content is parsed as plaintext by default. innerHTMLTemplatesEnabled must be set to true in the Ionic config before custom HTML can be used. |
Attribute | message |
Type | IonicSafeString | string | undefined |
Default | undefined |
mode
Description | The mode determines which platform styles to use. |
Attribute | mode |
Type | "ios" | "md" |
Default | undefined |
subHeader
Description | The subtitle in the heading of the alert. Displayed under the title. |
Attribute | sub-header |
Type | string | undefined |
Default | undefined |
translucent
Description | If true , the alert will be translucent. Only applies when the mode is "ios" and the device supports backdrop-filter . |
Attribute | translucent |
Type | boolean |
Default | false |
trigger
Description | An ID corresponding to the trigger element that causes the alert to open when clicked. |
Attribute | trigger |
Type | string | undefined |
Default | undefined |
イベント
Name | Description |
---|---|
didDismiss | Emitted after the alert has dismissed. Shorthand for ionAlertDidDismiss. |
didPresent | Emitted after the alert has presented. Shorthand for ionAlertWillDismiss. |
ionAlertDidDismiss | Emitted after the alert has dismissed. |
ionAlertDidPresent | Emitted after the alert has presented. |
ionAlertWillDismiss | Emitted before the alert has dismissed. |
ionAlertWillPresent | Emitted before the alert has presented. |
willDismiss | Emitted before the alert has dismissed. Shorthand for ionAlertWillDismiss. |
willPresent | Emitted before the alert has presented. Shorthand for ionAlertWillPresent. |
メソッド
dismiss
Description | Dismiss the alert overlay after it has been presented. |
Signature | dismiss(data?: any, role?: string) => Promise<boolean> |
onDidDismiss
Description | Returns a promise that resolves when the alert did dismiss. |
Signature | onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>> |
onWillDismiss
Description | Returns a promise that resolves when the alert will dismiss. |
Signature | onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>> |
present
Description | Present the alert overlay after it has been created. |
Signature | present() => Promise<void> |
CSS Shadow Parts
No CSS shadow parts available for this component.
CSSカスタムプロパティ
Name | Description |
---|---|
--backdrop-opacity | Opacity of the backdrop |
--background | Background of the alert |
--height | Height of the alert |
--max-height | Maximum height of the alert |
--max-width | Maximum width of the alert |
--min-height | Minimum height of the alert |
--min-width | Minimum width of the alert |
--width | Width of the alert |
Slots
No slots available for this component.