Skip to main content
Version: v7

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

Descriptiontrueの場合、アクションシートはアニメーションを行います。
Attributeanimated
Typeboolean
Defaulttrue

backdropDismiss

Descriptiontrueの場合、バックドロップがクリックされるとアクションシートが解除されます。
Attributebackdrop-dismiss
Typeboolean
Defaulttrue

buttons

Descriptionアクションシートのボタンの配列です。
Attributeundefined
Type(string | ActionSheetButton<any>)[]
Default[]

cssClass

DescriptionカスタムCSSに適用する追加のクラス。複数のクラスを指定する場合は、スペースで区切る必要があります。
Attributecss-class
Typestring | string[] | undefined
Defaultundefined

enterAnimation

Descriptionアクションシートの提示時に使用するアニメーションです。
Attributeundefined
Type((baseEl: any, opts?: any) => Animation) | undefined
Defaultundefined
Descriptionアクションシートのタイトルです。
Attributeheader
Typestring | undefined
Defaultundefined

htmlAttributes

Descriptionアクションシートに渡す追加属性。
Attributeundefined
Typeundefined | { [key: string]: any; }
Defaultundefined

isOpen

Descriptiontrueの場合、アクションシートは開かれます。falseの場合、アクションシートは閉じます。プレゼンテーションの細かな制御が必要な場合はこれを使用し、そうでない場合は actionSheetController または trigger プロパティを使用します。注意: アクションシートが終了しても、isOpenは自動的にfalseに戻されません。あなたのコードでそれを行う必要があります。
Attributeis-open
Typeboolean
Defaultfalse

keyboardClose

Descriptiontrueの場合、オーバーレイが表示されたときにキーボードが自動的に解除されます。
Attributekeyboard-close
Typeboolean
Defaulttrue

leaveAnimation

Descriptionアクションシートが解除されたときに使用するアニメーションです。
Attributeundefined
Type((baseEl: any, opts?: any) => Animation) | undefined
Defaultundefined

mode

Descriptionmodeは、どのプラットフォームのスタイルを使用するかを決定します。
Attributemode
Type"ios" | "md"
Defaultundefined

subHeader

Descriptionアクションシートのサブタイトルです。
Attributesub-header
Typestring | undefined
Defaultundefined

translucent

Descriptiontrueの場合、アクションシートは半透明になります。modeが "ios" で、デバイスが backdrop-filter をサポートしている場合にのみ適用されます。
Attributetranslucent
Typeboolean
Defaultfalse

trigger

Descriptionクリックするとアクションシートが開くトリガー要素に対応するID。
Attributetrigger
Typestring | undefined
Defaultundefined

イベント

NameDescription
didDismissアクションシートが解散した後に発行されます。ionActionSheetDidDismissの略記。
didPresentアクションシートが提示された後に発行されます。ionActionSheetWillDismissの略語。
ionActionSheetDidDismissアクションシートが解散した後に発行されます。
ionActionSheetDidPresentアクションシートが提示された後に発行されます。
ionActionSheetWillDismissアクションシートが解散する前に発行されます。
ionActionSheetWillPresentアクションシートが提示される前に発行されます。
willDismissアクションシートが解散する前に発行されます。ionActionSheetWillDismissの略記。
willPresentアクションシートが提示される前に発行されます。ionActionSheetWillPresentの略記。

メソッド

dismiss

Descriptionアクションシートのオーバーレイが提示された後、それを解除します。
Signaturedismiss(data?: any, role?: string) => Promise<boolean>

onDidDismiss

Descriptionアクションシートが解散したときに解決するPromiseを返します。
SignatureonDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>

onWillDismiss

Descriptionアクションシートが解散するタイミングを解決するPromiseを返します。
SignatureonWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>

present

Descriptionアクションシートのオーバーレイを作成後に提示します。
Signaturepresent() => Promise<void>

CSS Shadow Parts

No CSS shadow parts available for this component.

CSSカスタムプロパティ

NameDescription
--backdrop-opacity背景の不透明度
--backgroundアクションシートグループの背景
--button-backgroundアクションシートボタンの背景
--button-background-activatedアクションシートボタンが押されたときの背景。注意:これを設定すると、Material Designの波紋に干渉します。
--button-background-activated-opacityアクションシートボタンが押されたときの背景の不透明度
--button-background-focusedにタブしたときのアクションシートボタンの背景。
--button-background-focused-opacityにタブしたときのアクションシートボタンの背景の不透明度。
--button-background-hoverホバー時のアクションシートボタンの背景
--button-background-hover-opacityホバー時のアクションシートボタンの背景の不透明度
--button-background-selected選択したアクションシートボタンの背景
--button-background-selected-opacity選択されたアクションシートボタンの背景の不透明度
--button-colorアクションシートボタンの色
--button-color-activatedアクションシートボタンが押されたときの色
--button-color-focusedにタブで移動したときのアクションシートのボタンの色。
--button-color-hoverホバー時のアクションシートボタンの色
--button-color-selected選択されたアクションシートのボタンの色
--colorアクションシートテキストの色
--heightアクションシートの高さ
--max-heightアクションシートの最大の高さ
--max-widthアクションシートの最大幅
--min-heightアクションシートの最小高さ
--min-widthアクションシートの最小幅
--widthアクションシートの横幅

Slots

No slots available for this component.