Framework7
Support Framework7
stars forks

Picker Modal React 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 React component represents Picker Modal component.

Usage example

<!-- Picker Modal -->
<PickerModal>
  <!-- Picker Modal content goes here -->
</PickerModal>

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

Event Properties

Event Description
onPickerOpen Event will be triggered when Picker Modal starts its opening animation
onPickerOpened Event will be triggered after Picker Modal completes its opening animation
onPickerClose Event will be triggered when Picker Modal starts its closing animation
onPickerClosed 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 openPicker property (to open it) and closePicker property to close it