scoped Alertは、ユーザーに情報を提示したり、Inputを使用してユーザーから情報を収集したりするダイアログです。Alertはアプリのコンテンツの上に表示され、アプリの利用を再開する前にユーザーが手動で破棄する必要があります。 オプションに header
, subHeader
と message
を持つことができます。
React や Vue と共に Ionic を使用する場合、 isOpen
プロパティを使用して ion-alert
をテンプレートに直接配置することもできます。ただし、アラートを解除する際には手動で isOpen
を false
に設定する必要があり、自動的に更新されることはありません。
import React , { useState } from 'react' ; import { IonAlert , IonButton , IonContent } from '@ionic/react' ; function Example ( ) { const [ showAlert , setShowAlert ] = useState ( false ) ; return ( < IonContent > < IonButton onClick = { ( ) => setShowAlert ( true ) } > Click Me </ IonButton > < IonAlert isOpen = { showAlert } onDidDismiss = { ( ) => setShowAlert ( false ) } header = " Alert " subHeader = " Important message " message = " This is an alert! " buttons = { [ 'OK' ] } /> </ IonContent > ) ; }
コピー < template > < ion-content > < ion-button @click = " setOpen(true) " > Show Alert </ ion-button > < ion-alert :is-open = " isOpenRef " header = " Alert " sub-header = " Important message " message = " This is an alert! " :buttons = " [ ' OK ' ] " @didDismiss = " setOpen(false) " > </ ion-alert > </ ion-content > </ template > < script lang = " ts " > import { IonAlert , IonButton , IonContent } from '@ionic/vue' ; import { defineComponent , ref } from 'vue' ; export default defineComponent ( { components : { IonAlert , IonButton } , setup ( ) { const isOpenRef = ref ( false ) ; const setOpen = ( state : boolean ) => isOpenRef . value = state ; return { isOpenRef , setOpen } } } ) ; </ script >
コピー buttons
の配列には、各buttonの text
のプロパティと、オプションで handler
を利用することができます。 handler
が false
を返した場合、buttonがクリックされてもAlertは自動的に解除されません。すべての buttons
は、左から右にボタン配列に追加された順序で表示されます。 Note: 一番右のボタン(配列の最後の1つ)がメインボタンです。
オプションで、cancel
のような role
プロパティをボタンに追加することができます。もし cancel
ロールがボタンのいずれかに設定されている場合、バックドロップをタップしてアラートが解除されると、キャンセルロールを持つボタンから handler が起動されます。
Alertには、複数の異なるInputを含めることもでき、そのデータをアプリで受け取ることができます。 Inputはユーザーに情報の入力を促す簡単な方法として使用できます。Radios, checkboxes と text inputs textarea はすべて利用できますが、これらを混ぜて利用することはできません。例えば、Alertはすべてbutton Inputであったり、すべてcheckboxでのInputを持つことはできますが、同一のAlertにradioとcheckbox Inputを混ぜることはできません。ただし、"text" Inputでは、 url
, email
, text
などの複数のtypeを混ぜて利用することはできます。 Alertのガイドラインに収まらない複雑な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アプリを構築する場合、スタイルはグローバルなスタイルシートファイルに追加する必要があります。
interface AlertButton { text : string ; role ? : 'cancel' | 'destructive' | string ; cssClass ? : string | string [ ] ; handler ? : ( value : any ) => boolean | void | { [ key : string ] : any } ; }
コピー 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 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. Developers who only want to pass plain text can disable the custom HTML functionality by setting innerHTMLTemplatesEnabled: false
in the Ionic config. 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
Name Description 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.
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
No slots available for this component.