| Index: third_party/polymer/v1_0/components-chromium/app-layout/app-drawer-layout/app-drawer-layout.html
|
| diff --git a/third_party/polymer/v1_0/components-chromium/app-layout/app-drawer-layout/app-drawer-layout.html b/third_party/polymer/v1_0/components-chromium/app-layout/app-drawer-layout/app-drawer-layout.html
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..7008187f7173ec69f11def304ca1b97abf6f0f84
|
| --- /dev/null
|
| +++ b/third_party/polymer/v1_0/components-chromium/app-layout/app-drawer-layout/app-drawer-layout.html
|
| @@ -0,0 +1,125 @@
|
| +<!--
|
| +@license
|
| +Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
|
| +This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
| +The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
| +The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
| +Code distributed by Google as part of the polymer project is also
|
| +subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
| +--><html><head><link rel="import" href="../../polymer/polymer.html">
|
| +<link rel="import" href="../../iron-media-query/iron-media-query.html">
|
| +<link rel="import" href="../../iron-resizable-behavior/iron-resizable-behavior.html">
|
| +<link rel="import" href="../app-drawer/app-drawer.html">
|
| +
|
| +<!--
|
| +app-drawer-layout is a wrapper element that positions an app-drawer and other content. When
|
| +the viewport width is smaller than `responsiveWidth`, this element changes to narrow layout.
|
| +In narrow layout, the drawer will be stacked on top of the main content. The drawer will slide
|
| +in/out to hide/reveal the main content.
|
| +
|
| +By default the drawer is aligned to the start, which is left in LTR layouts:
|
| +
|
| +```html
|
| +<app-drawer-layout>
|
| + <app-drawer>
|
| + drawer content
|
| + </app-drawer>
|
| + <div>
|
| + main content
|
| + </div>
|
| +</app-drawer-layout>
|
| +```
|
| +
|
| +Align the drawer at the end:
|
| +
|
| +```html
|
| +<app-drawer-layout>
|
| + <app-drawer align="end">
|
| + drawer content
|
| + </app-drawer>
|
| + <div>
|
| + main content
|
| + </div>
|
| +</app-drawer-layout>
|
| +```
|
| +
|
| +With an app-header-layout:
|
| +
|
| +```html
|
| +<app-drawer-layout>
|
| + <app-drawer>
|
| + drawer-content
|
| + </app-drawer>
|
| + <app-header-layout>
|
| + <app-header>
|
| + <app-toolbar>
|
| + <div title>App name</div>
|
| + </app-toolbar>
|
| + </app-header>
|
| +
|
| + main content
|
| +
|
| + </app-header-layout>
|
| +</app-drawer-layout>
|
| +```
|
| +
|
| +Add the `fullbleed` attribute to app-drawer-layout to make it fit the size of its container:
|
| +
|
| +```html
|
| +<app-drawer-layout fullbleed>
|
| + <app-drawer>
|
| + drawer content
|
| + </app-drawer>
|
| + <div>
|
| + main content
|
| + </div>
|
| +</app-drawer-layout>
|
| +```
|
| +
|
| +### Styling
|
| +
|
| +Custom property | Description | Default
|
| +-----------------------------------------|--------------------------------------|---------
|
| +`--app-drawer-layout-content-transition` | Transition for the content container | none
|
| +
|
| +@group App Elements
|
| +@element app-drawer-layout
|
| +@demo app-drawer-layout/demo/simple-drawer.html Simple Demo
|
| +@demo app-drawer-layout/demo/two-drawers.html Two drawers
|
| +-->
|
| +
|
| +</head><body><dom-module id="app-drawer-layout">
|
| + <template>
|
| + <style>
|
| + :host {
|
| + display: block;
|
| + }
|
| +
|
| + :host([fullbleed]) {
|
| + @apply(--layout-fit);
|
| + }
|
| +
|
| + #contentContainer {
|
| + position: relative;
|
| +
|
| + height: 100%;
|
| +
|
| + transition: var(--app-drawer-layout-content-transition, none);
|
| + }
|
| +
|
| + #contentContainer:not(.narrow) > ::content [drawer-toggle] {
|
| + display: none;
|
| + }
|
| + </style>
|
| +
|
| + <div id="contentContainer">
|
| + <content select=":not(app-drawer)"></content>
|
| + </div>
|
| +
|
| + <content id="drawerContent" select="app-drawer"></content>
|
| +
|
| + <iron-media-query query="[[_computeMediaQuery(forceNarrow, responsiveWidth)]]" query-matches="{{_narrow}}"></iron-media-query>
|
| + </template>
|
| +
|
| + </dom-module>
|
| +<script src="app-drawer-layout-extracted.js"></script></body></html>
|
|
|
Chromium Code Reviews
Issue 1984963002:
Roll Polymer elements (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master