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

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