@kano/iron-location
v3.0.1
Published
Bidirectional data binding into the page's URL.
Downloads
8
Readme
iron-location
The iron-location elements manage bindings to and from the current URL and query parameters. See: Documentation, iron-location demo, iron-query-params demo.
<iron-location>
The iron-location element manages binding to and from the current URL.
<iron-query-params>
The iron-query-params element manages serialization and parsing of query
parameter strings.
Usage
Installation
npm install --save @polymer/iron-locationIn an html file
<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><iron-query-params>
<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>In a Polymer 3 element
<iron-location>
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);<iron-query-params>
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);Contributing
If you want to send a PR to this element, here are the instructions for running the tests and demo locally:
Installation
git clone https://github.com/PolymerElements/iron-location
cd iron-location
npm install
npm install -g polymer-cliRunning the demo locally
polymer serve --npm
open http://127.0.0.1:<port>/demo/Running the tests
polymer test --npm