Directory

← Back

window-size

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

Author

Rating

Popularity

<100

[ 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

window-size - Vaadin Add-on Directory

A Polymer element that manages data binding to the window's size. window-size - Vaadin Add-on Directory
**[ This description is mirrored from README.md at [github.com/grumpypufferfish/window-size](https://github.com//grumpypufferfish/window-size/blob/v1.0.0-preview/README.md) on 2019-05-10 ]** [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/grumpypufferfish/window-size) ## <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](https://developer.mozilla.org/en-US/docs/Web/API/Window/resizeTo)), 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 ```html ``` #### 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.
Online