third_party/polymer/v0_8/components-chromium/paper-drawer-panel/paper-drawer-panel.html - Issue 1155683008: Rename polymer and cr_elements v0_8 to v1_0

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

Issue 1155683008: Rename polymer and cr_elements v0_8 to v1_0 (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@v1

Patch Set: fix a merge mistake Created 5 years, 6 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/v0_8/components-chromium/paper-drawer-panel/paper-drawer-panel.css ('k') | third_party/polymer/v0_8/components-chromium/paper-drawer-panel/paper-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) 2015 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 --><html><head><link rel="import" href="../polymer/polymer.html">

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

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

11

12 <!--

13 `paper-drawer-panel` contains a drawer panel and a main panel. The drawer

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

15 window size is smaller than the `responsiveWidth`, `paper-drawer-panel`

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

17 of the main panel. The drawer will slide in/out to hide/reveal the main

18 panel.

19

20 Use the attribute `drawer` to indicate that the element is the drawer panel and

21 `main` to indicate that the element is the main panel.

22

23 Example:

24

25 <paper-drawer-panel>

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

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

28 </paper-drawer-panel>

29

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

31 property on the elements to make them scrollable or use `paper-header-panel`.

32

33 Example:

34

35 <paper-drawer-panel>

36 <paper-header-panel drawer>

37 <paper-toolbar></paper-toolbar>

38 <div> Drawer content... </div>

39 </paper-header-panel>

40 <paper-header-panel main>

41 <paper-toolbar></paper-toolbar>

42 <div> Main content... </div>

43 </paper-header-panel>

44 </paper-drawer-panel>

45

46 An element that should toggle the drawer will automatically do so if it's

47 given the `paper-drawer-toggle` attribute. Also this element will automatically

48 be hidden in wide layout.

49

50 Example:

51

52 <paper-drawer-panel>

53 <paper-header-panel drawer>

54 <paper-toolbar>

55 <div>Application</div>

56 </paper-toolbar>

57 <div> Drawer content... </div>

58 </paper-header-panel>

59 <paper-header-panel main>

60 <paper-toolbar>

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

62 <div>Title</div>

63 </paper-toolbar>

64 <div> Main content... </div>

65 </paper-header-panel>

66 </paper-drawer-panel>

67

68 To position the drawer to the right, add `right-drawer` attribute.

69

70 <paper-drawer-panel right-drawer>

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

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

73 </paper-drawer-panel>

74

75 Styling paper-drawer-panel:

76

77 To change the main container:

78 paper-drawer-panel {

79 --paper-drawer-panel-main-container: {

80 background-color: gray;

81 };

82 }

83

84 To change the drawer container when it's in the left side:

85 paper-drawer-panel {

86 --paper-drawer-panel-left-drawer-container: {

87 background-color: white;

88 };

89 }

90

91 To change the drawer container when it's in the right side:

92

93 paper-drawer-panel {

94 --paper-drawer-panel-right-drawer-container: {

95 background-color: white;

96 };

97 }

98

99 @group Paper elements

100 @element paper-drawer-panel

101 @demo demo/index.html

102 @hero hero.svg

103 -->

104

105 </head><body><dom-module id="paper-drawer-panel">

106 <link rel="import" type="css" href="paper-drawer-panel.css">

107

108 <template>

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

110 </iron-media-query>

111

112 <iron-selector attr-for-selected="id" class$="[[_computeIronSelectorClass(na rrow, transition, dragging, rightDrawer)]]" activate-event="" selected="[[select ed]]">

113

114 <div id="main" style$="[[_computeMainStyle(narrow, rightDrawer, drawerWidt h)]]">

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

116 <div id="scrim" on-tap="closeDrawer"></div>

117 </div>

118

119 <div id="drawer" style$="[[_computeDrawerStyle(drawerWidth)]]">

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

121 </div>

122

123 </iron-selector>

124 </template>

125

126 </dom-module>

127

128 <script src="paper-drawer-panel-extracted.js"></script></body></html>

OLD	NEW