Provides feedback about device and orientation, using material design breakpoints.

[ 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.

https://material.io/guidelines/layout/responsive-ui.html#responsive-ui-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.
  }
}

Install

Link to this version
ImportedReleased 25 September 2017Other
Framework Support
Polymer 2.0+
Browser Compatibility
Install with
Release notes - Version 1.0.5

Dependencies

Polymer/polymer#^2.0.0