Language: ENCN

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