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:

    • f7-actions - action sheet element
    • f7-actions-group - action sheet buttons group
    • f7-actions-button - action sheet button
    • f7-actions-label - action sheet label

    Action Sheet Properties

    Prop Type Default Description
    <f7-actions> properties
    opened boolean false Allows to open/close Action Sheet and set its initial state
    grid boolean false Enables grid buttons layout
    convertToPopover boolean When enabled, action sheet will be converted to Popover on large screens. By default inherits same app parameter value
    forceToPopover boolean When enabled, action sheel will be always converted to Popover. By default inherits same app parameter value
    target HTMLElement
    string
    HTML element or string CSS selector of target element. Required when converstion to popover is in use
    <f7-actions-label> properties
    bold boolean false Defines whether the label text is bold or not
    <f7-actions-button> properties
    bold boolean false Defines whether the button text is bold or not
    close boolean true Should Action Sheet be closed on button click or not

    Action Sheet Methods

    <f7-actions> methods
    .open(animate) Open Action Sheet
    .close(animate) Close Action Sheet

    Action Sheet Events

    Event Description
    <f7-actions> events
    actions:open Event will be triggered when Action Sheet starts its opening animation
    actions:opened Event will be triggered after Action Sheet completes its opening animation
    actions:close Event will be triggered when Action Sheet starts its closing animation
    actions:closed Event will be triggered after Action Sheet completes its closing animation

    Open And Close Action Sheet

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

    Access To Action Sheet Instance

    You can access Action Sheet initialized instance by accessing .f7Actions component's property.

    Examples

    <template>
      <f7-page>
        <f7-navbar title="Action Sheet"></f7-navbar>
        <f7-block strong>
          <p class="row">
            <!-- One group, open by direct accessing instance .open() method -->
            <f7-button class="col" raised @click="$refs.actionsOneGroup.open()">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 ref="actionsOneGroup">
          <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>
              <img slot="media" src="http://lorempixel.com/96/96/people/1" width="48"/>
              <span>Button 1</span>
            </f7-actions-button>
            <f7-actions-button>
              <img slot="media" src="http://lorempixel.com/96/96/people/2" width="48"/>
              <span>Button 2</span>
            </f7-actions-button>
            <f7-actions-button>
              <img slot="media" src="http://lorempixel.com/96/96/people/3" width="48"/>
              <span>Button 3</span>
            </f7-actions-button>
          </f7-actions-group>
          <f7-actions-group>
            <f7-actions-button>
              <img slot="media" src="http://lorempixel.com/96/96/fashion/4" width="48"/>
              <span>Button 4</span>
            </f7-actions-button>
            <f7-actions-button>
              <img slot="media" src="http://lorempixel.com/96/96/fashion/5" width="48"/>
              <span>Button 5</span>
            </f7-actions-button>
            <f7-actions-button>
              <img slot="media" src="http://lorempixel.com/96/96/fashion/6" width="48"/>
              <span>Button 6</span>
            </f7-actions-button>
          </f7-actions-group>
        </f7-actions>
    
      </f7-page>
    </template>
    <script>
    export default {
      data() {
        return {
          actionGridOpened: false,
        };
      },
      methods: {
        openActionsPopover() {
          const self = this;
          const app = self.$f7;
          if (!self.actionsToPopover) {
            self.actionsToPopover = app.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>