The iron-location elements manage bindings to and from the current URL and query parameters. See: Documentation, iron-location demo, iron-query-params demo.
The iron-location element manages binding to and from the current URL.
The iron-query-params element manages serialization and parsing of query
parameter strings.
npm install --save @polymer/iron-location
<html>
<head>
<script type="module">
import '@polymer/iron-location/iron-location.js';
</script>
</head>
<body>
<iron-location
path="/social/profiles"
hash="profilePicture"
query="userId=polymer&display=dark"
dwell-time="1000">
</iron-location>
</body>
</html><html>
<head>
<script type="module">
import '@polymer/polymer/lib/elements/dom-bind.js';
import '@polymer/iron-location/iron-location.js';
import '@polymer/iron-location/iron-query-params.js';
</script>
</head>
<body>
<dom-bind>
<template>
<iron-location
path="/social/profiles"
hash="profilePicture"
query="{{paramsString}}"
dwell-time="1000">
</iron-location>
<iron-query-params
id="queryParams"
params-string='{{paramsString}}'
params-object='{"userId": "polymer", "display": "dark"}'>
</iron-query-params>
</template>
</dom-bind>
</body>
</html>import {PolymerElement, html} from '@polymer/polymer';
import '@polymer/iron-location/iron-location.js';
class SampleElement extends PolymerElement {
static get template() {
return html`
<iron-location
path="/social/profiles"
hash="profilePicture"
query="userId=polymer&display=dark"
dwell-time="1000">
</iron-location>
`;
}
}
customElements.define('sample-element', SampleElement);import {PolymerElement, html} from '@polymer/polymer';
import '@polymer/iron-location/iron-location.js';
import '@polymer/iron-location/iron-query-params.js';
class SampleElement extends PolymerElement {
static get template() {
return html`
<iron-location
path="/social/profiles"
hash="profilePicture"
query="{{paramsString}}"
dwell-time="1000">
</iron-location>
<iron-query-params
id="queryParams"
params-string='{{paramString}}'
params-object='{"userId": "polymer", "display": "dark"}'>
</iron-query-params>
`;
}
}
customElements.define('sample-element', SampleElement);If you want to send a PR to this element, here are the instructions for running the tests and demo locally:
git clone https://github.com/PolymerElements/iron-location
cd iron-location
npm install
npm install -g polymer-clipolymer serve --npm
open http://127.0.0.1:<port>/demo/polymer test --npm