アクションシート、もしくはボトムシートを現在のスクリーン上に表示します。
この要素は、<body>要素に直接アタッチされるか、もしくはons.createElement(template, { append: true })と<template>タグを使ってテンプレートから動的に生成されます。
アクションシートは、選択肢のリストを表示してユーザーに尋ねるのに便利です。ons-action-sheet-buttonは、この要素の中に置くために提供されていますが、それ以外にも他のどのような要素を含むことができます。
Androidデバイスで実行されるときには、自動的にマテリアルデザイン(ボトムシート)として表示されます。
Onsen UI provides <v-ons-action-sheet> and <v-ons-action-sheet-button> elements. Use them to create a dialog that slides from the bottom of the screen to give user options.
You can display or cancel the action sheet by changing its visible prop value to true or false respectively. v-model:visible can also be used.
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.
| Name | 概要 |
|---|---|
| material | マテリアルデザインのボトムシートを表示します。 |
| 名前 | 概要 |
|---|---|
| preshow | ダイアログが表示される直前に発火します。 |
| postshow | ダイアログが表示された直後に発火します。 |
| prehide | ダイアログが隠れる直前に発火します。 |
| posthide | ダイアログが隠れた後に発火します。 |
| dialogcancel | Fired when the action sheet is canceled. （翻訳中） |
| deviceBackButton | Fired on device back button. Default behavior is hiding the component if it is cancelable. Otherwise, calls parent handler. （翻訳中） |
| update:visible |
Fired right after user interaction. Useful to update visible prop.
（翻訳中）
|
ダイアログが表示される直前に発火します。
| 名前 | 型 | 概要 |
|---|---|---|
| event | Object | Event object. |
| event.actionSheet | Object | コンポーネントのオブジェクト。 |
| event.cancel | Function | この関数を実行すると、ダイアログの表示がキャンセルされます。 |
ダイアログが表示された直後に発火します。
| 名前 | 型 | 概要 |
|---|---|---|
| event | Object | Event object. |
| event.actionSheet | Object | コンポーネントのオブジェクト。 |
ダイアログが隠れる直前に発火します。
| 名前 | 型 | 概要 |
|---|---|---|
| event | Object | Event object. |
| event.actionSheet | Object | コンポーネントのオブジェクト。 |
| event.cancel | Function | この関数を実行すると、ダイアログの非表示がキャンセルされます。 |
ダイアログが隠れた後に発火します。
| 名前 | 型 | 概要 |
|---|---|---|
| event | Object | Event object. |
| event.actionSheet | Object | コンポーネントのオブジェクト。 |
Fired when the action sheet is canceled. （翻訳中）
| 名前 | 型 | 概要 |
|---|
Fired on device back button. Default behavior is hiding the component if it is cancelable. Otherwise, calls parent handler. （翻訳中）
| 名前 | 型 | 概要 |
|---|---|---|
| event | Object | Event object. （翻訳中） |
| event.preventDefault | Function | Avoids the default behavior. （翻訳中） |
| event.callParentHandler | Function | Runs the handler for the immediate parent that supports device back button. （翻訳中） |
Fired right after user interaction. Useful to update visible prop.
（翻訳中）
| 名前 | 型 | 概要 |
|---|---|---|
| event | Number |
New value for visible prop.
（翻訳中）
|
Onsen UIに関する質問は、Stack Overflowにてonsen-uiタグを付与してください。Onsen UIチームはあなたの問題解決をお手伝いします。
バグ報告や機能要望については、GitHub Issuesに記載をお願いいたします。
あわせて、下記の情報も参考にしてください。