Directory

← Back

window-size

A Polymer element that manages data binding to the window's size.

Author

Contributors

Rating

[ This description is mirrored from README.md at github.com/grumpypufferfish/window-size on 2019-05-10 ]

Published on webcomponents.org

<window-size>

The window-size element manages data binding to the window's size. This component will most likely be used with other polymer components.

Properties

window-size's properties are:

  • width: window's width (window.innerWidth)
  • height: window's height (window.innerHeight)

Since in most cases you can't change the size of a window in a browser via javascript (more info here), the data bindings are unidirectional, i.e. flow upward (target to host) only.

window-size is only active while it is attached to the document.

Usage

<dom-bind>
  <template>
    <window-size width="{{width}}" height="{{height}}"></window-size>
    <div>
      <span>Width: {{width}} px</span>
      <span>Height: {{height}} px</span>
    </div>
  </template>
</dom-bind>

Notes

This component is based on the new Polymer 2.0 Release Candidate. Whilst waiting for a "stable release" of Polymer 2, this component is a pre-release.

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-rc.2

Released
2017-04-06
Maturity
TESTED
License
Other

Compatibility

Framework
Polymer 2.0+
Browser
Browser Independent
Online