Action Sheet Vue Component

Action Sheet is a slide-up pane for presenting the user with a set of alternatives for how to proceed with a given task. You can also use action sheets to prompt the user to confirm a potentially dangerous action. The action sheet contains an optional title and one or more buttons, each of which corresponds to an action to take.

Action Sheet Vue component represents Action Sheet component.

Action Sheet Components

There are following components included:

Action Sheet Properties

PropTypeDefaultDescription
<f7-actions> properties
openedbooleanfalseAllows to open/close Action Sheet and set its initial state
gridbooleanfalseEnables grid buttons layout
convert-to-popoverbooleanWhen enabled, action sheet will be converted to Popover on large screens. By default inherits same app parameter value
force-to-popoverbooleanWhen enabled, action sheet will be always converted to Popover. By default inherits same app parameter value
targetHTMLElement
string
HTML element or string CSS selector of target element. Required when conversion to popover is in use
backdropbooleanEnables action sheet backdrop (dark semi transparent layer behind). By default inherits same app parameter value (true)
backdrop-elstring
object
HTML element or string CSS selector of custom backdrop element
backdrop-uniquebooleanIf enabled it creates unique backdrop element exclusively for this modal
close-by-backdrop-clickbooleantrueWhen enabled, action sheet will be closed on backdrop click. By default inherits same app parameter value
close-by-outside-clickbooleanfalseWhen enabled, action sheet will be closed on when click outside of it. By default inherits same app parameter value
close-on-escapebooleanWhen enabled, action sheet will be closed on ESC keyboard key press
animatebooleanWhether the modal should be opened/closed with animation or not
container-elHTMLElement
string
Element to mount modal to (default to app root element)
<f7-actions-label> properties
strongbooleanfalseDefines whether the label text is bold or not
<f7-actions-button> properties
strongbooleanfalseDefines whether the button text is bold or not
closebooleantrueShould Action Sheet be closed on button click or not

Action Sheet Events

EventDescription
<f7-actions> events
actions:openEvent will be triggered when Action Sheet starts its opening animation
actions:openedEvent will be triggered after Action Sheet completes its opening animation
actions:closeEvent will be triggered when Action Sheet starts its closing animation
actions:closedEvent will be triggered after Action Sheet completes its closing animation

Action Sheet v-model

Action Sheet component supports v-model on opened prop:

<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 And Close Action Sheet

In addition to Action Sheet open()/close() methods, you can open and close it:

Examples

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>