Framework7 v2
Support Framework7
stars forks
Improve this Doc

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

<!-- Actions -->
<f7-actions>
  <!-- Actions Group -->
  <f7-actions-group>
    <!-- Actions Label -->
    <f7-actions-label>Hello</f7-actions-label>
    <!-- Actions Buttons -->
    <f7-actions-button>Button 1</f7-actions-button>
    <f7-actions-button @click="doSomething">Button 2</f7-actions-button>
  </f7-actions-group>
  <!-- Another Group -->
  <f7-actions-group>
    <!-- Cancel/Close Button -->
    <f7-actions-button color="red" bold>Cancel</f7-actions-button>
  </f7-actions-group>
</f7-actions>

Renders to:

<div class="actions-modal">
  <div class="actions-group">
    <div class="actions-label">Hello</div>
    <div class="actions-button">Button 1</div>
    <div class="actions-button">Button 2</div>
  </div>
  <div class="actions-group">
    <div class="actions-button actions-button-bold color-red">Cancel</div>
  </div>
</div>