third_party/polymer/v1_0/components-chromium/paper-drawer-panel/README.md - Issue 1834313003: Remove unneeded files from third_party/polymer.

Side by Side Diff: third_party/polymer/v1_0/components-chromium/paper-drawer-panel/README.md

Issue 1834313003: Remove unneeded files from third_party/polymer. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master

Patch Set: Restore bower.json files. Created 4 years, 8 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/paper-drawer-panel/CONTRIBUTING.md ('k') | third_party/polymer/v1_0/components-chromium/paper-drawer-panel/hero.svg » ('j') | third_party/polymer/v1_0/extract_inline_scripts.sh » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
	(Empty)
1

2 <!---

3

4 This README is automatically generated from the comments in these files:

5 paper-drawer-panel.html

6

7 Edit those files, and our readme bot will duplicate them over here!

8 Edit this file, and the bot will squash your changes :)

9

10 The bot does some handling of markdown. Please file a bug if it does the wrong

11 thing! https://github.com/PolymerLabs/tedium/issues

12

13 -->

14

15 [![Build status](https://travis-ci.org/PolymerElements/paper-drawer-panel.svg?br anch=master)](https://travis-ci.org/PolymerElements/paper-drawer-panel)

16

17 _[Demo and API docs](https://elements.polymer-project.org/elements/paper-drawer- panel)_

18

19

20 ##<paper-drawer-panel>

21

22 Material design: [Navigation drawer](https://www.google.com/design/spec/patterns /navigation-drawer.html)

23

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

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

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

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

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

29 panel.

30

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

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

33

34 Example:

35

36 ```html

37 <paper-drawer-panel>

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

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

40 </paper-drawer-panel>

41 ```

42

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

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

45

46 Example:

47

48 ```html

49 <paper-drawer-panel>

50 <paper-header-panel drawer>

51 <paper-toolbar></paper-toolbar>

52 <div> Drawer content... </div>

53 </paper-header-panel>

54 <paper-header-panel main>

55 <paper-toolbar></paper-toolbar>

56 <div> Main content... </div>

57 </paper-header-panel>

58 </paper-drawer-panel>

59 ```

60

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

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

63 be hidden in wide layout.

64

65 Example:

66

67 ```html

68 <paper-drawer-panel>

69 <paper-header-panel drawer>

70 <paper-toolbar>

71 <div>Application</div>

72 </paper-toolbar>

73 <div> Drawer content... </div>

74 </paper-header-panel>

75 <paper-header-panel main>

76 <paper-toolbar>

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

78 <div>Title</div>

79 </paper-toolbar>

80 <div> Main content... </div>

81 </paper-header-panel>

82 </paper-drawer-panel>

83 ```

84

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

86

87 ```html

88 <paper-drawer-panel right-drawer>

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

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

91 </paper-drawer-panel>

92 ```

93

94 ### Styling

95

96 To change the main container:

97

98 ```css

99 paper-drawer-panel {

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

101 background-color: gray;

102 };

103 }

104 ```

105

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

107

108 ```css

109 paper-drawer-panel {

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

111 background-color: white;

112 };

113 }

114 ```

115

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

117

118 ```css

119 paper-drawer-panel {

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

121 background-color: white;

122 };

123 }

124 ```

125

126 To customize the scrim:

127

128 ```css

129 paper-drawer-panel {

130 --paper-drawer-panel-scrim: {

131 background-color: red;

132 };

133 }

134 ```

135

136 The following custom properties and mixins are available for styling:

137

138 \| Custom property \| Description \| Default \|

139 \| --- \| --- \| --- \|

140 \| `--paper-drawer-panel-scrim-opacity` \| Scrim opacity \| 1 \|

141 \| `--paper-drawer-panel-drawer-container` \| Mixin applied to drawer container \| {} \|

142 \| `--paper-drawer-panel-left-drawer-container` \| Mixin applied to container when it's in the left side \| {} \|

143 \| `--paper-drawer-panel-main-container` \| Mixin applied to main container \| {} \|

144 \| `--paper-drawer-panel-right-drawer-container` \| Mixin applied to container whe n it's in the right side \| {} \|

145 \| `--paper-drawer-panel-scrim` \| Mixin applied to scrim \| {} \|

146

147

OLD	NEW