Sheet Modal Vue Component

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

    There are following components included:

    • - sheet modal element

    Sheet Modal Properties

    Sheet Modal Events

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

    Access To Sheet Modal Instance

    You can access Sheet Modal initialized instance by accessing **.f7Sheet** component’s property.

    1. <script>
    2. export default {
    3.   data() {
    4.     return {
    5.     };
    6.   },
    7.   methods: {
    8.     createSheet() {
    9.       const self = this;
    10.       const $ = self.$$;
    11.       // Create sheet modal
    13.         self.sheet = self.$f7.sheet.create({
    14.           content: `
    15.             <div class="sheet-modal">
    16.               <div class="toolbar">
    17.                 <div class="toolbar-inner justify-content-flex-end">
    18.                   <a href="#" class="link sheet-close">Close</a>
    19.                 </div>
    20.               </div>
    21.               <div class="sheet-modal-inner">
    22.                 <div class="page-content">
    23.                   <div class="block">
    24.                     <p>This sheet modal was created dynamically</p>
    25.                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse faucibus mauris leo, eu bibendum neque congue non. Ut leo mauris, eleifend eu commodo a, egestas ac urna. Maecenas in lacus faucibus, viverra ipsum pulvinar, molestie arcu. Etiam lacinia venenatis dignissim...</p>
    26.                   </div>
    27.               </div>
    28.             </div>
    29.           `.trim(),
    31.       }
    32.       // Close inline sheet
    33.       if ($('.demo-sheet.modal-in').length > 0) self.$f7.sheet.close('.demo-sheet');
    34.       // Open it
    35.       self.sheet.open();
    36.     },
    37.     onPageBeforeOut() {
    38.       const self = this;
    39.       // Close opened sheets on page out
    40.       self.$f7.sheet.close();
    41.     },
    42.     onPageBeforeRemove() {
    43.       const self = this;
    44.       // Destroy sheet modal when page removed
    45.       if (self.sheet) self.sheet.destroy();
    46.     },
    47.   },
    48. };