trouble with splitter and navigator in onsenUI

Question

I have a navigator and global splitter in my app. My navigator pushes my first page as tempHome and i need set page attribute for splitter also tempHome to use the splitter.

<ons-navigator id="myNavigator">
  <ons-page>
    <ons-splitter>
      <ons-splitter-side id="menu" side="right" width="220px" swipe-target-width="150px" collapse swipeable>
        <ons-page>
          <ons-list>
            <ons-list-item tappable>
              test
            </ons-list-item>
          </ons-list>
        </ons-page>
      </ons-splitter-side>
      <ons-splitter-content id="content" page="tempHome"></ons-splitter-content>
    </ons-splitter>
  </ons-page>
</ons-navigator>

so I have twice tempHome in the first page of my app.

Is there any help?

Thank you

I solve my problem by this : http://codepen.io/IliaSky/pen/rePgbp?editors=1010 but splitter is only work on first page i need to use it globally — meisam3322, Jul 29 '16 at 16:09

Ilia Yatchev · Answer 1 · 2016-07-30T10:00:02.727

The codepen which you mentioned shows a splitter inside a navigator.

However both the navigator and splitter can contain inner pages - so in your case what you want to do is just change the structure the other way around. Since you want to have the side menu always that just means that it should be outside the navigator.

You can put the navigator inside the ons-splitter-content and you will get the desired result.

<ons-splitter>
  <ons-splitter-side collapse swipeable>
    // menu content...
  </ons-splitter-side>
  <ons-splitter-content>
      <ons-navigator id="myNavigator" page="home.html"></ons-navigator>
  </ons-splitter-content>
</ons-splitter>

Here's a modified Demo.

Sidenote: I just modified the example from the codepen which you mentioned, so it's actually using angular, however do note that for Onsen 2 angular is not a required :)

I threw together a modified codepen which shows the ability to combine a variety of methods but still have the menu available. https://codepen.io/anon/pen/NALzWZ — Munsterlander, Aug 03 '16 at 03:36

score 0 · Answer 2 · answered Jul 29 '16 at 16:12

0

<ons-navigator id="myNavigator">
<ons-page>
    <ons-splitter>
        <ons-splitter-side id="menu" side="right" width="220px" swipe-target-width="150px" collapse swipeable>
            <ons-page>
                <ons-list>
                    <ons-list-item tappable>
                        test
                    </ons-list-item>
                </ons-list>
            </ons-page>
        </ons-splitter-side>
        <ons-splitter-content id="content" page="tempHome"></ons-splitter-content>
    </ons-splitter>
</ons-page>

answered Jul 29 '16 at 16:12

meisam3322

11
6

btw you can add the code as part of the question - there is an edit button. Since your code is relevant to the question it should be put there :). Also I'm guessing this is just a copy-paste issue, but I don't see you closing the `ons-navigator` tag. – Ilia Yatchev Jul 30 '16 at 09:15
hi. thanks for reply. i forgot to end tag. i have navigator end tag in my code. – meisam3322 Jul 30 '16 at 10:05

trouble with splitter and navigator in onsenUI

2 Answers2