ons-action-sheet-button

アクションシートに表示される各ボタンを表現するコンポーネントです。

実例

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']
});

関連情報

属性

名前 型 / デフォルト値 概要
icon String ons-iconコンポーネントを悪性します。Androidでのみ表示されます。 Optional.
modifier String アクションシートボタンの見た目を設定します。 Optional.

プリセットのmodifier

Name 概要
destructive “destructive”なボタンを表示します(iOSでのみ有効)。
material マテリアルデザインのアクションシート用のボタンを表示します。

お困りですか?

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

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

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