<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
-
@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!
-
@mmike No,
ons.orientation
only detects changes, it does not make changes.