Sheet modal in one view

Questions
1

hi everyone. I have a toolbar/tabbar and in my home view (#view-home) i’d like to open a sheet modal. The issue is, the sheet model persists throughout views, regardless what tab icon i am clicking.

Here is my current code for my sheet modal:

var routes = [
  {
    path: '/',
    url: './index.html',
    on:
    {
      pageInit: function (e, page)
      {
        var home_sheet = app.sheet.create(
        {
          el: '.home-sheet',
          swipeToClose: false,
          swipeToStep: true,
          backdrop: false,
          closeByBackdropClick: false,
        });
        
        home_sheet.open();
      },
    }
  },

How do i get the sheet modal to stay in the home view only? and behind the toolbar/tabbar?
I’ve tried placing the html sheet compnent inside the view-home div, but framework7js places this as a child of the body and sibling of app.

2

Hmm, it is not in docs for some reason, but it has containerEl parameter where you can specify where to put it on open

        var home_sheet = app.sheet.create(
        {
          el: '.home-sheet',
          swipeToClose: false,
          swipeToStep: true,
          backdrop: false,
          closeByBackdropClick: false,
          containerEl: '.some-view',
        });
3

Amazing as always. Thanks again. There is also no sheet-init in docs, just a heads up :slight_smile:

1 Like