isw-responsive-behavior:
[ This description is mirrored from README.md at github.com/IswPolymerElements/isw-responsive-behavior on 2019-05-22 ]
<isw-responsive-behavior>
Deprecated! New approach with isw-responsive.
Provides feedback about device and orientation, using material design breakpoints.
Properties
- screenWidth (Number)
- screenHeight (Number)
- device (String, “mobile”, “tablet”, “desktop”)
- orientation (String, “portrait”, “landscape”)
Add behavior
It’s recommended to use it only once (e.g. in the app) and propagate it to the children (e.g. the views) via properties.
Make sure to set reflectToAttribute if attribute selectors are used in the view.
Polymer 2.0:
class MyApp extends Polymer.mixinBehaviors([ iswResponsiveBehavior ], Polymer.Element ) {
...
}
Polymer 1.0:
Polymer({
is: 'my-app',
behaviors: [ iswResponsiveBehavior ]
...
});
CSS
The device and orientation properties reflect to attribute, so attribute selectors can be used.
:host([device="desktop"]) .someSelector { ... }
:host([device="mobile"][orientation="landscape"]) .someSelector { ... }
Elements
Some of our elements, e.g. isw-toolbar, are using device and orientation to display.
Simply bind these properties to make them responsive.
<isw-toolbar device="[[device]]" orientation=[[orientation]]> ... </isw-toolbar>
Imperative
iswResponsiveBehavior gets the onResize function called, with Polymer 2.0 classes it can be used like a lifecycle function.
onResize() {
super.onResize();
switch( this.device ) {
case 'desktop':
// Desktop.
break;
case 'tablet':
// Tablet.
break;
default:
// Mobile.
}
}