アクションシート Vueコンポーネント

アクションシートは、与えられたタスクをどのように進めるか、一連の選択肢をユーザーに提示するためのスライドアップペインです。また、アクションシートを使用して、潜在的に危険なアクションを確認するようにユーザーに促すこともできます。アクションシートには、任意のタイトルと1つ以上のボタンが含まれており、それぞれが取るべきアクションに対応しています。

アクションシートVueコンポーネントは、アクションシートコンポーネントを表します。

アクションシートのコンポーネント

以下のコンポーネントが含まれています。

f7-actions - アクションシート要素
f7-actions-group - アクションシートのボタングループ
f7-actions-button - アクションシートのボタン
f7-actions-label - アクションシートのラベル

アクションシートのプロパティ

Prop	Type	Default	Description
<f7-actions> properties
opened	boolean	false	アクションシートの開閉や初期状態の設定が可能です。
grid	boolean	false	グリッドボタンのレイアウトを有効にする
convert-to-popover	boolean		有効にすると、アクションシートは大画面ではPopoverに変換されます。デフォルトでは、同じアプリのパラメータ値を継承します。
force-to-popover	boolean		有効にすると、アクションシートは常にPopoverに変換されます。デフォルトでは、同じアプリのパラメータ値を継承します
target	HTMLElement string		HTML 要素または文字列対象要素の CSS セレクタです。ポップオーバーへの変換が使用されている場合は必要です
backdrop	boolean		アクションシートの背景（後ろの暗い半透明の層）を有効にします。デフォルトでは、同じアプリのパラメータ値（`true`）を継承します。
backdrop-el	string object		HTML要素または文字列カスタム背景要素のCSSセレクタ
close-by-backdrop-click	boolean	true	有効にすると、背景をクリックしたときにアクションシートが閉じられます。デフォルトでは、同じアプリのパラメータ値を継承します。
close-by-outside-click	boolean	false	有効にすると、アクションシートは背景をクリックしたときに閉じます。デフォルトでは、同じアプリのパラメーター値を継承します。
close-on-escape	boolean		有効にすると、ESC キーを押したときにアクションシートを閉じます。
animate	boolean		モーダルの開閉をアニメーションで行うかどうか
container-el	HTMLElement string		モーダルをマウントする要素（デフォルトはアプリのルート要素
<f7-actions-label> properties
bold	boolean	false	ラベルのテキストを太字にするかどうかを定義する
<f7-actions-button> properties
bold	boolean	false	ボタンのテキストを太字にするかどうかの定義
close	boolean	true	ボタンを押したときにアクションシートを閉じるかどうか

アクションシートのイベント

Event	Description
<f7-actions> events
actions:open	アクションシートがオープニングアニメーションを開始するとイベントが発生する
actions:opened	アクションシートのオープニングアニメーションが完了するとイベントが発生します。
actions:close	アクションシートが閉じるアニメーションを開始するとイベントが発生する
actions:closed	イベントはアクションシートのクロージングアニメーションが完了した後に発生します。

アクションシートのvモデル

アクションシートコンポーネントは、openedプロップのv-modelをサポートしています。

<template>
  <f7-page>
    <f7-actions v-model:opened="isOpened">
      ...
    </f7-actions>
    <p>Modal is opened: {{ isOpened }}</p>
  </f7-page>
</template>
<script>
  export default {
    data() {
      return {
        isOpened: false,
      };
    }
  };
</script>

アクションシートのオープンとクローズ

Action Sheetのopen()/close()メソッドに加えて、Action Sheetを開いたり閉じたりすることができます。

アクションシートAPIを使って
の opened プロパティーに true または false を渡します。

Examples

<template>
<f7-page>
  <f7-navbar title="Action Sheet"></f7-navbar>
  <f7-block strong>
    <p class="row">
      <!-- One group, open by "actions-open" attribute -->
      <f7-button class="col" raised actions-open="#actions-one-group">One group</f7-button>
      <!-- Two groups, open by "actions-open" attribute -->
      <f7-button class="col" raised actions-open="#actions-two-groups">Two groups</f7-button>
    </p>
    <p>
      <!-- Actions Grid, open by changing actionGridOpened prop -->
      <f7-button raised @click="actionGridOpened = true">Action Grid</f7-button>
    </p>
  </f7-block>

  <f7-block-title>Action Sheet To Popover</f7-block-title>
  <f7-block strong>
    <p>Action Sheet can be automatically converted to Popover (for tablets). This button will open Popover on tablets and Action Sheet on phones: <f7-button style="display:inline-block" class="button-to-popover" @click="openActionsPopover">Actions</f7-button></p>
  </f7-block>

  <!-- One Group -->
  <f7-actions id="actions-one-group">
    <f7-actions-group>
      <f7-actions-label>Do something</f7-actions-label>
      <f7-actions-button bold>Button 1</f7-actions-button>
      <f7-actions-button>Button 2</f7-actions-button>
      <f7-actions-button color="red">Cancel</f7-actions-button>
    </f7-actions-group>
  </f7-actions>

  <!-- Two Groups -->
  <f7-actions id="actions-two-groups">
    <f7-actions-group>
      <f7-actions-label>Do something</f7-actions-label>
      <f7-actions-button bold>Button 1</f7-actions-button>
      <f7-actions-button>Button 2</f7-actions-button>
    </f7-actions-group>
    <f7-actions-group>
      <f7-actions-button color="red">Cancel</f7-actions-button>
    </f7-actions-group>
  </f7-actions>

  <!-- Grid -->
  <f7-actions :grid="true" :opened="actionGridOpened" @actions:closed="actionGridOpened = false">
    <f7-actions-group>
      <f7-actions-button>
        <template #media>
          <img src="https://cdn.framework7.io/placeholder/people-96x96-1.jpg" width="48"/>
        </template>
        <span>Button 1</span>
      </f7-actions-button>
      <f7-actions-button>
        <template #media>
          <img src="https://cdn.framework7.io/placeholder/people-96x96-2.jpg" width="48"/>
        </template>
        <span>Button 2</span>
      </f7-actions-button>
      <f7-actions-button>
        <template #media>
          <img src="https://cdn.framework7.io/placeholder/people-96x96-3.jpg" width="48"/>
        </template>
        <span>Button 3</span>
      </f7-actions-button>
    </f7-actions-group>
    <f7-actions-group>
      <f7-actions-button>
        <template #media>
          <img src="https://cdn.framework7.io/placeholder/fashion-96x96-4.jpg" width="48"/>
        </template>
        <span>Button 4</span>
      </f7-actions-button>
      <f7-actions-button>
        <template #media>
          <img src="https://cdn.framework7.io/placeholder/fashion-96x96-5.jpg" width="48"/>
        </template>
        <span>Button 5</span>
      </f7-actions-button>
      <f7-actions-button>
        <template #media>
          <img src="https://cdn.framework7.io/placeholder/fashion-96x96-6.jpg" width="48"/>
        </template>
        <span>Button 6</span>
      </f7-actions-button>
    </f7-actions-group>
  </f7-actions>
</f7-page>
</template>
<script>
  import { f7 } from 'framework7-vue';

  export default {
    data() {
      return {
        actionGridOpened: false,
      };
    },
    methods: {
      openActionsPopover() {
        const self = this;
        if (!self.actionsToPopover) {
          self.actionsToPopover = f7.actions.create({
            buttons: [
              {
                text: 'Do something',
                label: true,
              },
              {
                text: 'Button 1',
                bold: true,
              },
              {
                text: 'Button 2',
              },
              {
                text: 'Cancel',
                color: 'red',
              },
            ],
            // Need to specify popover target
            targetEl: self.$el.querySelector('.button-to-popover'),
          });
        }

        // Open
        self.actionsToPopover.open();
      },
    },
  }
</script>