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​

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アクションシートの提示時に使用するアニメーションです。
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​

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アクションシートが解除されたときに使用するアニメーションです。
Attributeleave-animation
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

イベント​

NameDescriptionBubbles
didDismissEmitted after the action sheet has dismissed. Shorthand for ionActionSheetDidDismiss.true
didPresentEmitted after the action sheet has presented. Shorthand for ionActionSheetWillDismiss.true
ionActionSheetDidDismissアクションシートが解散した後に発行されます。true
ionActionSheetDidPresentアクションシートが提示された後に発行されます。true
ionActionSheetWillDismissアクションシートが解散する前に発行されます。true
ionActionSheetWillPresentアクションシートが提示される前に発行されます。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. This is a no-op if the overlay has not been presented yet. If you want to remove an overlay from the DOM that was never presented, use the remove method.
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