<ons-orientation> how to use it please?

mmike

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

Fran Diox

@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!

mmike

Thanks Fran!

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

Once again… Thanks!

Fran Diox

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