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.
<!-- 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>
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 |
.open(animated) | Open picker modal |
.close(animated) | Close picker modal |
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 |
You can control Picker Modal state, open and closing it:
opened
propopen-picker
property (to open it) and close-picker
property to close it