• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1<!DOCTYPE html>
2<!--
3@license
4Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
5This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
6The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
7The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
8Code distributed by Google as part of the polymer project is also
9subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
10-->
11<html>
12<head>
13<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
14
15<title>app-route Demo</title>
16<link rel="import" href="../../polymer/polymer.html">
17
18<link rel="import" href="../../iron-demo-helpers/url-bar.html">
19<link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
20<link rel="import" href="../../iron-pages/iron-pages.html">
21<link rel="import" href="../../paper-input/paper-input.html">
22<link rel="import" href="../../paper-button/paper-button.html">
23
24<link rel="import" href="../app-location.html">
25<link rel="import" href="../app-route.html">
26</head>
27
28<body>
29<dom-module id="route-display">
30  <template>
31    <div>
32      <div>route<template is="dom-if" if="{{tail}}"> / tail</template>: {</div>
33      <div>&nbsp;&nbsp;prefix: {{route.prefix}}</div>
34      <div>&nbsp;&nbsp;path: {{route.path}}</div>
35      <div>}</div>
36    </div>
37  </template>
38  <script>
39    Polymer({
40      is: 'route-display',
41
42      properties: {
43        route: Object,
44        tail: Boolean
45      }
46    });
47  </script>
48</dom-module>
49
50<template is="dom-bind">
51  <url-bar></url-bar>
52
53  <app-location route="{{route}}" use-hash-as-path></app-location>
54
55  <app-route
56    route="{{route}}"
57    pattern="/:demoType"
58    data="{{demoSelectionData}}"
59    tail="{{demoSelectionTail}}">
60  </app-route>
61
62  <app-route
63      route="{{route}}"
64      pattern="/pathDemo/:firstPath/:secondPath"
65      data="{{pathData}}"
66      tail="{{pathDataTail}}">
67  </app-route>
68
69  <app-route
70      route="{{route}}"
71      pattern="/queryParamsDemo"
72      query-params="{{queryParams}}"
73      tail="{{qpDemoTail}}">
74  </app-route>
75
76  <div>App location route object
77    <route-display route="{{route}}"></route-display>
78  </div>
79
80  <paper-button raised>
81    <a href="#/pathDemo/firstPath/secondPath/thirdPath">Changes in Path</a>
82  </paper-button>
83
84  <paper-button raised>
85    <a href="?hello=world&foo=bar#/queryParamsDemo">Changes in Query Params</a>
86  </paper-button>
87
88  <iron-pages selected={{demoSelectionData.demoType}} attr-for-selected="demo">
89    <div demo="pathDemo">
90      Change location of first part of the path:
91      <paper-input value="{{pathData.firstPath}}"></paper-input>
92      Change location of second part of the path:
93      <paper-input value="{{pathData.secondPath}}"></paper-input>
94
95      <app-route
96          route="{{pathDataTail}}"
97          pattern="/:thirdPath"
98          data="{{tailExampleData}}">
99      </app-route>
100      You can pass the tail of an app-route to be the route another app-route. Here is
101      the tail object of the first app-route which is the route object of this new app-route:
102      <route-display route="{{pathDataTail}}" tail></route-display>
103      You can also bind to this new route. Change the location of the third part of
104      the path:
105      <paper-input value="{{tailExampleData.thirdPath}}"></paper-input>
106    </div>
107
108    <div demo="queryParamsDemo">
109      Change the value of the hello query param
110      <paper-input value="{{queryParams.hello}}"></paper-input>
111      Change the value of the foo param
112      <paper-input value="{{queryParams.foo}}"></paper-input>
113    </div>
114  </iron-pages>
115</template>
116</body>
117</html>
118