ion-action-sheet

Contents

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

Creating

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

Buttons

Buttonの role プロパティは、 destructivecancel のどちらかを利用できます。 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 actionSheetController = document.querySelector('ion-action-sheet-controller');

  const actionSheet = await 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();
}
import React, { useState } from 'react'
import { IonActionSheet, IonContent, IonButton } from '@ionic/react';

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

  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.

Attributeanimated
Typeboolean
Defaulttrue

backdropDismiss

Description

If true, the action sheet will be dismissed when the backdrop is clicked.

Attributebackdrop-dismiss
Typeboolean
Defaulttrue

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.

Attributecss-class
Typestring | 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.

Attributeheader
Typestring | undefined

keyboardClose

Description

If true, the keyboard will be automatically dismissed when the overlay is presented.

Attributekeyboard-close
Typeboolean
Defaulttrue

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.

Attributemode
Type"ios" | "md"

subHeader

Description

Subtitle for the action sheet.

Attributesub-header
Typestring | undefined

translucent

Description

If true, the action sheet will be translucent. Only applies when the mode is "ios" and the device supports backdrop-filter.

Attributetranslucent
Typeboolean
Defaultfalse

イベント

NameDescription
ionActionSheetDidDismissEmitted after the alert has dismissed.
ionActionSheetDidPresentEmitted after the alert has presented.
ionActionSheetWillDismissEmitted before the alert has dismissed.
ionActionSheetWillPresentEmitted before the alert has presented.

メソッド

dismiss

Description

Dismiss the action sheet overlay after it has been presented.

Signaturedismiss(data?: any, role?: string | undefined) => Promise<boolean>

onDidDismiss

Description

Returns a promise that resolves when the action sheet did dismiss.

SignatureonDidDismiss() => Promise<OverlayEventDetail<any>>

onWillDismiss

Description

Returns a promise that resolves when the action sheet will dismiss.

SignatureonWillDismiss() => Promise<OverlayEventDetail<any>>

present

Description

Present the action sheet overlay after it has been created.

Signaturepresent() => Promise<void>

CSSカスタムプロパティ

NameDescription
--backgroundBackground of the action sheet group
--background-activatedBackground of the activated action sheet button
--background-selectedBackground of the selected action sheet button
--colorColor of the action sheet text
--heightheight of the action sheet
--max-heightMaximum height of the action sheet
--max-widthMaximum width of the action sheet
--min-heightMinimum height of the action sheet
--min-widthMinimum width of the action sheet
--widthWidth of the action sheet
View Source