third_party/polymer/components-chromium/core-drawer-panel/core-drawer-panel.html - Issue 592593002: Inline scripts were extracted from Polymer elements.

Side by Side Diff: third_party/polymer/components-chromium/core-drawer-panel/core-drawer-panel.html

Issue 592593002: Inline scripts were extracted from Polymer elements. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master

Patch Set: s/echo ""/echo/ Created 6 years, 2 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/components-chromium/core-drawer-panel/core-drawer-panel.css ('k') | third_party/polymer/components-chromium/core-drawer-panel/core-drawer-panel-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 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.

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

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

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

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

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

	8 -->

	9

	10 <!--

	11 `core-drawer-panel` contains a drawer panel and a main panel. The drawer

	12 and the main panel are side-by-side with drawer on the left. When browser

	13 window size is smaller than the `responsiveWidth`, `core-drawer-panel`

	14 changes to narrow layout. In narrow layout, the drawer will be stacked on top

	15 of the main panel. The drawer will be slided in/out to hide/reveal the main

	16 panel.

	17

	18 Use the attribute `drawer` to indicate the element is a drawer panel and

	19 `main` to indicate is a main panel.

	20

	21 Example:

	22

	23 <core-drawer-panel>

	24 <div drawer> Drawer panel... </div>

	25 <div main> Main panel... </div>

	26 </core-drawer-panel>

	27

	28 The drawer and the main panels are not scrollable. You can set CSS overflow

	29 property on the elements to make them scrollable or use `core-header-panel`.

	30

	31 Example:

	32

	33 <core-drawer-panel>

	34 <core-header-panel drawer>

	35 <core-toolbar></core-toolbar>

	36 <div> Drawer content... </div>

	37 </core-header-panel>

	38 <core-header-panel main>

	39 <core-toolbar></core-toolbar>

	40 <div> Main content... </div>

	41 </core-header-panel>

	42 </core-drawer-panel>

	43

	44 To position the drawer to the right, add `rightDrawer` attribute.

	45

	46 <core-drawer-panel rightDrawer>

	47 <div drawer> Drawer panel... </div>

	48 <div main> Main panel... </div>

	49 </core-drawer-panel>

	50

	51 @group Polymer Core Elements

	52 @element core-drawer-panel

	53 @homepage github.io

	54 -->

	55

	56 <link rel="import" href="../core-media-query/core-media-query.html">

	57 <link rel="import" href="../core-selector/core-selector.html">

	58

	59 <polymer-element name="core-drawer-panel" touch-action="auto" assetpath="">

	60 <template>

	61

	62 <link rel="stylesheet" href="core-drawer-panel.css">

	63

	64 <core-media-query query="max-width: {{responsiveWidth}}" querymatches="{{query Matches}}"></core-media-query>

	65

	66 <core-selector class="{{ {'narrow-layout' : queryMatches, transition : transition, dragging : dragging, 'right-drawer': rightDrawer} \| tok enList }}" valueattr="id" selected="{{selected}}">

	67

	68 <div id="main" _style="left: {{ narrow \|\| rightDrawer ? '0' : draw erWidth }}; right: {{ rightDrawer ? (narrow ? '' : drawerWidth) : &apo s;' }};">

	69 <content select="[main]"></content>

	70 <div id="scrim" on-tap="{{togglePanel}}"></div>

	71 </div>

	72

	73 <div id="drawer" _style="width: {{ drawerWidth }}">

	74 <content select="[drawer]"></content>

	75 </div>

	76

	77 </core-selector>

	78

	79 </template>

	80

	81 </polymer-element>

	82 <script src="core-drawer-panel-extracted.js"></script>

OLD	NEW