Language: ENCN

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.

Usage example

<!-- 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-modal-group">
    <div class="actions-modal-label">Hello</div>
    <div class="actions-modal-button">Button 1</div>
    <div class="actions-modal-button">Button 2</div>
  </div>
  <div class="actions-modal-group">
    <div class="actions-modal-button color-red actions-modal-button-bold">Cancel</div>
  </div>
</div>

Properties

Prop Type Default Description
<f7-actions> properties
opened boolean Allows to open/close Action Sheet and set its initial state
<f7-actions-label> properties
color string Actions label color. One of default colors
bold boolean Defines whether the label text is bold or not
<f7-actions-button> properties
color string Actions button color. One of default colors
bold boolean Defines whether the button text is bold or not
close boolean true Should Action Sheet be closed on button click or not

Events

Event Description
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

Methods

.open(animated) Open Action Sheet
.close(animated) Close Action Sheet

Open and close Action Sheet

You can control Action Sheet state, open and closing it:

  • using its JavaScript API
  • by passing true or false to its opened prop