Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(677)

Unified Diff: polymer_0.5.0/bower_components/core-scaffold/core-scaffold.html

Issue 786953007: npm_modules: Fork bower_components into Polymer 0.4.0 and 0.5.0 versions (Closed) Base URL: https://chromium.googlesource.com/infra/third_party/npm_modules.git@master
Patch Set: Created 5 years, 12 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 side-by-side diff with in-line comments
Download patch
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);
}
« no previous file with comments | « polymer_0.5.0/bower_components/core-scaffold/bower.json ('k') | polymer_0.5.0/bower_components/core-scaffold/demo.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698