I want to onload modal when a template page is opened, to show a sheet modal how do i acheive this in framework7
<template>
<div class="page" @onload="loadModal()">
<!-- RIDER INTRANSIT MODAL MINIMIZED -->
<div class="sheet-modal my-sheet-swipe-to-step" style="height:auto; --f7-sheet-bg-color: #fff;">
<div class="sheet-modal-inner">
<div class="sheet-modal-swipe-step">
<div class="display-flex padding justify-content-space-between align-items-center">
<div style="font-size: 18px"><b>Total:</b></div>
<div style="font-size: 22px"><b>$500</b></div>
</div>
<div class="padding-horizontal padding-bottom">
<a class="button button-large button-fill">Make Payment</a>
<div class="margin-top text-align-center">Swipe up for more details</div>
</div>
</div>
<div class="block-title block-title-medium margin-top">Your order:</div>
<div class="list no-hairlines">
<ul>
<li class="item-content">
<div class="item-inner">
<div class="item-title">Item 1</div>
<div class="item-after text-color-black"><b>$200</b></div>
</div>
</li>
<li class="item-content">
<div class="item-inner">
<div class="item-title">Item 2</div>
<div class="item-after text-color-black"><b>$180</b></div>
</div>
</li>
<li class="item-content">
<div class="item-inner">
<div class="item-title">Delivery</div>
<div class="item-after text-color-black"><b>$120</b></div>
</div>
</li>
</ul>
</div>
</div>
</div>
<!-- /END RIDER INTRANSIT MODAL MINIMIZED -->
</div>
</template>
<script>
return {
mounted() {
},
on: {
pageInit: function (e, page) {
}
},
methods: {
loadModal: function () {
app.sheet.create({
el: '.my-sheet-swipe-to-step',
swipeToClose: true,
swipeToStep: true,
backdrop: true,
});
},
}
}
</script>
Based on this documentation [https://framework7.io/docs/sheet-modal.html](Sheet modal)