Navigation

    Monaca & Onsen UI
    • Login
    • Search
    • Tags
    • Blog
    • Playground
    1. Home
    2. Tags
    3. ons-splitter

    • R

      Change animation of ons-splitter
      Onsen UI • ons-splitter • • rcpinheiro

      3
      0
      Votes
      3
      Posts
      2354
      Views

      R

      @emccorson Thanks a lot!
    • ?

      ons-splitter and mobile statusbar
      Onsen UI • ons-splitter statusbar • • Guest

      2
      0
      Votes
      2
      Posts
      2706
      Views

      ?

      After some investigation I produced a workaround for my problem: in the material design guidelines it is called translucent status bar. As cordova uses WebView, there might be the only way to set this behavior with a custom cordova plugin. The problem is, that after setting the status bar translucent, the status bar overlays the webview. To correct this, we have to modify the top padding of content inside the webview by the height of device’s status bar. I forked the above custom cordova plugin to get the height of the status bar in css pixel (physical height / density), and modified my content.
    • F

      ons-splitter and page events
      Developer Corner • ons-page ons-splitter eventlistener • • Facundo Arnold

      6
      0
      Votes
      6
      Posts
      7805
      Views

      F

      Perfect!. @Fran-Diox I solved using a service object to store states and data between pages. Thanks Again
    • P

      ons-splitter ons-navigator pushPage with slide effect blinks (toolbar is the problem)
      Onsen UI • ons-navigator ons-splitter pushpage blink blinks • • philippogol

      3
      0
      Votes
      3
      Posts
      5320
      Views

      T

      Hi I encounter the same issue on my app with the same devices: iOS 10+ / iPhone 6+ and iPhone 7 I’m using the onsenui v2.0.3 The toolbar blinks when coming back from another pushed page if there is a map in the view And some elements disappear (toolbar icons, button, labels and the map markers). Is this issue fixed on the latest version of onsenui ? (which means I’ll have to do some refactoring) Thanks
    • Unsolved Splitter menu with long list won't scroll
      Onsen UI • ons-splitter bug ons-splitter-side • • munsterlander

      1
      0
      Votes
      1
      Posts
      2829
      Views

      No one has replied

    • Accordion + List with Vanilla JS and CSS
      Onsen UI • tutorial ons-list ons-splitter github examples accordion • • munsterlander

      1
      2
      Votes
      1
      Posts
      4533
      Views

      No one has replied

    • ons-splitter
      Angular 2 • angular 2 ons-splitter • • OnsenUI

      2
      0
      Votes
      2
      Posts
      3281
      Views

      J

      If you want to use it as menu, it’s better to replace 42 line with this: <ons-splitter-side collapse=“collapse” swipeable=“true” [page]=“sidePage” side=“left” width=“200px” style=“border-right: 1px solid #ccc”>
    • ons-splitter
      AngularJS • angular 1 ons-splitter • • OnsenUI

      1
      0
      Votes
      1
      Posts
      2415
      Views

      No one has replied

    • ons-splitter
      JavaScript Core • js core ons-splitter • • OnsenUI

      5
      0
      Votes
      5
      Posts
      5292
      Views

      M

      how to create spliter menu on google maps at main page?
    • Using a splitter menu with a navigator - example inside!
      Onsen UI • tutorial ons-navigator ons-splitter • • munsterlander

      11
      1
      Votes
      11
      Posts
      21960
      Views

      M

      Hello to everyone. I’ve been trying with the splitter and the back button, both using the same page. For example: <ons-splitter> <ons-splitter-side id="menuSptt" side="left" width="220px" collapse swipeable> <ons-page> <ons-list> <ons-list-item onclick="fn.load('home.html')" tappable> Home <ons-list-item tappable> About </ons-list-item> </ons-list> </ons-page> </ons-splitter-side> <ons-splitter-content id="contenidoSptt" page="home.html"></ons-splitter-content> </ons-splitter> <ons-navigator swipeable id="myNavigator" page="home.html"></ons-navigator> <template id="home.html"> <ons-page id="home"> Home 1.0 </ons-page> </template> I couldn’t make it work. The idea is bringing a list to home template and use the back button once the user goes inside an element. Could anyone tell me how to fix it? Thank you !