scoped Action Sheetは複数の選択肢を表示するダイアログです。アプリのコンテンツ上に表示され、ユーザが手動で破棄しないとアプリの利用を再開することはできません。ios
modeでは、破壊的な選択肢は明示されます(コンテンツの削除などは赤字などでわかりやすく表示されます)。Action Sheetを破棄するには、背景をタップする、デスクトップのパソコンの場合はエスケープキーを押すなど、複数の選択肢があります。
ion-action-sheet
は、テンプレートに直接コンポーネントを記述することで使用することができます。これにより、アクションシートを表示するために配線する必要があるハンドラの数を減らすことができます。
ion-action-sheet
の isOpen
プロパティは、開発者がアプリケーションの状態からアクションシートの表示状態を制御することを可能にします。つまり、isOpen
がtrue
に設定されるとアクションシートが表示され、isOpen
がfalse
に設定されるとアクションシートは解除されます。
isOpen
は一方通行のデータバインディングを使用しているため、アクションシートが終了したときに自動的に false
に設定されることはありません。開発者は ionActionSheetDidDismiss
または didDismiss
イベントをリッスンして isOpen
を false
に設定する必要があります。この理由は、ion-action-sheet
の内部がアプリケーションの状態と密接に結合するのを防ぐためです。一方通行のデータバインディングでは、アクションシートはリアクティブ変数が提供するブーリアン値だけを気にすればよい。一方通行のデータバインディングでは、アクションシートは、ブーリアン値とリアクティブ変数の存在の両方に関心を持つ必要があります。これは、非決定的な動作につながり、アプリケーションのデバッグを困難にします。
アクションシートの表示・非表示をより細かく制御したい場合は、actionSheetController
を使用することができます。
Buttonの role
プロパティは、 destructive
か cancel
のどちらかを利用できます。 roleプロパティがない場合は、プラットフォームに応じたデフォルトの外観となります。cancel
role を持つButtonは、配列 buttons
のどこに配置してもアクションシートの最下部に表示されます。 Note: destructive
roleをつけるButtonは、一番上のButtonとして配置することをおすすめします。また、背景をタップしてアクションシートを破棄した場合、cancel role に設定されているhandlerが実行されます。
Buttonは ActionSheetButton
の data
プロパティを介してデータを渡すこともできます。これは onDidDismiss
メソッドの戻り値にある data
フィールドにデータを入力します。
didDismiss
イベントが発生すると、イベント詳細の data
と role
フィールドを使用して、アクションシートがどのように却下されたかについての情報を収集することができます。
Console messages will appear here when logged from the example above.
アクションシートはscopedによるカプセル化を採用しており、実行時に各スタイルにクラスを追加することで、自動的にCSSをスコープ化します。CSSでscopedセレクタをオーバーライドするには、higher specificity セレクタが必要です。
私たちは、 create
メソッドで cssClass
にカスタムクラスを渡し、それを使ってホストと内部要素にカスタムスタイルを追加することをお勧めします。このプロパティは、スペースで区切られた複数のクラスを受け付けることもできます。
.action-sheet-group { background : #e5e5e5 ; } .my-custom-class .action-sheet-group { background : #e5e5e5 ; }
コピー CSSカスタムプロパティ は、個々の要素を対象とすることなく、アクションシートのスタイルに使用することができます。
アクションシートは、スクリーンリーダーにとって アクセシブル であるためにariaプロパティを設定しますが、これらのプロパティは、十分な説明になっていなかったり、アクションシートがアプリでどのように使用されているかに合っていなかったりする場合、オーバーライドすることができます。
アクションシートには role
として dialog
が設定されます。ARIA仕様に合わせるためには、aria-label
属性かaria-labelledby
属性のどちらかを設定しなければなりません。
Ionicは自動的にヘッダー要素を指すように aria-labelledby
を設定するので、すべてのアクションシートには header
プロパティを定義することを強く推奨します。しかし、header
を含めない場合は、htmlAttributes
プロパティを使って、説明的なaria-label
を指定するか、カスタムのaria-labelledby
値を設定することもできます。
Angular Javascript React Vue const actionSheet = await this . actionSheetController . create ( { htmlAttributes : { 'aria-label' : 'action sheet dialog' , } , } ) ;
コピー const actionSheet = await this . actionSheetController . create ( { htmlAttributes : { 'aria-label' : 'action sheet dialog' , } , } ) ;
コピー useIonActionSheet ( { htmlAttributes : { 'aria-label' : 'action sheet dialog' , } , } ) ;
コピー const actionSheet = await actionSheetController . create ( { htmlAttributes : { 'aria-label' : 'action sheet dialog' , } , } ) ;
コピー テキストを含むボタンはスクリーンリーダーによって読み取られる。ボタンがアイコンのみを含んでいる場合や、既存のテキスト以外の説明が必要な場合は、ボタンの htmlAttributes
プロパティに aria-label
を渡して、ラベルをボタンに割り当てる必要があります。
Angular Javascript React Vue const actionSheet = await this . actionSheetController . create ( { header : 'Header' , buttons : [ { icon : 'close' , htmlAttributes : { 'aria-label' : 'close' , } , } , ] , } ) ;
コピー const actionSheet = await this . actionSheetController . create ( { header : 'Header' , buttons : [ { icon : 'close' , htmlAttributes : { 'aria-label' : 'close' , } , } , ] , } ) ;
コピー useIonActionSheet ( { header : 'Header' , buttons : [ { icon : 'close' , htmlAttributes : { 'aria-label' : 'close' , } , } , ] , } ) ;
コピー const actionSheet = await actionSheetController . create ( { header : 'Header' , buttons : [ { icon : 'close' , htmlAttributes : { 'aria-label' : 'close' , } , } , ] , } ) ;
コピー interface ActionSheetButton < T = any > { text ? : string ; role ? : 'cancel' | 'destructive' | 'selected' | string ; icon ? : string ; cssClass ? : string | string [ ] ; id ? : string ; htmlAttributes ? : { [ key : string ] : any } ; handler ? : ( ) => boolean | void | Promise < boolean | void > ; data ? : T ; }
コピー interface ActionSheetOptions { header ? : string ; subHeader ? : string ; cssClass ? : string | string [ ] ; buttons : ( ActionSheetButton | string ) [ ] ; backdropDismiss ? : boolean ; translucent ? : boolean ; animated ? : boolean ; mode ? : Mode ; keyboardClose ? : boolean ; id ? : string ; htmlAttributes ? : { [ key : string ] : any } ; enterAnimation ? : AnimationBuilder ; leaveAnimation ? : AnimationBuilder ; }
コピー Description If true
, the action sheet will animate. Attribute animated
Type boolean
Default true
Description If true
, the action sheet will be dismissed when the backdrop is clicked. Attribute backdrop-dismiss
Type boolean
Default true
Description An array of buttons for the action sheet. Attribute undefined
Type (string | ActionSheetButton<any>)[]
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 action sheet is presented. Attribute undefined
Type ((baseEl: any, opts?: any) => Animation) | undefined
Default undefined
Description Title for the action sheet. Attribute header
Type string | undefined
Default undefined
Description Additional attributes to pass to the action sheet. Attribute undefined
Type undefined | { [key: string]: any; }
Default undefined
Description If true
, the action sheet will open. If false
, the action sheet will close. Use this if you need finer grained control over presentation, otherwise just use the actionSheetController or the trigger
property. Note: isOpen
will not automatically be set back to false
when the action sheet 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 action sheet is dismissed. Attribute undefined
Type ((baseEl: any, opts?: any) => Animation) | undefined
Default undefined
Description The mode determines which platform styles to use. Attribute mode
Type "ios" | "md"
Default undefined
Description Subtitle for the action sheet. Attribute sub-header
Type string | undefined
Default undefined
Description If true
, the action sheet 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 action sheet to open when clicked. Attribute trigger
Type string | undefined
Default undefined
Name Description didDismiss
Emitted after the action sheet has dismissed. Shorthand for ionActionSheetDidDismiss. didPresent
Emitted after the action sheet has presented. Shorthand for ionActionSheetWillDismiss. ionActionSheetDidDismiss
Emitted after the action sheet has dismissed. ionActionSheetDidPresent
Emitted after the action sheet has presented. ionActionSheetWillDismiss
Emitted before the action sheet has dismissed. ionActionSheetWillPresent
Emitted before the action sheet has presented. willDismiss
Emitted before the action sheet has dismissed. Shorthand for ionActionSheetWillDismiss. willPresent
Emitted before the action sheet has presented. Shorthand for ionActionSheetWillPresent.
Description Dismiss the action sheet overlay after it has been presented. Signature dismiss(data?: any, role?: string) => Promise<boolean>
Description Returns a promise that resolves when the action sheet did dismiss. Signature onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>
Description Returns a promise that resolves when the action sheet will dismiss. Signature onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>
Description Present the action sheet 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 action sheet group --button-background
Background of the action sheet button --button-background-activated
Background of the action sheet button when pressed. Note: setting this will interfere with the Material Design ripple. --button-background-activated-opacity
Opacity of the action sheet button background when pressed --button-background-focused
Background of the action sheet button when tabbed to --button-background-focused-opacity
Opacity of the action sheet button background when tabbed to --button-background-hover
Background of the action sheet button on hover --button-background-hover-opacity
Opacity of the action sheet button background on hover --button-background-selected
Background of the selected action sheet button --button-background-selected-opacity
Opacity of the selected action sheet button background --button-color
Color of the action sheet button --button-color-activated
Color of the action sheet button when pressed --button-color-focused
Color of the action sheet button when tabbed to --button-color-hover
Color of the action sheet button on hover --button-color-selected
Color of the selected action sheet button --color
Color of the action sheet text --height
height of the action sheet --max-height
Maximum height of the action sheet --max-width
Maximum width of the action sheet --min-height
Minimum height of the action sheet --min-width
Minimum width of the action sheet --width
Width of the action sheet
No slots available for this component.