third_party/polymer/v1_0/components-chromium/app-layout/app-drawer-layout/app-drawer-layout.html - Issue 2633633002: Polymer: Remove unused app-layout element

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

Issue 2633633002: Polymer: Remove unused app-layout element (Closed)

Patch Set: Created 3 years, 11 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:

« chrome/browser/resources/md_downloads/vulcanized.html ('K') | « 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 `drawer-toggle` attribute to elements inside `app-drawer-layout` that to ggle the drawer on tap events:

67

68 ```html

69 <app-drawer-layout>

70 <app-drawer>

71 drawer-content

72 </app-drawer>

73 <app-header-layout>

74 <app-header>

75 <app-toolbar>

76 <paper-icon-button icon="menu" drawer-toggle></paper-icon-button>

77 <div title>App name</div>

78 </app-toolbar>

79 </app-header>

80

81 main content

82

83 </app-header-layout>

84 </app-drawer-layout>

85 ```

86

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

88

89 ```html

90 <app-drawer-layout fullbleed>

91 <app-drawer>

92 drawer content

93 </app-drawer>

94 <div>

95 main content

96 </div>

97 </app-drawer-layout>

98 ```

99

100 ### Styling

101

102 Custom property \| Description \| Default

103 -----------------------------------------\|-------------------------------------- \|---------

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

105

106 @group App Elements

107 @element app-drawer-layout

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

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

110 -->

111

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

113 <template>

114 <style>

115 :host {

116 display: block;

117 }

118

119 :host([fullbleed]) {

120 @apply(--layout-fit);

121 }

122

123 #contentContainer {

124 position: relative;

125

126 height: 100%;

127

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

129 }

130

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

132 display: none;

133 }

134 </style>

135

136 <div id="contentContainer">

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

138 </div>

139

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

141

142 <iron-media-query query="[[_computeMediaQuery(forceNarrow, responsiveWidth)] ]" on-query-matches-changed="_onQueryMatchesChanged"></iron-media-query>

143 </template>

144

145 </dom-module>

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

OLD	NEW