Conditionally display content depending on the platform, device orientation or both.
Sometimes it is useful to conditionally hide or show certain components based on platform. When running on iOS the <ons-if> element can be used to hide the <ons-fab> element.
<ons-if> will let you filter the content of your app depending on some variables:
platform attribute: allows or removes content depending on the running platform. Possible values are ios, android, windows and other. Normally you will include an android condition and a ios other condition.orientation attribute: Possible values are landscape and portrait. Unlike the platform, this attribute is dynamic so it refreshes the view when changing the orientation.This component should only be used in Vanilla JS. Front-end frameworks normally provide a way to hide elements declaratively (ng-if, v-if, etc.).
Attributes are added directly to the element. You can do this in HTML or JS.
HTML: <ons-if someAttribute="true" anotherAttribute><ons-if>
JS: document.querySelector('ons-if').setAttribute('someAttribute', 'true')
| Name | Type | Description |
|---|---|---|
| platform | string |
Space-separated platform names. Possible values are "ios", "android", "windows" and "other".
Optional.
Works only during initialization.
|
| orientation | string |
Either "portrait" or "landscape".
Optional.
|
If you have any questions, use our Community Forum or talk to us on Discord chat. The Onsen UI team and your peers in the community will work together to help solve your issues.
For bug reports and feature requests use our GitHub Issues page.