Index: polymer_0.5.0/bower_components/core-scaffold/core-scaffold.html |
diff --git a/bower_components/core-scaffold/core-scaffold.html b/polymer_0.5.0/bower_components/core-scaffold/core-scaffold.html |
similarity index 63% |
rename from bower_components/core-scaffold/core-scaffold.html |
rename to polymer_0.5.0/bower_components/core-scaffold/core-scaffold.html |
index 26bece78c48817b10495cc25c39f05c9790500ac..d789b19861fb546d0dcdfbe11a50ec01b2a3bf6f 100644 |
--- a/bower_components/core-scaffold/core-scaffold.html |
+++ b/polymer_0.5.0/bower_components/core-scaffold/core-scaffold.html |
@@ -27,9 +27,29 @@ Example: |
</core-scaffold> |
Use `mode` to control the header and scrolling behavior of `core-header-panel` |
-and `responsiveWidth` to change the layout of the scaffold. |
+and `responsiveWidth` to change the layout of the scaffold. Use 'disableSwipe' |
+to disable swipe-to-open on toolbar. |
-To have the content fits to the main area, use `fit` attribute. |
+Use `rightDrawer` to move position of folding toolbar to the right instead of |
+left (default). This will also position content to the left of the menu button |
+instead of the right. You can use `flex` within your `tool` content to push the menu |
+button to the far right: |
+ |
+ <core-scaffold rightDrawer> |
+ <div tool flex >Title</div> |
+ </core-scaffold> |
+ |
+You may also add `middle` or `bottom` classes to your `tool` content when using tall |
+modes to adjust vertical content positioning in the core-toolbar (e.g. when using |
+mode="waterfall-tall"): |
+ |
+ <core-scaffold rightDrawer mode="waterfall-tall"> |
+ <div tool flex >Title</div> |
+ <div tool horizontal layout flex center-justified class="middle">Title-middle</div> |
+ <div tool horizontal layout flex end-justified class="bottom">Title-bottom</div> |
+ </core-scaffold> |
+ |
+To have the content fit to the main area, use `fit` attribute. |
<core-scaffold> |
<core-header-panel navigation flex mode="seamed"> |
@@ -79,7 +99,7 @@ To have the content fits to the main area, use `fit` attribute. |
</style> |
- <core-drawer-panel id="drawerPanel" narrow="{{narrow}}" responsiveWidth="{{responsiveWidth}}"> |
+ <core-drawer-panel id="drawerPanel" narrow="{{narrow}}" drawerWidth="{{drawerWidth}}" rightDrawer="{{rightDrawer}}" responsiveWidth="{{responsiveWidth}}" disableSwipe="{{disableSwipe}}"> |
<div vertical layout drawer> |
@@ -90,8 +110,13 @@ To have the content fits to the main area, use `fit` attribute. |
<core-header-panel id="headerPanel" main mode="{{mode}}"> |
<core-toolbar> |
- <core-icon-button id="menuButton" icon="menu" on-tap="{{togglePanel}}"></core-icon-button> |
+ <template if="{{!rightDrawer}}"> |
+ <core-icon-button id="menuButton" icon="menu" on-tap="{{togglePanel}}"></core-icon-button> |
+ </template> |
<content select="[tool]"></content> |
+ <template if="{{rightDrawer}}"> |
+ <core-icon-button id="menuButton" icon="menu" on-tap="{{togglePanel}}"></core-icon-button> |
+ </template> |
</core-toolbar> |
<content select="*"></content> |
@@ -124,6 +149,16 @@ To have the content fits to the main area, use `fit` attribute. |
*/ |
publish: { |
+ |
+ /** |
+ * Width of the drawer panel. |
+ * |
+ * @attribute drawerWidth |
+ * @type string |
+ * @default '256px' |
+ */ |
+ drawerWidth: '256px', |
+ |
/** |
* When the browser window size is smaller than the `responsiveWidth`, |
* `core-drawer-panel` changes to a narrow layout. In narrow layout, |
@@ -134,6 +169,25 @@ To have the content fits to the main area, use `fit` attribute. |
* @default '600px' |
*/ |
responsiveWidth: '600px', |
+ |
+ /** |
+ * If true, position the drawer to the right. Also place menu icon to |
+ * the right of the content instead of left. |
+ * |
+ * @attribute rightDrawer |
+ * @type boolean |
+ * @default false |
+ */ |
+ rightDrawer: false, |
+ |
+ /** |
+ * If true, swipe to open/close the drawer is disabled. |
+ * |
+ * @attribute disableSwipe |
+ * @type boolean |
+ * @default false |
+ */ |
+ disableSwipe: false, |
/** |
* Used to control the header and scrolling behaviour of `core-header-panel` |
@@ -155,29 +209,39 @@ To have the content fits to the main area, use `fit` attribute. |
}, |
/** |
- * Toggle the drawer panel |
- * @method togglePanel |
- */ |
+ * Toggle the drawer panel |
+ * @method togglePanel |
+ */ |
togglePanel: function() { |
this.$.drawerPanel.togglePanel(); |
}, |
/** |
- * Open the drawer panel |
- * @method openDrawer |
- */ |
+ * Open the drawer panel |
+ * @method openDrawer |
+ */ |
openDrawer: function() { |
this.$.drawerPanel.openDrawer(); |
}, |
/** |
- * Close the drawer panel |
- * @method closeDrawer |
- */ |
+ * Close the drawer panel |
+ * @method closeDrawer |
+ */ |
closeDrawer: function() { |
this.$.drawerPanel.closeDrawer(); |
}, |
+ /** |
+ * Returns the scrollable element on the main area. |
+ * |
+ * @property scroller |
+ * @type Object |
+ */ |
+ get scroller() { |
+ return this.$.headerPanel.scroller; |
+ }, |
+ |
scroll: function(e) { |
this.fire('scroll', {target: e.detail.target}, this, false); |
} |