Contact us Create app

Directory

← Back

xtal-match-media

Custom Element that watches for media matches

Author

Rating

Links

Popularity

<100

Published on webcomponents.org

<xtal-match-media>

Web component that watches for media matches and fires events when they happen.

This is similar to Polymer's iron-media-query, but with no legacy dependencies. xtal-match-media can partake in Polymer's powerful binding.

Other alternatives are also available (the more the merrier):

lit-media-query (https://www.webcomponents.org/element/lit-media-query)

  <p-d on="matches-media-query-changed" prop="textContent"></p-d>
  <div></div>
  <script type="module" src="https://unpkg.com/p-d.p-u@0.0.105/p-d.js?module"></script>
    <script type="module" src="https://unpkg.com/xtal-match-media@0.0.5/xtal-match-media.js?module"></script>
</div>
``` -->

Install the Polymer-CLI

First, make sure you have the Polymer CLI and npm (packaged with Node.js) installed. Run npm install to install your element's dependencies, then run polymer serve to serve your element locally.

Viewing Your Element

$ polymer serve

Compatibility

(Loading compatibility data...)

Last updated: 2000-01-01

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

  • xtal-element#0.0.29
Released
2019-03-03
Maturity
IMPORTED
License
MIT License

Compatibility

Framework
Polymer 3.0+ in 0.0.0
Browser
Browser Independent

xtal-match-media - Vaadin Add-on Directory

Custom Element that watches for media matches xtal-match-media - Vaadin Add-on Directory
[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/xtal-match-media) # \ Web component that watches for media matches and fires events when they happen. This is similar to Polymer's [iron-media-query](https://www.webcomponents.org/element/@polymer/iron-media-query), but with no legacy dependencies. xtal-match-media can partake in Polymer's powerful binding. Other alternatives are also available (the more the merrier): > lit-media-query (https://www.webcomponents.org/element/lit-media-query)
``` --> ## Install the Polymer-CLI First, make sure you have the [Polymer CLI](https://www.npmjs.com/package/polymer-cli) and npm (packaged with [Node.js](https://nodejs.org)) installed. Run `npm install` to install your element's dependencies, then run `polymer serve` to serve your element locally. ## Viewing Your Element ``` $ polymer serve ``` View on NPM
View on GitHub

xtal-match-media version 0.0.0
### Dependencies * @polymer/polymer#^3.0.0

xtal-match-media version 0.0.1
### Dependencies * xtal-latx#^0.0.17

xtal-match-media version 0.0.2
### Dependencies * xtal-latx#^0.0.17

xtal-match-media version 0.0.3
### Dependencies * xtal-latx#^0.0.17

xtal-match-media version 0.0.4
### Dependencies * xtal-latx#^0.0.20

xtal-match-media version 0.0.5
### Dependencies * xtal-element#0.0.29

xtal-match-media version 0.0.6
### Dependencies * xtal-element#0.0.29

Online