メインコンテンツまでスキップ
バージョン: v8 (beta)

ion-action-sheet

scoped

Action Sheetは複数の選択肢を表示するダイアログです。アプリのコンテンツ上に表示され、ユーザが手動で破棄しないとアプリの利用を再開することはできません。ios modeでは、破壊的な選択肢は明示されます(コンテンツの削除などは赤字などでわかりやすく表示されます)。Action Sheetを破棄するには、背景をタップする、デスクトップのパソコンの場合はエスケープキーを押すなど、複数の選択肢があります。

インラインアクションシート (推奨)

ion-action-sheet は、テンプレートに直接コンポーネントを記述することで使用することができます。これにより、アクションシートを表示するために配線する必要があるハンドラの数を減らすことができます。

isOpen を使う

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

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

Controller アクションシート

アクションシートの表示・非表示をより細かく制御したい場合は、actionSheetControllerを使用することができます。

Buttons

Buttonの role プロパティは、 destructivecancel のどちらかを利用できます。 roleプロパティがない場合は、プラットフォームに応じたデフォルトの外観となります。cancel role を持つButtonは、配列 buttons のどこに配置してもアクションシートの最下部に表示されます。 Note: destructive roleをつけるButtonは、一番上のButtonとして配置することをおすすめします。また、背景をタップしてアクションシートを破棄した場合、cancel role に設定されているhandlerが実行されます。

Buttonは ActionSheetButtondata プロパティを介してデータを渡すこともできます。これは onDidDismiss メソッドの戻り値にある data フィールドにデータを入力します。

Collecting Role Information on Dismiss

didDismiss イベントが発生すると、イベント詳細の datarole フィールドを使用して、アクションシートがどのように却下されたかについての情報を収集することができます。

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

テーマ

アクションシートはscopedによるカプセル化を採用しており、実行時に各スタイルにクラスを追加することで、自動的にCSSをスコープ化します。CSSでscopedセレクタをオーバーライドするには、higher specificity セレクタが必要です。

スタイリング

私たちは、 create メソッドで cssClass にカスタムクラスを渡し、それを使ってホストと内部要素にカスタムスタイルを追加することをお勧めします。このプロパティは、スペースで区切られた複数のクラスを受け付けることもできます。

/* DOES NOT WORK - not specific enough */
.action-sheet-group {
background: #e5e5e5;
}

/* Works - pass "my-custom-class" in cssClass to increase specificity */
.my-custom-class .action-sheet-group {
background: #e5e5e5;
}

CSSカスタムプロパティ

CSSカスタムプロパティ は、個々の要素を対象とすることなく、アクションシートのスタイルに使用することができます。

アクセシビリティ

Screen Readers

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

Role

アクションシートには role として dialog が設定されます。ARIA仕様に合わせるためには、aria-label属性かaria-labelledby属性のどちらかを設定しなければなりません。

Action Sheet の概要

Ionicは自動的にヘッダー要素を指すように aria-labelledby を設定するので、すべてのアクションシートには header プロパティを定義することを強く推奨します。しかし、headerを含めない場合は、htmlAttributesプロパティを使って、説明的なaria-labelを指定するか、カスタムのaria-labelledby値を設定することもできます。

const actionSheet = await this.actionSheetController.create({
htmlAttributes: {
'aria-label': 'action sheet dialog',
},
});

Action Sheet Buttons の概要

テキストを含むボタンはスクリーンリーダーによって読み取られる。ボタンがアイコンのみを含んでいる場合や、既存のテキスト以外の説明が必要な場合は、ボタンの htmlAttributes プロパティに aria-label を渡して、ラベルをボタンに割り当てる必要があります。

const actionSheet = await this.actionSheetController.create({
header: 'Header',
buttons: [
{
icon: 'close',
htmlAttributes: {
'aria-label': 'close',
},
},
],
});

Interfaces

ActionSheetButton

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

ActionSheetOptions

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

プロパティ

animated

DescriptionIf true, the action sheet will animate.
Attributeanimated
Typeboolean
Defaulttrue

backdropDismiss

DescriptionIf true, the action sheet will be dismissed when the backdrop is clicked.
Attributebackdrop-dismiss
Typeboolean
Defaulttrue

buttons

DescriptionAn array of buttons for the action sheet.
Attributeundefined
Type(string | ActionSheetButton<any>)[]
Default[]

cssClass

DescriptionAdditional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.
Attributecss-class
Typestring | string[] | undefined
Defaultundefined

enterAnimation

DescriptionAnimation to use when the action sheet is presented.
Attributeundefined
Type((baseEl: any, opts?: any) => Animation) | undefined
Defaultundefined
DescriptionTitle for the action sheet.
Attributeheader
Typestring | undefined
Defaultundefined

htmlAttributes

DescriptionAdditional attributes to pass to the action sheet.
Attributeundefined
Typeundefined | { [key: string]: any; }
Defaultundefined

isOpen

DescriptionIf 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.
Attributeis-open
Typeboolean
Defaultfalse

keyboardClose

DescriptionIf true, the keyboard will be automatically dismissed when the overlay is presented.
Attributekeyboard-close
Typeboolean
Defaulttrue

leaveAnimation

DescriptionAnimation to use when the action sheet is dismissed.
Attributeundefined
Type((baseEl: any, opts?: any) => Animation) | undefined
Defaultundefined

mode

DescriptionThe mode determines which platform styles to use.
Attributemode
Type"ios" | "md"
Defaultundefined

subHeader

DescriptionSubtitle for the action sheet.
Attributesub-header
Typestring | undefined
Defaultundefined

translucent

DescriptionIf true, the action sheet will be translucent. Only applies when the mode is "ios" and the device supports backdrop-filter.
Attributetranslucent
Typeboolean
Defaultfalse

trigger

DescriptionAn ID corresponding to the trigger element that causes the action sheet to open when clicked.
Attributetrigger
Typestring | undefined
Defaultundefined

イベント

NameDescriptionBubbles
didDismissEmitted after the action sheet has dismissed. Shorthand for ionActionSheetDidDismiss.true
didPresentEmitted after the action sheet has presented. Shorthand for ionActionSheetWillDismiss.true
ionActionSheetDidDismissEmitted after the action sheet has dismissed.true
ionActionSheetDidPresentEmitted after the action sheet has presented.true
ionActionSheetWillDismissEmitted before the action sheet has dismissed.true
ionActionSheetWillPresentEmitted before the action sheet has presented.true
willDismissEmitted before the action sheet has dismissed. Shorthand for ionActionSheetWillDismiss.true
willPresentEmitted before the action sheet has presented. Shorthand for ionActionSheetWillPresent.true

メソッド

dismiss

DescriptionDismiss the action sheet overlay after it has been presented.
Signaturedismiss(data?: any, role?: string) => Promise<boolean>

onDidDismiss

DescriptionReturns a promise that resolves when the action sheet did dismiss.
SignatureonDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>

onWillDismiss

DescriptionReturns a promise that resolves when the action sheet will dismiss.
SignatureonWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>

present

DescriptionPresent the action sheet overlay after it has been created.
Signaturepresent() => Promise<void>

CSS Shadow Parts

No CSS shadow parts available for this component.

CSSカスタムプロパティ

NameDescription
--backdrop-opacityOpacity of the backdrop
--backgroundBackground of the action sheet group
--button-backgroundBackground of the action sheet button
--button-background-activatedBackground of the action sheet button when pressed. Note: setting this will interfere with the Material Design ripple.
--button-background-activated-opacityOpacity of the action sheet button background when pressed
--button-background-focusedBackground of the action sheet button when tabbed to
--button-background-focused-opacityOpacity of the action sheet button background when tabbed to
--button-background-hoverBackground of the action sheet button on hover
--button-background-hover-opacityOpacity of the action sheet button background on hover
--button-background-selectedBackground of the selected action sheet button
--button-background-selected-opacityOpacity of the selected action sheet button background
--button-colorColor of the action sheet button
--button-color-activatedColor of the action sheet button when pressed
--button-color-focusedColor of the action sheet button when tabbed to
--button-color-hoverColor of the action sheet button on hover
--button-color-selectedColor of the selected action sheet button
--colorColor of the action sheet text
--heightheight of the action sheet
--max-heightMaximum height of the action sheet
--max-widthMaximum width of the action sheet
--min-heightMinimum height of the action sheet
--min-widthMinimum width of the action sheet
--widthWidth of the action sheet

Slots

No slots available for this component.