Framework7 Starter

HTML

<script src="https://unpkg.com/framework7@3.0.0/js/framework7.js"></script>
<link rel="stylesheet" href="https://unpkg.com/framework7@3.0.0/css/framework7.css">
<div id="app">
  <div class="view view-main ios-edges">
  
  
  
    <div class="sheet-modal my-sheet-swipe-to-step" style="height:100%; --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 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 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 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...

JavaScript

var app = new Framework7({
  root: '#app',
  theme: 'auto',
  routes: [{
    path: '/about/',
    content: ''
  }]
});



var sh = app.sheet.create({
  el: '.my-sheet-swipe-to-step',
  swipeToClose: true,
  swipeToStep: true,
  backdrop: true,
}).open();

setTimeout(function() {
	sh.close();
}, 10000);