scoped
アラートは、ユーザーに情報を提示したり、Inputを使ってユーザーから情報を収集したりするダイアログである。アラートはアプリのコンテンツの上に表示され、アプリとの対話を再開する前に、ユーザーが手動で解除する必要があります。また、オプションで header
、subHeader
、message
を持つことができます。
ion-alert
は、テンプレートに直接コンポーネントを記述して使用することができます。これにより、アラートを表示するために必要なハンドラの数を減らすことができます。
ion-alert
の isOpen
プロパティは、開発者がアプリケーションの状態からアラートの表示状態を制御することを可能にします。つまり、isOpen
を true
に設定するとアラートが表示され、isOpen
を false
に設定するとアラートは解除されます。
isOpen
は一方通行のデータバインディングを使用しているため、アラートが解除されたときに自動的に false
に設定されることはありません。開発者は ionAlertDidDismiss
または didDismiss
イベントを待ち、isOpen
を false
に設定する必要があります。この理由は、ion-alert
の内部がアプリケーションの状態と密接に結合するのを防ぐためである。一方通行のデータバインディングでは、アラートはリアクティブ変数が提供するブーリアン値だけを気にすればよい。双方向のデータバインディングでは、アラートはブーリアン値とリアクティブ変数の存在の両方に関心を持つ必要があります。これは、非決定的な動作につながり、アプリケーションのデバッグを困難にする可能性があります。
alertController
は、アラートを表示するタイミングや解除するタイミングをより細かく制御する必要がある場合に使用することができる。
buttons
の配列には、各buttonの text
のプロパティと、オプションで handler
を利用することができます。 handler
が false
を返した場合、buttonがクリックされてもAlertは自動的に解除されません。すべての buttons
は、左から右にボタン配列に追加された順序で表示されます。 Note: 一番右のボタン(配列の最後の1つ)がメインボタンです。
オプションで、cancel
のような role
プロパティをボタンに追加することができます。もし cancel
ロールがボタンのいずれかに設定されている場合、バックドロップをタップしてアラートが解除されると、キャンセルロールを持つボタンから handler が起動されます。
Console messages will appear here when logged from the example above.
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を構築することをお勧めします。
Alertはscopedによるカプセル化を使用しており、実行時に各スタイルにクラスを追加することで自動的にCSSをスコープします。CSSでscopedセレクタをオーバーライドするには、higher specificity セレクタが必要です。
create
メソッドで cssClass
にカスタムクラスを渡し、それを使ってホストと内部要素にカスタムスタイルを追加することをお勧めします。このプロパティは、スペースで区切られた複数のクラスを受け付けることもできます。
.alert-wrapper {
background: #e5e5e5;
}
.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
要素の 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
プロパティにカスタム値を定義することで、手動で上書きすることができます。
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',
},
},
],
});
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>;
}
interface AlertInput {
type?: TextFieldTypes | 'checkbox' | 'radio' | 'textarea';
name?: string;
placeholder?: string;
value?: any;
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;
}
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;
}
Description | If true , the alert will animate. |
Attribute | animated |
Type | boolean |
Default | true |
Description | If true , the alert will be dismissed when the backdrop is clicked. |
Attribute | backdrop-dismiss |
Type | boolean |
Default | true |
Description | Array of buttons to be added to the alert. |
Attribute | undefined |
Type | (string | AlertButton)[] |
Default | [] |
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 |
Description | Animation to use when the alert is presented. |
Attribute | undefined |
Type | ((baseEl: any, opts?: any) => Animation) | undefined |
Default | undefined |
Description | The main title in the heading of the alert. |
Attribute | header |
Type | string | undefined |
Default | undefined |
Description | Additional attributes to pass to the alert. |
Attribute | undefined |
Type | undefined | { [key: string]: any; } |
Default | undefined |
Description | Array of input to show in the alert. |
Attribute | undefined |
Type | AlertInput[] |
Default | [] |
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 |
Description | If true , the keyboard will be automatically dismissed when the overlay is presented. |
Attribute | keyboard-close |
Type | boolean |
Default | true |
Description | Animation to use when the alert is dismissed. |
Attribute | undefined |
Type | ((baseEl: any, opts?: any) => Animation) | undefined |
Default | undefined |
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 |
Description | The mode determines which platform styles to use. |
Attribute | mode |
Type | "ios" | "md" |
Default | undefined |
Description | The subtitle in the heading of the alert. Displayed under the title. |
Attribute | sub-header |
Type | string | undefined |
Default | undefined |
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 |
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 | Bubbles |
---|
didDismiss | Emitted after the alert has dismissed. Shorthand for ionAlertDidDismiss. | true |
didPresent | Emitted after the alert has presented. Shorthand for ionAlertWillDismiss. | true |
ionAlertDidDismiss | Emitted after the alert has dismissed. | true |
ionAlertDidPresent | Emitted after the alert has presented. | true |
ionAlertWillDismiss | Emitted before the alert has dismissed. | true |
ionAlertWillPresent | Emitted before the alert has presented. | true |
willDismiss | Emitted before the alert has dismissed. Shorthand for ionAlertWillDismiss. | true |
willPresent | Emitted before the alert has presented. Shorthand for ionAlertWillPresent. | true |
Description | Dismiss the alert overlay after it has been presented. |
Signature | dismiss(data?: any, role?: string) => Promise<boolean> |
Description | Returns a promise that resolves when the alert did dismiss. |
Signature | onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>> |
Description | Returns a promise that resolves when the alert will dismiss. |
Signature | onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>> |
Description | Present the alert overlay after it has been created. |
Signature | present() => Promise<void> |
No CSS shadow parts available for this component.
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 |
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 |
No slots available for this component.