Skip to main content
Version: v8

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 フィールドを使用して、アクションシートがどのように却下されたかについての情報を収集することができます。

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アクションシートのボタンの配列です。
Attributebuttons
Type(string ｜ ActionSheetButton<any>)[]
Default[]

cssClass​

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

enterAnimation​

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

htmlAttributes​

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

isOpen​

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

keyboardClose​

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

leaveAnimation​

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

mode​

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

This is a virtual property that is set once during initialization and will not update if you change its value after the initial render.
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

イベント​

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

メソッド​

dismiss​

Descriptionアクションシートのオーバーレイが表示された後に閉じます。オーバーレイがまだ表示されていない場合は何もしません。表示されなかったオーバーレイを DOM から削除するには、remove メソッドを使用してください。
Signaturedismiss(data?: any, role?: string) => Promise<boolean>
Parametersdata: Any data to emit in the dismiss events.
role: The role of the element that is dismissing the action sheet. This can be useful in a button handler for determining which button was clicked to dismiss the action sheet. Some examples include: "cancel", "destructive", "selected", and "backdrop".

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-disabled無効時の選択されたアクション・シート・ボタンの色
--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