Skip to main content
Version: v7

ion-action-sheet

scoped

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

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

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

isOpen を使う

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

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

Controller アクションシート

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

Buttons

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

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

Collecting Role Information on Dismiss

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

テーマ

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

アクセシビリティ

アクションシートには role として dialog が与えられます。ARIA仕様に合わせるため、aria-label属性またはaria-labelledby属性のいずれかを設定する必要があります。

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

Interfaces

ActionSheetButton

interface ActionSheetButton<T = any> {
  text?: string;
  role?: 'cancel' | 'destructive' | 'selected' | string;
  icon?: string;
  cssClass?: string | string[];
  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

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

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

htmlAttributes

Descriptionアクションシートに渡す追加属性。
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

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

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

イベント

NameDescription
didDismissEmitted after the action sheet has dismissed. Shorthand for ionActionSheetDidDismiss.
didPresentEmitted after the action sheet has presented. Shorthand for ionActionSheetWillDismiss.
ionActionSheetDidDismissEmitted after the action sheet has dismissed.
ionActionSheetDidPresentEmitted after the action sheet has presented.
ionActionSheetWillDismissEmitted before the action sheet has dismissed.
ionActionSheetWillPresentEmitted before the action sheet has presented.
willDismissEmitted before the action sheet has dismissed. Shorthand for ionActionSheetWillDismiss.
willPresentEmitted before the action sheet has presented. Shorthand for 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.

Contents

Edit this page