1-4-2 Responsive Material Design layouts

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.

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.

...
<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,
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 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.

<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:

...
<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.

...
<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:

...
<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.

<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.

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 219,635评论 6赞 508
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 93,628评论 3赞 396
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 165,971评论 0赞 356
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 58,986评论 1赞 295
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 68,006评论 6赞 394
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 51,784评论 1赞 307
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 40,475评论 3赞 420
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 39,364评论 0赞 276
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,860评论 1赞 317
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,008评论 3赞 338
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,152评论 1赞 351
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,829评论 5赞 346
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 41,490评论 3赞 331
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,035评论 0赞 22
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,156评论 1赞 272
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 48,428评论 3赞 373
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 45,127评论 2赞 356

推荐阅读更多精彩内容

  • 2003-2014考研真题
    **2014真题Directions:Read the following text. Choose the be...
    又是夜半惊坐起阅读 9,516评论 0赞 23
  • 他12岁，医生说他活不过10年了。-这就是最真实的人间
    你是否见识过这个世界的冷漠，无情以及残酷？ 我们总是习惯性的关注美好的事物，习惯性的歌颂阳光，赞美善良。是因为大多...
    毒舌的言晚阅读 472评论 0赞 1
  • 爸爸要走了
    今天是周五的晚上，爸爸回来了。爸爸，回来的时候已经筋疲力尽，但是他带回了一个好吃的就是烤鸭。我看见了烤鸭，...
    limaolin阅读 386评论 0赞 2
  • 护肤小知识
    护肤经验小知识： 外线 “光老化”等级：★★★★★ 阳光中的紫外线会穿透玻璃进入室内，所以只要在距离窗户4m范围之...
    jcy莹阅读 639评论 0赞 1
  • 隐去你存在过的痕迹 。
    在不得不离开的时候，开始全新跟不同，习惯一直想却未习惯的app，做想却一直没做的事，总之，将自己与过去分离，来隐去...
    Sheenagh阅读 227评论 0赞 0