Directory

← Back

isw-responsive-behavior

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

Author

Contributors

Rating

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

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Dependencies

Polymer/polymer#^2.0.0

Released
2017-09-25
Maturity
IMPORTED
License
Other

Compatibility

Framework
Polymer 2.0+
Browser
Browser Independent

isw-responsive-behavior - Vaadin Add-on Directory

Provides feedback about device and orientation, using material design breakpoints. isw-responsive-behavior - Vaadin Add-on Directory
**[ This description is mirrored from README.md at [github.com/IswPolymerElements/isw-responsive-behavior](https://github.com//IswPolymerElements/isw-responsive-behavior/blob/1.0.5/README.md) on 2019-05-22 ]** # **Deprecated! New approach with [isw-responsive](https://github.com/IswPolymerElements/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: ```javascript class MyApp extends Polymer.mixinBehaviors([ iswResponsiveBehavior ], Polymer.Element ) { ... } ``` Polymer 1.0: ```javascript Polymer({ is: 'my-app', behaviors: [ iswResponsiveBehavior ] ... }); ``` ### CSS The `device` and `orientation` properties reflect to attribute, so attribute selectors can be used. ```css :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. ```html ... ``` ### Imperative iswResponsiveBehavior gets the onResize function called, with Polymer 2.0 classes it can be used like a lifecycle function. ```javascript onResize() { super.onResize(); switch( this.device ) { case 'desktop': // Desktop. break; case 'tablet': // Tablet. break; default: // Mobile. } } ```
Online