Panel Side creating with JS


#1

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?


#2

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


#3

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?


#4

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’);
}


#5

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);
);

}

},


#6

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


#7

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