Panel Side creating with JS

Hi Guys,

is it possible to create the user side panel through JavaScript? I have seen that it is possible to create pages and everything else, but the panel of the lateral navigation is possible?

If you use vanilla JS version, then just prepend panel HTML directly to app root and call app.panel.create on added element http://framework7.io/docs/panel.html#panel-app-methods

Not working…

My link:

<a href="/panel-left/" class="link icon-only">
            <i class="icon f7-icons ios-only">menu</i>
            <i class="icon material-icons md-only">menu</i>
          </a>

My Route:

{
    path: '/panel-left/',
    panel: {
      componentUrl: './pages/panel-left.html',
    },
  },

Whats Error?

Hi,

In your main index.html:

    <div class="panel panel-left panel-reveal">
        <div class="view panel-view">
            <!-- Load panel url here -->
        </div>
    </div>

In your routes:

{
    path: '/drawer-panel/',
    componentUrl: './pages/drawer-panel.html',
},

In your app.js (or custom init app file):

var drawerPanelView = app.views.create(’.panel-view’, {
url: ‘/drawer-panel/’,
restoreScrollTopOnBack: false
});

As variant for multi-lang (for RTL).
App parameter:

panel: {
swipe: ‘left’, /* change for similar languages */
swipeOnlyClose: true
}

Next, before init views:

if (RTL) {
app.panel.swipe = ‘right’;
app.rtl = true;
$$(‘html’).attr(‘dir’, ‘rtl’); // just case :slight_smile:
$$(’.panel’).removeClass(‘panel-left’).addClass(‘panel-right’);
}

You might try this.

In index.html:

<div class="panel panel-left panel-reveal">
  <div class="view view-init view-panel" data-url="/panel-active/">
  </div>
</div>

In routes.js:

{
path: ‘/panel-Active/’,
async(routeTo, routeFrom, resolve, reject) {
var parm = {
content: ‘<div> create something </div>’
};
// refer to: http://framework7.io/docs/routes.html#route-options
// for more information on async/resolve/reject etc.
resolve(parm);
);

}

},

Thanks, but…Not Working… You have an example for me?

If I’m not mistaken content should contain <div class="page">...</div>.