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

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

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

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

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

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

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

プロパティ	タイプ	デフォルト	説明
<f7-actions> プロパティ
opened	boolean	false	アクションシートを開閉し、初期状態を設定できます
grid	boolean	false	グリッドボタンレイアウトを有効にします
convert-to-popover	boolean		有効にすると、大きな画面でアクションシートがポップオーバーに変換されます。デフォルトでは、同じアプリのパラメータ値を継承します
force-to-popover	boolean		有効にすると、アクションシートは常にポップオーバーに変換されます。デフォルトでは、同じアプリのパラメータ値を継承します
target	HTMLElement string		ターゲット要素の HTML 要素または文字列 CSS セレクター。ポップオーバーへの変換を使用している場合は必須です
backdrop	boolean		アクションシートの背景（背後の暗い半透明のレイヤー）を有効にします。デフォルトでは、同じアプリのパラメータ値（`true`）を継承します
backdrop-el	string object		カスタム背景要素の HTML 要素または文字列 CSS セレクター
backdrop-unique	boolean		有効にすると、このモーダル専用のユニークな背景要素が作成されます
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> プロパティ
strong	boolean	false	ラベルテキストを太字にするかどうかを定義します
<f7-actions-button> プロパティ
strong	boolean	false	ボタンテキストを太字にするかどうかを定義します
close	boolean	true	ボタンをクリックしたときにアクションシートを閉じるかどうか

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

イベント	説明
<f7-actions> イベント
actions:open	アクションシートが開くアニメーションを開始するときにトリガーされるイベント
actions:opened	アクションシートが開くアニメーションを完了した後にトリガーされるイベント
actions:close	アクションシートが閉じるアニメーションを開始するときにトリガーされるイベント
actions:closed	アクションシートが閉じるアニメーションを完了した後にトリガーされるイベント

アクションシート v-model

アクションシートコンポーネントは、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>

アクションシートを開閉する

アクションシートの open()/close() メソッドに加えて、以下を使用して開閉できます

アクションシート APIを使用する
opened プロパティに true または false を渡す

例

action-sheet.vue

<template>
  <f7-page @page:beforeremove="onPageBeforeRemove">
    <f7-navbar title="Action Sheet"></f7-navbar>
    <f7-block strong inset>
      <p class="grid grid-cols-2 grid-gap">
        <!-- One group, open by direct accessing instance .open() method -->
        <f7-button fill actions-open="#actions-one-group">One group</f7-button>
        <!-- Two groups, open by "actions-open" attribute -->
        <f7-button fill actions-open="#actions-two-groups">Two groups</f7-button>
      </p>
      <p>
        <!-- Actions Grid, open by changing actionGridOpened prop -->
        <f7-button fill @click="actionGridOpened = true">Action Grid</f7-button>
      </p>
    </f7-block>

    <f7-block-title>Action Sheet To Popover</f7-block-title>
    <f7-block strong inset>
      <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 strong>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 strong>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 v-model:opened="actionGridOpened" :grid="true">
      <f7-actions-group>
        <f7-actions-button>
          <template #media>
            <img
              src="https://cdn.framework7.io/placeholder/people-96x96-1.jpg"
              width="48"
              style="max-width: 100%; border-radius: 8px"
            />
          </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"
              style="max-width: 100%; border-radius: 8px"
            />
          </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"
              style="max-width: 100%; border-radius: 8px"
            />
          </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"
              style="max-width: 100%; border-radius: 8px"
            />
          </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"
              style="max-width: 100%; border-radius: 8px"
            />
          </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"
              style="max-width: 100%; border-radius: 8px"
            />
          </template>
          <span>Button 6</span>
        </f7-actions-button>
      </f7-actions-group>
    </f7-actions>
  </f7-page>
</template>
<script>
import {
  f7Navbar,
  f7Page,
  f7BlockTitle,
  f7Block,
  f7Button,
  f7Actions,
  f7ActionsGroup,
  f7ActionsLabel,
  f7ActionsButton,
  f7,
} from 'framework7-vue';

export default {
  components: {
    f7Page,
    f7Navbar,
    f7BlockTitle,
    f7Block,
    f7Button,
    f7Actions,
    f7ActionsGroup,
    f7ActionsLabel,
    f7ActionsButton,
  },
  props: {
    id: String,
  },
  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',
              strong: true,
            },
            {
              text: 'Button 2',
            },
            {
              text: 'Cancel',
              color: 'red',
            },
          ],
          // Need to specify popover target
          targetEl: self.$el.querySelector('.button-to-popover'),
        });
      }

      // Open
      self.actionsToPopover.open();
    },
    onPageBeforeRemove() {
      const self = this;
      if (self.actionsToPopover) {
        self.actionsToPopover.destroy();
      }
    },
  },
};
</script>

このドキュメントを改善する

このページで

アクションシートコンポーネント
アクションシートのプロパティ
アクションシートイベント
アクションシート v-model
アクションシートを開閉する
例