About the window-size category

Directory window-size
1

window-size:
[ 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.