<ons-orientation> how to use it please?



  • Hi All,

    I am new to Onsen UI. I want to change individual page orientation like one page work only in portrait mode, one another for landscape mode. How can I do that?

    Thanks


  • Onsen UI

    @mmike The docs for ons.orientation object are here.

    It simply emits change events whenever the device orientation changes. A simple way to change the displayed content would be toggling a CSS class in the body. For example:

    ons.orientation.on('change', function(event) { 
      document.body.classList.toggle('landscape', !event.isPortrait);
    });
    

    Then, your pages can be like this:

    <ons-page>
      <ons-toolbar>...</ons-toolbar>
    
      <div class="content">
        <div class="potrait_content">...</div>
        <div class="landscape_content">...</div>
      </div>
    </ons-page>
    

    And apply CSS rules to toggle them:

    body.landscape  .portrait_content {
      display: none;
    }
    
    body:not(.landscape)  .landscape_content {
      display: none;
    }
    

    Hope it helps!



  • Thanks Fran!

    Is there a method to rotate the screen to 90 degrees(to change page orientation) using onsen UI?

    Once again… Thanks!


  • Onsen UI

    @mmike No, ons.orientation only detects changes, it does not make changes.


Log in to reply