third_party/polymer/v1_0/components-chromium/app-layout/app-drawer-layout/app-drawer-layout.html - Issue 1984963002: Roll Polymer elements

Side by Side Diff: third_party/polymer/v1_0/components-chromium/app-layout/app-drawer-layout/app-drawer-layout.html

Issue 1984963002: Roll Polymer elements (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master

Patch Set: Created 4 years, 7 months ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

View unified diff | Download patch

« no previous file with comments | « third_party/polymer/v1_0/components-chromium/app-layout/app-box/compiled_resources2.gyp ('k') | third_party/polymer/v1_0/components-chromium/app-layout/app-drawer-layout/app-drawer-layout-extracted.js » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
(Empty)
	1 <!--

	2 @license

	3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.

	4 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt

	5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt

	6 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt

	7 Code distributed by Google as part of the polymer project is also

	8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt

	9 --><html><head><link rel="import" href="../../polymer/polymer.html">

	10 <link rel="import" href="../../iron-media-query/iron-media-query.html">

	11 <link rel="import" href="../../iron-resizable-behavior/iron-resizable-behavior.h tml">

	12 <link rel="import" href="../app-drawer/app-drawer.html">

	13

	14 <!--

	15 app-drawer-layout is a wrapper element that positions an app-drawer and other co ntent. When

	16 the viewport width is smaller than `responsiveWidth`, this element changes to na rrow layout.

	17 In narrow layout, the drawer will be stacked on top of the main content. The dra wer will slide

	18 in/out to hide/reveal the main content.

	19

	20 By default the drawer is aligned to the start, which is left in LTR layouts:

	21

	22 ```html

	23 <app-drawer-layout>

	24 <app-drawer>

	25 drawer content

	26 </app-drawer>

	27 <div>

	28 main content

	29 </div>

	30 </app-drawer-layout>

	31 ```

	32

	33 Align the drawer at the end:

	34

	35 ```html

	36 <app-drawer-layout>

	37 <app-drawer align="end">

	38 drawer content

	39 </app-drawer>

	40 <div>

	41 main content

	42 </div>

	43 </app-drawer-layout>

	44 ```

	45

	46 With an app-header-layout:

	47

	48 ```html

	49 <app-drawer-layout>

	50 <app-drawer>

	51 drawer-content

	52 </app-drawer>

	53 <app-header-layout>

	54 <app-header>

	55 <app-toolbar>

	56 <div title>App name</div>

	57 </app-toolbar>

	58 </app-header>

	59

	60 main content

	61

	62 </app-header-layout>

	63 </app-drawer-layout>

	64 ```

	65

	66 Add the `fullbleed` attribute to app-drawer-layout to make it fit the size of it s container:

	67

	68 ```html

	69 <app-drawer-layout fullbleed>

	70 <app-drawer>

	71 drawer content

	72 </app-drawer>

	73 <div>

	74 main content

	75 </div>

	76 </app-drawer-layout>

	77 ```

	78

	79 ### Styling

	80

	81 Custom property \| Description \| Default

	82 -----------------------------------------\|-------------------------------------- \|---------

	83 `--app-drawer-layout-content-transition` \| Transition for the content container \| none

	84

	85 @group App Elements

	86 @element app-drawer-layout

	87 @demo app-drawer-layout/demo/simple-drawer.html Simple Demo

	88 @demo app-drawer-layout/demo/two-drawers.html Two drawers

	89 -->

	90

	91 </head><body><dom-module id="app-drawer-layout">

	92 <template>

	93 <style>

	94 :host {

	95 display: block;

	96 }

	97

	98 :host([fullbleed]) {

	99 @apply(--layout-fit);

	100 }

	101

	102 #contentContainer {

	103 position: relative;

	104

	105 height: 100%;

	106

	107 transition: var(--app-drawer-layout-content-transition, none);

	108 }

	109

	110 #contentContainer:not(.narrow) > ::content [drawer-toggle] {

	111 display: none;

	112 }

	113 </style>

	114

	115 <div id="contentContainer">

	116 <content select=":not(app-drawer)"></content>

	117 </div>

	118

	119 <content id="drawerContent" select="app-drawer"></content>

	120

	121 <iron-media-query query="[[_computeMediaQuery(forceNarrow, responsiveWidth)] ]" query-matches="{{_narrow}}"></iron-media-query>

	122 </template>

	123

	124 </dom-module>

	125 <script src="app-drawer-layout-extracted.js"></script></body></html>

OLD	NEW