Framework7 - Split view shows under tab bar

Questions
1

Completely new to Framework7. I have setup the Tab bar in cordova

Now this has multiple tabs and has a left panel which opens the menu, inside of it there are links.

If you look at the other example for split-view, where if the link is clicked in the panel, a popup kind of window is opened in the main view.

When I tried to merge it in the tab bar setup I have, the link opens inside only the first tab. Even if I switch tabs, open the menu and click a link, it will still open it in the first tab.

I am trying to open the left panel link over the main view, above all the tabs, something like a preferences page.

Demo link - https://jsfiddle.net/L5skgrdv/9/

  1. If you open the left panel and click About, the view opens in the first tab, Home Page

I want to know how to open that view over all the tabs like in the split-view demo link above.

  1. Also, if you navigate to any other tab, open the left panel and click About, the view still opens in the first tab. This is an issue.

I just want to open any links in the panel over all the tabs.

1 Like
2

Hi DEV, do you want to open the panel links on the tabs?
The example uses a normal link

  • MENU

    Example.

    <li>
        <a class="link" href="/YOUR-ROUTER/"> menu 1 </a>
</li>
    • 3

    No. If you see the split-view example link, clicking the panel link opens the pages above the view-main.

    But in tab view, it is opening inside the tab-view.

    I want to open the panel link, exactly like in the split-view example - over the view-main, masking those tabs. Not inside any tabs-view.

    1 Like
    4

    I think I have this same question.
    If the first tab is NOT selected (ie: other tab showing), when one clicks on the about link in the left panel, it changes the view in the first tab as it probably should but I want to know if we can change the view also?

    In addition, how do I default to another tab, without reordering the html ?

    Trying to understand how to use multiple views properly or if I should just be using different pages?

    5

    You need to set tab-active class on tab must be active by default

    6

    thanks for this.
    Any idea how to make the new tab show after we change the view on the left panel selection?
    Thanks

    7

    Use api: app.tab.show('#required-tab-id')

    8

    thanks for pointing me. I was not sure if css could do it.
    I think I see better now.
    If anyone else needs, I think it is actually app.f7 ā€¦
    Added this to about anchor tag and it worked great

    onclick=ā€œapp.f7.tab.show(ā€™#view-homeā€™);ā€

    9

    Hoping I can add a related question here as it came from this fiddle sourceā€¦
    Essentially, trying to use this as a template so the login componentUrl is kept clean and separate
    I used very similar code surrounded by

    I was trying to get the login button working but was unable to find where to put this script code
    $$(ā€™#my-login-screen .login-buttonā€™).on(ā€˜clickā€™, function () {
    ā€¦ code ā€¦
    }

    I see how I can add ā€œ@click=SignInā€ to the html and then define the function SignIn in methods at the bottom of the template. But how would I define the above ā€œonā€ event? Would it have to be in a onPageInit or something?

    I tried importing a .js file and that did not seem to work. Then tried to find a place to put random functions but couuld not see how to doe that.
    I initially thought of having a pages/login.html with matching pages/login.js to keep separate?
    I was trying to keep things clean.

    This is what I have in my routes.js

    path: '/login/',
componentUrl: './pages/login.html',

    then inside my template, I have :slight_smile:

    wondering where to define a simple function ? or initialize the on function above?
    For example, where could I simply have a some simple script such as
    ā€œalert(ā€˜page is loadedā€™)ā€