JavaScript Reference > ons-action-sheet

ons-action-sheet

アクションシート、もしくはボトムシートを現在のスクリーン上に表示します。 この要素は、<body>要素に直接アタッチされるか、もしくはons.createElement(template, { append: true })と<template>タグを使ってテンプレートから動的に生成されます。 アクションシートは、選択肢のリストを表示してユーザーに尋ねるのに便利です。ons-action-sheet-buttonは、この要素の中に置くために提供されていますが、それ以外にも他のどのような要素を含むことができます。 Androidデバイスで実行されるときには、自動的にマテリアルデザイン(ボトムシート)として表示されます。

実例

Action sheets

Onsen UI provides <ons-action-sheet> and <ons-action-sheet-button> elements. Use them to create a dialog that slides from the bottom of the screen to give user options.

<ons-action-sheet id="sheet" cancelable title="From template">
  <ons-action-sheet-button icon="md-square-o">Label</ons-action-sheet-button>
  <ons-action-sheet-button icon="md-square-o">Label</ons-action-sheet-button>
  <ons-action-sheet-button icon="md-close">Cancel</ons-action-sheet-button>
</ons-action-sheet>

This component is referred as “Bottom sheets” in the Material Design spec.

You can display or cancel the action sheet by calling its methods show or hide respectively.

Dynamic action sheet

You can also create and open an action sheet dynamically with the method ons.openActionSheet.

This method takes as argument an object where you can define the action sheet’s properties (e.g. id, title) and the buttons inside it.

ons.openActionSheet({
  title: 'My Action Sheet',
  cancelable: true,
  buttons: ['Label 0', 'Label 1', 'Label 2']
});

関連情報

属性

[編集]
名前 型 / デフォルト値 概要
title String アクションシートのタイトルを指定します。ここで指定した文字列を含む新しい要素が作成されます。 Optional.
modifier String ダイアログの表現を指定します。 Optional.
cancelable この属性が設定されると、アクションシートの背景やAndroidデバイスのバックボタンを推すことでアクションシートが閉じるようになります。 Optional.
disabled この属性がある時、ダイアログはdisabled状態になります。 Optional.
animation String
default 		ダイアログを表示する際のアニメーション名を指定します。”none”もしくは”default”を指定できます。 Optional.
animation-options Expression アニメーション時のduration, timing, delayをオブジェクトリテラルで指定します。e.g. {duration: 0.2, delay: 1, timing: 'ease-in'} Optional.
mask-color String
rgba(0, 0, 0, 0.2) 		背景のマスクの色を指定します。”rgba(0, 0, 0, 0.2)”がデフォルト値です。 Optional.
visible Boolean 要素が見える場合にtrue。 Optional.

プロパティ概要

[編集]
名前 概要
title アクションシートのタイトルを指定します。ここで指定した文字列を含む新しい要素が作成されます。
animationOptions アニメーション時のduration, timing, delayをオブジェクトリテラルで指定します。例：{duration: 0.2, delay: 1, timing: ‘ease-in’}
onDeviceBackButton バックボタンハンドラ。
maskColor 背景のマスクの色を指定します。”rgba(0, 0, 0, 0.2)”がデフォルト値です。
visible 要素が見える場合にtrue。
disabled 無効化されている場合にtrue。
cancelable アクションシートがキャンセル可能かどうかを設定します。キャンセル可能なアクションシートは、背景をタップしたりAndroidデバイスのバックボタンを推すことで閉じるようになります。

プリセットのmodifier

[編集]
Name 概要
material マテリアルデザインのボトムシートを表示します。

メソッド

[編集]
シグネチャ 概要
show([options]) ダイアログを開きます。
hide([options]) ダイアログを閉じます。
show([options]): Promise

ダイアログを開きます。

返り値: Resolves to the displayed element.

パラメーター
名前 型 概要
options Object オプションを指定するオブジェクト。
options.animation String アニメーション名を指定します。”none”, “slide”のいずれかを指定します。
options.animationOptions String アニメーション時のduration, delay, timingを指定します。e.g. {duration: 0.2, delay: 0.4, timing: 'ease-in'}
options.callback Function ダイアログが表示され終わった後に呼び出される関数オブジェクトを指定します。
hide([options]): Promise

ダイアログを閉じます。

返り値: 隠れた要素を解決します。

パラメーター
名前 型 概要
options Object オプションを指定するオブジェクト。
options.animation String アニメーション名を指定します。”none”, “slide”のいずれかを指定できます。
options.animationOptions String アニメーション時のduration, delay, timingを指定します。e.g. {duration: 0.2, delay: 0.4, timing: 'ease-in'}
options.callback Function ダイアログが隠れた後に呼び出される関数オブジェクトを指定します。

イベント

[編集]
名前 概要
preshow ダイアログが表示される直前に発火します。
postshow ダイアログが表示された直後に発火します。
prehide ダイアログが隠れる直前に発火します。
posthide ダイアログが隠れた後に発火します。
dialogcancel Fired when the action sheet is canceled. （翻訳中）
preshow

ダイアログが表示される直前に発火します。

パラメーター
名前 型 概要
event Object Event object.
event.actionSheet Object コンポーネントのオブジェクト。
event.cancel Function この関数を実行すると、ダイアログの表示がキャンセルされます。
postshow

ダイアログが表示された直後に発火します。

パラメーター
名前 型 概要
event Object Event object.
event.actionSheet Object コンポーネントのオブジェクト。
prehide

ダイアログが隠れる直前に発火します。

パラメーター
名前 型 概要
event Object Event object.
event.actionSheet Object コンポーネントのオブジェクト。
event.cancel Function この関数を実行すると、ダイアログの非表示がキャンセルされます。
posthide

ダイアログが隠れた後に発火します。

パラメーター
名前 型 概要
event Object Event object.
event.actionSheet Object コンポーネントのオブジェクト。
dialogcancel

Fired when the action sheet is canceled. （翻訳中）

パラメーター
名前 型 概要

お困りですか?

Onsen UIに関する質問は、Stack Overflowにてonsen-uiタグを付与してください。Onsen UIチームはあなたの問題解決をお手伝いします。

バグ報告や機能要望については、GitHub Issuesに記載をお願いいたします。

あわせて、下記の情報も参考にしてください。