07d13c9c
 isisadmin
polymer catalog
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
|
---
title: Responsive Material Design layouts
summary: "How to create responsive Material Design layouts
with Paper and Iron elements."
tags: ['layout']
elements: ['paper-header-panel','paper-toolbar','paper-drawer-panel',
'paper-icon-button','paper-tabs','paper-tab','paper-drawer-panel', 'iron-icons',
'iron-flex-layout']
updated: 2015-07-23
---
<style>
paper-button {
background: #81C784;
color: white;
}
</style>
## Introduction
This guide teaches you how to use Paper and Iron elements to create a
responsive layout.
## Installation
Below is a list of commands for installing all of the elements mentioned
in this document. You probably
do not need to install all of these elements. Read the guide and decide
how you want to implement your layout, and then install only the elements
that you need.
```bash
bower install --save PolymerElements/paper-header-panel
bower install --save PolymerElements/paper-toolbar
bower install --save PolymerElements/paper-drawer-panel
bower install --save PolymerElements/paper-icon-button
bower install --save PolymerElements/paper-tabs
bower install --save PolymerElements/paper-tab
bower install --save PolymerElements/iron-icons
bower install --save PolymerElements/iron-flex-layout
```
We'll assume that you can import these elements from `/bower_components/`.
## Creating a header
This section shows you how to:
* Create a standard layout with `paper-header-panel` and `paper-toolbar`,
which is probably the most common and easiest layout.
* Use a custom element for a header.
* Add icons to a header.
* Set the height of a header.
* Add tabs to a header.
* Modify the disply and behavior of a header.
### Creating a header with `paper-toolbar`
The code below uses a `paper-header-panel` as the container of the
page and a `paper-toolbar` as a header. When a `paper-toolbar` is a
child of `paper-header-panel`, the panel automatically displays
the toolbar as the header. All other
children are placed in the content area.
```hmtl
...
<head>
...
<link rel="import"
href="/bower_components/paper-header-panel/paper-header-panel.html">
<link rel="import"
href="/bower_components/paper-toolbar/paper-toolbar.html">
<link rel="import"
href="/bower_components/iron-flex-layout/iron-flex-layout.html">
...
<body class="fullbleed vertical layout">
<!-- paper-header-panel must have an explicit height -->
<paper-header-panel class="flex">
<paper-toolbar>
<div>Header</div>
</paper-toolbar>
<div>Content</div>
</paper-header-panel>
</body>
...
```
<a href="assets/header-and-toolbar.html" target="_blank">
<paper-button noink>Demonstration</paper-button>
</a>
`paper-header-panel` **must have an explicit height**. See the list item
on `flex` below for an explanation of why the code above works.
`fullbleed`, `vertical`, `layout`, and `flex` are helper classes from
`iron-flex-layout.html`. We use them in our examples as an easy way
to create a responsive design with [Flexbox](http://www.smashingmagazine.com/2015/08/flexible-future-for-web-design-with-flexbox/),
but the `paper` elements do not depend
on them. Below is a description of each class used in the example above:
* `fullbleed` instructs `body` to occupy the entire viewport.
* `vertical` and `layout` instruct `body` to stack elements
vertically (use `vertical horizontal` to stack horizontally). `layout`
must be accompanied by `vertical` or `horizontal`. It is meaningless
on its own.
* `flex` instructs `paper-panel-header` to stretch to the entire
size of its parent, in this case `body` (which is set to fill the entire
viewport, hence achieving a responsive design).
See [Flexbox layout with iron-flex-layout](/guides/flex-layout) for more
on `iron-flex-layout`.
### Using other elements for the header
You can use another element as a header by adding the
`paper-header` class to the element.
```html
<head>
<link rel="import"
href="/bower_components/paper-header-panel/paper-header-panel.html">
<link rel="import"
href="/bower_components/iron-flex-layout/iron-flex-layout.html">
...
<body class="fullbleed vertical layout">
<paper-header-panel class="flex">
<div class="paper-header">
Header
</div>
<div>Content</div>
</paper-header-panel>
</body>
```
<a href="assets/custom-header.html" target="_blank">
<paper-button noink>Demonstration</paper-button>
</a>
### Adding icons
Use `paper-icon-button` and `iron-icons` to add icons to your header:
```html
...
<head>
...
<link rel="import"
href="/bower_components/paper-header-panel/paper-header-panel.html">
<link rel="import"
href="/bower_components/paper-toolbar/paper-toolbar.html">
<link rel="import"
href="/bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import"
href="/bower_components/iron-icons/iron-icons.html">
<link rel="import"
href="/bower_components/iron-flex-layout/iron-flex-layout.html">
...
<body class="fullbleed vertical layout">
<paper-header-panel class="flex">
<paper-toolbar>
<div>Header</div>
<span class="flex"></span>
<paper-icon-button icon="search"></paper-button-icon>
</paper-toolbar>
<div>Content</div>
</paper-header-panel>
</body>
```
<a href="assets/icons.html" target="_blank">
<paper-button noink>Demonstration</paper-button>
</a>
`paper-icon-button` displays the icon and handles the icon's behavior.
`iron-icons` is a collection of SVG icons which you can use for free
in your project.
How does the search icon display on the right side? The trick
is the `span` between the `div` and the `paper-icon-button`.
The `div` containing the text `Header` only takes up as
much space as is needed to display
the text content. Same with the `paper-icon-button`; it only takes up
as much space as is needed to display the icon. The `flex`
class forces the `span` to fill the entire space between the `div` and
the `paper-icon-button`.
### Setting the height
Use the `medium-tall` (2x regular height) and `tall` (3x regular height) style
classes to change the height of your header.
```hmtl
...
<head>
...
<link rel="import"
href="/bower_components/paper-header-panel/paper-header-panel.html">
<link rel="import"
href="/bower_components/paper-toolbar/paper-toolbar.html">
<link rel="import"
href="/bower_components/iron-flex-layout/iron-flex-layout.html">
...
<body class="fullbleed vertical layout">
<paper-header-panel class="flex">
<paper-toolbar class="tall">
<div>Header</div>
</paper-toolbar>
<div>Content</div>
</paper-header-panel>
</body>
...
```
<a href="assets/tall-header.html" target="_blank">
<paper-button noink>Demonstration</paper-button>
</a>
### Adding tabs
Use `paper-tabs` to add tabs to your header:
```hmtl
...
<head>
...
<link rel="import"
href="/bower_components/paper-header-panel/paper-header-panel.html">
<link rel="import"
href="/bower_components/paper-toolbar/paper-toolbar.html">
<link rel="import"
href="/bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import"
href="/bower_components/paper-tabs/paper-tabs.html">
<link rel="import"
href="/bower_components/iron-icons/iron-icons.html">
<link rel="import"
href="/bower_components/iron-flex-layout/iron-flex-layout.html">
...
<body class="fullbleed vertical layout">
<paper-header-panel class="flex">
<paper-toolbar class="medium-tall">
<paper-icon-button id="navicon"
icon="menu"></paper-icon-button>
<!-- flex class forces span to fill space between icons -->
<span class="flex">Title</span>
<!-- icon displays at right because of span class above -->
<paper-icon-button id="morebutton"
icon="more-vert"></paper-icon-button>
<paper-tabs class="bottom fit" selected="0">
<paper-tab>ONE</paper-tab>
<paper-tab>TWO</paper-tab>
</paper-tabs>
</paper-toolbar>
<div>Content</div>
</paper-header-panel>
</body>
...
```
<a href="assets/tabs.html" target="_blank">
<paper-button noink>Demonstration</paper-button>
</a>
### Modifying header display and behavior
Use the `mode` attribute of `paper-header-panel` to control how the
header displays and responds to scrolling. The list below describes
the different valid values for `mode`. See the link below for a
demonstration of all modes.
* `standard`: The header appears at a higher level than the content area,
with a drop shadow. Content scrolls under the header.
* `seamed`: The header appears at the same level as the content area,
with a seam between the two (no drop shadow). Content scrolls under the header.
* `waterfall`: The header initially presents as seamed. When content scrolls
under the header, the header raises up and casts a drop shadow (as in
standard mode).
* `waterfall-tall`: Like waterfall, except that the toolbar starts off
tall (3x standard height) and condenses to a standard-height
toolbar as the user scrolls. In this mode, `paper-header-panel` controls
the height of the toolbar, so you should not set it yourself (via
`medium-tall` or `tall`).
* `scroll`: The header is seamed with the content and scrolls with the content.
* `cover`: The content scrolls over the header. This mode is designed to
be used with narrow content (for example cards).
<a href="/elements/paper-header-panel?view=demo:demo/index.html" target="_blank">
<paper-button noink>Demonstration</paper-button>
</a>
## Creating a responsive navigation drawer
Use `paper-drawer-panel` to create a left-side or right-side
navigation menu.
```html
<head>
<link rel="import"
href="/bower_components/paper-drawer-panel/paper-drawer-panel.html">
<link rel="import"
href="/bower_components/paper-header-panel/paper-header-panel.html">
<link rel="import"
href="/bower_components/paper-toolbar/paper-toolbar.html">
<link rel="import"
href="/bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import"
href="/bower_components/iron-icons/iron-icons.html">
<link rel="import"
href="/bower_components/iron-flex-layout/iron-flex-layout.html">
...
<body class="fullbleed vertical layout">
<paper-drawer-panel class="flex">
<paper-header-panel drawer>
<paper-toolbar>
<div>Application</div>
</paper-toolbar>
<div> Drawer content... </div>
</paper-header-panel>
<paper-header-panel main>
<paper-toolbar>
<paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button>
<div>Title</div>
</paper-toolbar>
<div> Main content... </div>
</paper-header-panel>
</paper-drawer-panel>
</body>
```
<a href="assets/drawer.html" target="_blank">
<paper-button noink>Demonstration</paper-button>
</a>
On narrow screens, the drawer is hidden by default. The user can
touch the button or swipe in order to display the drawer.
On wide screens, the drawer is always open and the button to open
the drawer is hidden.
Use the `togglePanel` method to hide or reveal the drawer
programmatically. Or, add the `paper-drawer-toggle` attribute to an
element. This attribute makes the element act as an open / close button and
removes the need to call `togglePanel` explicitly.
Any children with the `drawer` attribute set are placed in the navigation area.
Any children with the `main` attribute are placed in the main panel.
|
