Sheet Modal Vue Component

Sheet Modal is a special overlay type which is similar to Picker/Calendar's overlay. Such modal allows to create custom picker overlays with custom content.

Sheet Modal Vue component represents Sheet Modal component.

Sheet Modal Components

There are following components included:

• f7-sheet - sheet modal element

Sheet Modal Properties

Prop	Type	Description
<f7-sheet> properties
backdrop	boolean	Enable to render additional sheet modal backdrop when required
opened	boolean	Allows to open/close Sheet Modal and set its initial state

Sheet Modal Methods

<f7-sheet> methods
.open(animate)	Open sheet modal
.close(animate)	Close sheet modal

Sheet Modal Events

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

Open And Close Sheet Modal

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

• using its Sheet Modal API
• by passing true or false to its opened prop
• by clicking on Link or Button with relevant sheet-open property (to open it) and sheet-close property to close it

Access To Sheet Modal Instance

You can access Sheet Modal initialized instance by accessing .f7Sheet component's property.

Examples

<!-- Sheet Modal -->
<f7-sheet>
  <!-- Sheet Modal content goes here -->
</f7-sheet>

Renders to:

<!-- Sheet Modal -->
<div class="sheet-modal">
  <div class="sheet-modal-inner">
    <!-- Sheet Modal content goes here -->
  </div>
</div>