ion-action-sheet
Action Sheetは複数の選択肢を表示するダイアログです。アプリのコンテンツ上に表示され、ユーザが手動で破棄しないとアプリの利用を再開することはできません。ios
modeでは、破壊的な選択肢は明示されます(コンテンツの削除などは赤字などでわかりやすく表示されます)。Action Sheetを破棄するには、背景をタップする、デスクトップのパソコンの場合はエスケープキーを押すなど、複数の選択肢があります。
Button
Buttonの role
プロパティは、
destructive
か cancel
のどちらかを利用できます。 roleプロパティがない場合は、プラットフォームに応じたデフォルトの外観となります。cancel
role を持つButtonは、配列 buttons
のどこに配置してもAction Sheetの最下部に表示されます。 Note:
destructive
roleをつけるButtonは、一番上のButtonとして配置することをおすすめします。また、背景をタップしてAction Sheetを破棄した場合、cancel role に設定されているhandlerが実行されます。
Customization
Action Sheet uses scoped encapsulation, which means it will automatically scope its CSS by appending each of the styles with an additional class at runtime. Overriding scoped selectors in CSS requires a higher specificity selector.
We recommend passing a custom class to cssClass
in the
create
method and using that to add custom styles to the host and inner elements. This property can also accept multiple classes separated by spaces. View the
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;
}
Any of the defined
.my-custom-class {
--background: #e5e5e5;
}
If you are building an Ionic Angular app, the styles need to be added to a global stylesheet file. Read
Style Placement in the Angular section below for more information.
利用方法
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',
cssClass: 'my-custom-class',
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: 'caret-forward-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();
}
}
Style Placement
In Angular, the CSS of a specific page is scoped only to elements of that page. Even though the Action Sheet can be presented from within a page, the
ion-action-sheet
element is appended outside of the current page. This means that any custom styles need to go in a global stylesheet file. In an Ionic Angular starter this can be the
src/global.scss
file or you can register a new global style file by
adding to the styles
build option in
angular.json
.
async function presentActionSheet() {
const actionSheet = document.createElement('ion-action-sheet');
actionSheet.header = 'Albums';
actionSheet.cssClass = 'my-custom-class';
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: 'caret-forward-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';
import { trash, share, caretForwardCircle, heart, close } from 'ionicons/icons';
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)}
cssClass='my-custom-class'
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: caretForwardCircle,
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>
);
}
import { Component, h } from '@stencil/core';
import { actionSheetController } from '@ionic/core';
@Component({
tag: 'action-sheet-example',
styleUrl: 'action-sheet-example.css'
})
export class ActionSheetExample {
async presentActionSheet() {
const actionSheet = await actionSheetController.create({
header: 'Albums',
cssClass: 'my-custom-class',
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: 'caret-forward-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();
}
render() {
return [
<ion-content>
<ion-button onClick={() => this.presentActionSheet()}>Present Action Sheet</ion-button>
</ion-content>
];
}
}
<template>
<ion-button @click="presentActionSheet">Show Action Sheet</ion-button>
</template>
<script>
import { IonButton, actionSheetController } from '@ionic/vue';
import { defineComponent } from 'vue';
import { caretForwardCircle, close, heart, trash, share } from 'ionicons/icons';
export default defineComponent({
components: { IonButton },
methods: {
async presentActionSheet() {
const actionSheet = await actionSheetController
.create({
header: 'Albums',
cssClass: 'my-custom-class',
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: caretForwardCircle,
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')
},
},
],
});
return actionSheet.present();
},
},
});
</script>
Developers can also use this component directly in their template:
<template>
<ion-button @click="setOpen(true)">Show Action Sheet</ion-button>
<ion-action-sheet
:is-open="isOpenRef"
header="Albums"
css-class="my-custom-class"
:buttons="buttons"
@onDidDismiss="setOpen(false)"
>
</ion-action-sheet>
</template>
<script>
import { IonActionSheet, IonButton } from '@ionic/vue';
import { defineComponent, ref } from 'vue';
import { caretForwardCircle, close, heart, trash, share } from 'ionicons/icons';
export default defineComponent({
components: { IonActionSheet, IonButton },
setup() {
const isOpenRef = ref(false);
const setOpen = (state: boolean) => isOpenRef.value = state;
const 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: caretForwardCircle,
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')
},
},
];
return { buttons, isOpenRef, setOpen }
}
});
</script>
プロパティ
animated | |
---|---|
Description | If |
Attribute | animated |
Type | boolean |
Default | true |
backdropDismiss | |
Description | If |
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 | ((baseEl: any, opts?: any) => Animation) | undefined |
header | |
Description | Title for the action sheet. |
Attribute | header |
Type | string | undefined |
keyboardClose | |
Description | If |
Attribute | keyboard-close |
Type | boolean |
Default | true |
leaveAnimation | |
Description | Animation to use when the action sheet is dismissed. |
Type | ((baseEl: any, opts?: any) => 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 |
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<T = any>() => Promise<OverlayEventDetail<T>> |
onWillDismiss | |
Description | Returns a promise that resolves when the action sheet will dismiss. |
Signature | onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>> |
present | |
Description | Present the action sheet overlay after it has been created. |
Signature | present() => Promise<void> |
CSSカスタムプロパティ
Name | Description |
---|---|
--backdrop-opacity | Opacity of the backdrop |
--background | Background of the action sheet group |
--button-background | Background of the action sheet button |
--button-background-activated | Background of the action sheet button when pressed. Note: setting this will interfere with the Material Design ripple. |
--button-background-activated-opacity | Opacity of the action sheet button background when pressed |
--button-background-focused | Background of the action sheet button when tabbed to |
--button-background-focused-opacity | Opacity of the action sheet button background when tabbed to |
--button-background-hover | Background of the action sheet button on hover |
--button-background-hover-opacity | Opacity of the action sheet button background on hover |
--button-background-selected | Background of the selected action sheet button |
--button-background-selected-opacity | Opacity of the selected action sheet button background |
--button-color | Color of the action sheet button |
--button-color-activated | Color of the action sheet button when pressed |
--button-color-focused | Color of the action sheet button when tabbed to |
--button-color-hover | Color of the action sheet button on hover |
--button-color-selected | Color 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 |