Picker Modal Vue Component

Picker 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.

Picker Modal Vue component represents Picker Modal component.

Usage example

<!-- Picker Modal -->
<f7-picker-modal>
  <!-- Picker Modal content goes here -->
</f7-picker-modal>

Renders to:

<!-- Picker Modal -->
<div class="picker-modal">
  <div class="picker-modal-inner">
    <!-- Picker Modal content goes here -->
  </div>
</div>

Properties

Prop	Type	Description
overlay	boolean	Enable to render additional picker modal overlay when required
theme	string	Picker Modal theme color. One of default colors
layout	string	Picker Modal layout theme. One of default layout themes
opened	boolean	Allows to open/close Picker Modal and set its initial state

Methods

.open(animated)	Open picker modal
.close(animated)	Close picker modal

Events

Event	Description
picker:open	Event will be triggered when Picker Modal starts its opening animation
picker:opened	Event will be triggered after Picker Modal completes its opening animation
picker:close	Event will be triggered when Picker Modal starts its closing animation
picker:closed	Event will be triggered after Picker Modal completes its closing animation

Open and close Picker Modal

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

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