isw-responsive
Provides feedback about device and orientation, using material design breakpoints.
[ This description is mirrored from README.md at github.com/IswPolymerElements/isw-responsive on 2019-05-10 ]
<isw-responsive>
isw-responsive
calculates device
and orientation
according to material design breakpoints
and pushes the result to all elementes using isw-responsive-behavior
using iron-meta
and iron-signals
like events.
If there will be an iron-signals
2.0, the element will be updated to use it instead of custom document
events.
https://material.io/guidelines/layout/responsive-ui.html#responsive-ui-breakpoints
isw-responsive
Calculates device
and orientation
from the current screen size.
Use it only once in your app, it will notify all isw-responsive-behavior
elements about changes.
isw-responsive
Provides reflectToAttribute
properties for css selectors, and events for imperative use.
iron-meta
isw-responsive
writes the viewport information to iron-meta
, so they are global available via these keys:
- isw-responsive-device
- isw-responsive-orientation
iron-signals
Future plans: If iron-signals
will get an 2.0 update, the viewport-changed
event should be exposed to iron-signals
., e.g.:
- isw-responsive-viewport-changed
Example: Useage with Starter Kit.
my-app.html
[...]
<!-- ISW Responsive imports -->
<link rel="import" href="../bower_components/isw-responsive/isw-responsive.html">
<link rel="import" href="../bower_components/isw-responsive/isw-responsive-behavior.html">
[...]
<dom-module id="my-app">
<template>
[...]
<!-- isw-responsive definition that does the calculating and notifying. -->
<isw-responsive></isw-responsive>
[...]
<!-- Deactivate app drawers responsive behavior for imperative example. -->
<app-drawer-layout fullbleed responsive-width="0" force-narrow="[[_forceNarrow]]">
[...]
</app-drawer-layout>
</template>
<script>
// Use Polymer.mixinBehaviors to assign the behavior to get device and orientation properties that reflect to attribute.
class MyApp extends Polymer.mixinBehaviors([ iswResponsiveBehavior ], Polymer.Element ) {
static get is() { return 'my-app'; }
[...]
constructor() {
super();
this.addEventListener( 'viewport-changed', e => this._viewportChanged( e ) );
}
[...]
_viewportChanged() {
// Manually set the drawers force narrow property depending on device and orientation (Imperative use example).
switch( this.device ) {
case 'desktop':
this.set( '_forceNarrow', false );
break;
case 'tablet':
this.set( '_forceNarrow', this.orientation == 'portrait' );
break;
default:
this.set( '_forceNarrow', true );
}
}
}
window.customElements.define(MyApp.is, MyApp);
</script>
</dom-module>
my-view1.html
[...]
<!-- ISW Responsive imports -->
<link rel="import" href="../bower_components/isw-responsive/isw-responsive-behavior.html">
[...]
<dom-module id="my-view1">
<template>
<style include="shared-styles">
:host {
display: block;
padding: 10px;
}
// Use attribute selectors to assign css properties for certain devices or / and orientations.
:host([device="desktop"]) .card {
...
}
:host([device="mobile"][orientation="landscape"]) .card {
...
}
</style>
<div class="card">
[...]
</div>
</template>
<script>
// Use Polymer.mixinBehaviors to assign the behavior to get device and orientation properties that reflect to attribute.
class MyView1 extends Polymer.mixinBehaviors([ iswResponsiveBehavior ], Polymer.Element ) {
static get is() { return 'my-view1'; }
}
window.customElements.define(MyView1.is, MyView1);
</script>
</dom-module>
Links
Compatibility
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
- TESTED
- License
- Other
Compatibility
- Framework
- Polymer 2.0+
- Browser
- Browser Independent
isw-responsive - Vaadin Add-on Directory
Provides feedback about device and orientation, using material design breakpoints.Online Demo
GitHub Homepage
Issue tracker
License
Documentation
isw-responsive version 1.0.0
### Dependencies
Polymer/polymer#^2.0.0
isw-responsive version 2.0.0
### Dependencies
Polymer/polymer#^2.0.0
* PolymerElements/iron-meta#^2.0.2