ion-action-sheet

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

Creating

Action Sheetは、 Action Sheet Controller を使って、 buttons とそれぞれのボタンごとに text とオプションで handler と role をつけて作成します。handlerの返り値が false の場合、Action Sheetは破棄されません。Action Sheetはオプションで header, subHeader を持つことができます。.

Buttons

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

利用方法

import { Component } from '@angular/core';
import { ActionSheetController } from '@ionic/angular';

@Component({
  selector: 'action-sheet-example',
  templateUrl: 'action-sheet-example.html',
  styleUrls: ['./action-sheet-example.css'],
})
export class ActionSheetExample {

  constructor(public actionSheetController: ActionSheetController) {}

  async presentActionSheet() {
    const actionSheet = await this.actionSheetController.create({
      header: 'Albums',
      buttons: [{
        text: 'Delete',
        role: 'destructive',
        icon: 'trash',
        handler: () => {
          console.log('Delete clicked');
        }
      }, {
        text: 'Share',
        icon: 'share',
        handler: () => {
          console.log('Share clicked');
        }
      }, {
        text: 'Play (open modal)',
        icon: 'arrow-dropright-circle',
        handler: () => {
          console.log('Play clicked');
        }
      }, {
        text: 'Favorite',
        icon: 'heart',
        handler: () => {
          console.log('Favorite clicked');
        }
      }, {
        text: 'Cancel',
        icon: 'close',
        role: 'cancel',
        handler: () => {
          console.log('Cancel clicked');
        }
      }]
    });
    await actionSheet.present();
  }

}

async function presentActionSheet() {

  const actionSheet = document.createElement('ion-action-sheet');

  actionSheet.header = "Albums";
  actionSheet.buttons = [{
    text: 'Delete',
    role: 'destructive',
    icon: 'trash',
    handler: () => {
      console.log('Delete clicked');
    }
  }, {
    text: 'Share',
    icon: 'share',
    handler: () => {
      console.log('Share clicked');
    }
  }, {
    text: 'Play (open modal)',
    icon: 'arrow-dropright-circle',
    handler: () => {
      console.log('Play clicked');
    }
  }, {
    text: 'Favorite',
    icon: 'heart',
    handler: () => {
      console.log('Favorite clicked');
    }
  }, {
    text: 'Cancel',
    icon: 'close',
    role: 'cancel',
    handler: () => {
      console.log('Cancel clicked');
    }
  }];
  document.body.appendChild(actionSheet);
  return actionSheet.present();
}

import React, { useState } from 'react'
import { IonActionSheet, IonContent, IonButton } from '@ionic/react';

export const ActionSheetExample: React.FC = () => {

  const [showActionSheet, setShowActionSheet] = useState(false);

  return (
    <IonContent>
      <IonButton onClick={() => setShowActionSheet(true)} expand="block">Show Action Sheet</IonButton>
      <IonActionSheet
        isOpen={showActionSheet}
        onDidDismiss={() => setShowActionSheet(false)}
        buttons={[{
          text: 'Delete',
          role: 'destructive',
          icon: 'trash',
          handler: () => {
            console.log('Delete clicked');
          }
        }, {
          text: 'Share',
          icon: 'share',
          handler: () => {
            console.log('Share clicked');
          }
        }, {
          text: 'Play (open modal)',
          icon: 'arrow-dropright-circle',
          handler: () => {
            console.log('Play clicked');
          }
        }, {
          text: 'Favorite',
          icon: 'heart',
          handler: () => {
            console.log('Favorite clicked');
          }
        }, {
          text: 'Cancel',
          icon: 'close',
          role: 'cancel',
          handler: () => {
            console.log('Cancel clicked');
          }
        }]}
      >
      </IonActionSheet>
    </IonContent>

  );

}

<template>
  <IonVuePage :title="'Action Sheet'">
    <ion-button @click="presentActionSheet">Show Action Sheet</ion-button>
  </IonVuePage>
</template>

<script>
export default {
  methods: {
    presentActionSheet() {
      return this.$ionic.actionSheetController
        .create({
          header: 'Albums',
          buttons: [
            {
              text: 'Delete',
              role: 'destructive',
              icon: 'trash',
              handler: () => {
                console.log('Delete clicked')
              },
            },
            {
              text: 'Share',
              icon: 'share',
              handler: () => {
                console.log('Share clicked')
              },
            },
            {
              text: 'Play (open modal)',
              icon: 'arrow-dropright-circle',
              handler: () => {
                console.log('Play clicked')
              },
            },
            {
              text: 'Favorite',
              icon: 'heart',
              handler: () => {
                console.log('Favorite clicked')
              },
            },
            {
              text: 'Cancel',
              icon: 'close',
              role: 'cancel',
              handler: () => {
                console.log('Cancel clicked')
              },
            },
          ],
        })
        .then(a => a.present())
    },
  },
}
</script>

プロパティ

animated
Description	If `true`, the action sheet will animate.
Attribute	`animated`
Type	`boolean`
Default	`true`
backdropDismiss
Description	If `true`, the action sheet will be dismissed when the backdrop is clicked.
Attribute	`backdrop-dismiss`
Type	`boolean`
Default	`true`
buttons
Description	An array of buttons for the action sheet.
Type	`(string \| ActionSheetButton)[]`
Default	`[]`
cssClass
Description	Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.
Attribute	`css-class`
Type	`string \| string[] \| undefined`
enterAnimation
Description	Animation to use when the action sheet is presented.
Type	`((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) \| undefined`
header
Description	Title for the action sheet.
Attribute	`header`
Type	`string \| undefined`
keyboardClose
Description	If `true`, the keyboard will be automatically dismissed when the overlay is presented.
Attribute	`keyboard-close`
Type	`boolean`
Default	`true`
leaveAnimation
Description	Animation to use when the action sheet is dismissed.
Type	`((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) \| undefined`
mode
Description	The mode determines which platform styles to use.
Attribute	`mode`
Type	`"ios" \| "md"`
subHeader
Description	Subtitle for the action sheet.
Attribute	`sub-header`
Type	`string \| undefined`
translucent
Description	If `true`, the action sheet will be translucent. Only applies when the mode is `"ios"` and the device supports `backdrop-filter`.
Attribute	`translucent`
Type	`boolean`
Default	`false`

イベント

Name	Description
`ionActionSheetDidDismiss`	Emitted after the alert has dismissed.
`ionActionSheetDidPresent`	Emitted after the alert has presented.
`ionActionSheetWillDismiss`	Emitted before the alert has dismissed.
`ionActionSheetWillPresent`	Emitted before the alert has presented.

メソッド

dismiss
Description	Dismiss the action sheet overlay after it has been presented.
Signature	`dismiss(data?: any, role?: string \| undefined) => Promise<boolean>`
onDidDismiss
Description	Returns a promise that resolves when the action sheet did dismiss.
Signature	`onDidDismiss() => Promise<OverlayEventDetail<any>>`
onWillDismiss
Description	Returns a promise that resolves when the action sheet will dismiss.
Signature	`onWillDismiss() => Promise<OverlayEventDetail<any>>`
present
Description	Present the action sheet overlay after it has been created.
Signature	`present() => Promise<void>`

CSSカスタムプロパティ

Name	Description
`--background`	Background of the action sheet group
`--background-activated`	Background of the action sheet button when pressed
`--background-selected`	Background of the selected action sheet button
`--color`	Color of the action sheet text
`--height`	height of the action sheet
`--max-height`	Maximum height of the action sheet
`--max-width`	Maximum width of the action sheet
`--min-height`	Minimum height of the action sheet
`--min-width`	Minimum width of the action sheet
`--width`	Width of the action sheet

ion-action-sheet

Creating

Buttons

利用方法

プロパティ

animated

backdropDismiss

buttons

cssClass

enterAnimation

header

keyboardClose

leaveAnimation

mode

subHeader

translucent

イベント

メソッド

dismiss

onDidDismiss

onWillDismiss

present

CSSカスタムプロパティ