lit-media-query

Web component for media queries (like iron-media-query) implemented with LitElement.

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
lit-media-query
1.10.12 years ago5 years agoMinified + gzip package size for lit-media-query in KB

Readme

lit-media-query
Published on webcomponents.org npm Web component for media queries (like iron-media-query) implemented with LitElement. See Documentation, Demo.

Installation

```shell npm install lit-media-query --save ``` Then, import lit-media-query into your element: ```javascript import 'lit-media-query/lit-media-query.js'; ``` or in an html file: ```html ```

Usage

In your LitElement class: ```javascript static get properties() { return {
_query: { type: String },
_isMobile: { type: Boolean }
} } constructor() { super(); this.query = '(max-width: 460px)'; this.isMobile = false; } render() { return html` .query="${this._query}"
@changed="${this._handleMediaQuery}">
`; } handleMediaQuery(event) { this.isMobile = event.detail.value; } ``` Variable value from the event is a Boolean. Will be true if the media query is fulfilled, otherwise is false. In this example, when the viewport is less than 460px the variable _isMobile will be true.

Browser compatibility

lit-media-query uses Visual Viewport API which is not yet compatible with all browsers, but it will fall back to window onresize event, increasing the browsers compatibility.

Contributing

  1. Fork it!
  1. Create your feature branch: git checkout -b my-new-feature
  1. Commit your changes: git commit -am 'Add some feature'
  1. Push to the branch: git push origin my-new-feature
  1. Submit a pull request :D