jellyfin-web/dashboard-ui/bower_components/iron-media-query/demo/index.html
Luke Pulverenti 0bc95efe7e update icons
2015-06-20 20:49:42 -04:00

46 lines
1.5 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html>
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<title>iron-media-query demo</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../../paper-styles/paper-styles.html">
<link rel="import" href="../../paper-styles/demo-pages.html">
<link rel="import" href="../iron-media-query.html">
</head>
<body>
<div class="vertical-section vertical-section-container centered">
<h1>&lt;iron-media-query&gt;</h1>
<template is="dom-bind">
<iron-media-query query="(min-width: 600px)" query-matches="{{queryMatches}}"></iron-media-query>
<template is="dom-if" if="{{queryMatches}}">
<p>The viewports width is greater than <code>600px</code></p>
</template>
<template is="dom-if" if="{{!queryMatches}}">
<p>The viewports width is less than <code>600px</code></p>
</template>
</template>
</div>
</body>
</html>