Index: third_party/polymer/v1_0/components-chromium/paper-drawer-panel/README.md |
diff --git a/third_party/polymer/v1_0/components-chromium/paper-drawer-panel/README.md b/third_party/polymer/v1_0/components-chromium/paper-drawer-panel/README.md |
index 1fa8c96b6267aa2308897d9459d16a4704d5fe2b..78ada9e07743aa738786891c170850e1bcf60afd 100644 |
--- a/third_party/polymer/v1_0/components-chromium/paper-drawer-panel/README.md |
+++ b/third_party/polymer/v1_0/components-chromium/paper-drawer-panel/README.md |
@@ -7,16 +7,18 @@ paper-drawer-panel.html |
Edit those files, and our readme bot will duplicate them over here! |
Edit this file, and the bot will squash your changes :) |
+The bot does some handling of markdown. Please file a bug if it does the wrong |
+thing! https://github.com/PolymerLabs/tedium/issues |
+ |
--> |
-[](https://travis-ci.org/PolymerElements/paper-drawer-panel) |
+[](https://travis-ci.org/PolymerElements/paper-drawer-panel) |
-_[Demo and API Docs](https://elements.polymer-project.org/elements/paper-drawer-panel)_ |
+_[Demo and API docs](https://elements.polymer-project.org/elements/paper-drawer-panel)_ |
##<paper-drawer-panel> |
- |
Material design: [Navigation drawer](https://www.google.com/design/spec/patterns/navigation-drawer.html) |
`paper-drawer-panel` contains a drawer panel and a main panel. The drawer |
@@ -31,26 +33,30 @@ Use the attribute `drawer` to indicate that the element is the drawer panel and |
Example: |
- <paper-drawer-panel> |
- <div drawer> Drawer panel... </div> |
- <div main> Main panel... </div> |
- </paper-drawer-panel> |
+```html |
+<paper-drawer-panel> |
+ <div drawer> Drawer panel... </div> |
+ <div main> Main panel... </div> |
+</paper-drawer-panel> |
+``` |
The drawer and the main panels are not scrollable. You can set CSS overflow |
property on the elements to make them scrollable or use `paper-header-panel`. |
Example: |
- <paper-drawer-panel> |
- <paper-header-panel drawer> |
- <paper-toolbar></paper-toolbar> |
- <div> Drawer content... </div> |
- </paper-header-panel> |
- <paper-header-panel main> |
- <paper-toolbar></paper-toolbar> |
- <div> Main content... </div> |
- </paper-header-panel> |
- </paper-drawer-panel> |
+```html |
+<paper-drawer-panel> |
+ <paper-header-panel drawer> |
+ <paper-toolbar></paper-toolbar> |
+ <div> Drawer content... </div> |
+ </paper-header-panel> |
+ <paper-header-panel main> |
+ <paper-toolbar></paper-toolbar> |
+ <div> Main content... </div> |
+ </paper-header-panel> |
+</paper-drawer-panel> |
+``` |
An element that should toggle the drawer will automatically do so if it's |
given the `paper-drawer-toggle` attribute. Also this element will automatically |
@@ -58,72 +64,84 @@ be hidden in wide layout. |
Example: |
- <paper-drawer-panel> |
- <paper-header-panel drawer> |
- <paper-toolbar> |
- <div>Application</div> |
- </paper-toolbar> |
- <div> Drawer content... </div> |
- </paper-header-panel> |
- <paper-header-panel main> |
- <paper-toolbar> |
- <paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button> |
- <div>Title</div> |
- </paper-toolbar> |
- <div> Main content... </div> |
- </paper-header-panel> |
- </paper-drawer-panel> |
+```html |
+<paper-drawer-panel> |
+ <paper-header-panel drawer> |
+ <paper-toolbar> |
+ <div>Application</div> |
+ </paper-toolbar> |
+ <div> Drawer content... </div> |
+ </paper-header-panel> |
+ <paper-header-panel main> |
+ <paper-toolbar> |
+ <paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button> |
+ <div>Title</div> |
+ </paper-toolbar> |
+ <div> Main content... </div> |
+ </paper-header-panel> |
+</paper-drawer-panel> |
+``` |
To position the drawer to the right, add `right-drawer` attribute. |
- <paper-drawer-panel right-drawer> |
- <div drawer> Drawer panel... </div> |
- <div main> Main panel... </div> |
- </paper-drawer-panel> |
+```html |
+<paper-drawer-panel right-drawer> |
+ <div drawer> Drawer panel... </div> |
+ <div main> Main panel... </div> |
+</paper-drawer-panel> |
+``` |
### Styling |
To change the main container: |
- paper-drawer-panel { |
- --paper-drawer-panel-main-container: { |
- background-color: gray; |
- }; |
- } |
+```css |
+paper-drawer-panel { |
+ --paper-drawer-panel-main-container: { |
+ background-color: gray; |
+ }; |
+} |
+``` |
To change the drawer container when it's in the left side: |
- paper-drawer-panel { |
- --paper-drawer-panel-left-drawer-container: { |
- background-color: white; |
- }; |
- } |
+```css |
+paper-drawer-panel { |
+ --paper-drawer-panel-left-drawer-container: { |
+ background-color: white; |
+ }; |
+} |
+``` |
To change the drawer container when it's in the right side: |
- paper-drawer-panel { |
- --paper-drawer-panel-right-drawer-container: { |
- background-color: white; |
- }; |
- } |
+```css |
+paper-drawer-panel { |
+ --paper-drawer-panel-right-drawer-container: { |
+ background-color: white; |
+ }; |
+} |
+``` |
To customize the scrim: |
- paper-drawer-panel { |
- --paper-drawer-panel-scrim: { |
- background-color: red; |
- }; |
- } |
+```css |
+paper-drawer-panel { |
+ --paper-drawer-panel-scrim: { |
+ background-color: red; |
+ }; |
+} |
+``` |
The following custom properties and mixins are available for styling: |
-Custom property | Description | Default |
-----------------|-------------|---------- |
-`--paper-drawer-panel-scrim-opacity` | Scrim opacity | 1 |
-`--paper-drawer-panel-drawer-container` | Mixin applied to drawer container | {} |
-`--paper-drawer-panel-left-drawer-container` | Mixin applied to container when it's in the left side | {} |
-`--paper-drawer-panel-main-container` | Mixin applied to main container | {} |
-`--paper-drawer-panel-right-drawer-container` | Mixin applied to container when it's in the right side | {} |
-`--paper-drawer-panel-scrim` | Mixin applied to scrim | {} |
+| Custom property | Description | Default | |
+| --- | --- | --- | |
+| `--paper-drawer-panel-scrim-opacity` | Scrim opacity | 1 | |
+| `--paper-drawer-panel-drawer-container` | Mixin applied to drawer container | {} | |
+| `--paper-drawer-panel-left-drawer-container` | Mixin applied to container when it's in the left side | {} | |
+| `--paper-drawer-panel-main-container` | Mixin applied to main container | {} | |
+| `--paper-drawer-panel-right-drawer-container` | Mixin applied to container when it's in the right side | {} | |
+| `--paper-drawer-panel-scrim` | Mixin applied to scrim | {} | |