third_party/polymer/components/core-scaffold/core-scaffold.html

   1 <!--
   2 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
   3 This code may only be used under the BSD style license found at http://polymer.github.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/CONTRIBUTORS.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/PATENTS.txt
   8 -->
   9
  10 <!--
  11 `core-scaffold` provides general application layout, introducing a
  12 responsive scaffold containing a header, toolbar, menu, title and
  13 areas for application content.
  14
  15 Example:
  16
  17     <core-scaffold>
  18       <core-header-panel navigation flex mode="seamed">
  19         <core-toolbar>Application</core-toolbar>
  20         <core-menu theme="core-light-theme">
  21           <core-item icon="settings" label="item1"></core-item>
  22           <core-item icon="settings" label="item2"></core-item>
  23         </core-menu>
  24       </core-header-panel>
  25       <div tool>Title</div>
  26       <div>Main content goes here...</div>
  27     </core-scaffold>
  28
  29 Use `mode` to control the header and scrolling behavior of `core-header-panel`
  30 and `responsiveWidth` to change the layout of the scaffold.  Use 'disableSwipe'
  31 to disable swipe-to-open on toolbar.
  32
  33 Use `rightDrawer` to move position of folding toolbar to the right instead of
  34 left (default).  This will also position content to the left of the menu button
  35 instead of the right.  You can use `flex` within your `tool` content to push the menu
  36 button to the far right:
  37
  38     <core-scaffold rightDrawer>
  39       <div tool flex >Title</div>
  40     </core-scaffold>
  41
  42 You may also add `middle` or `bottom` classes to your `tool` content when using tall
  43 modes to adjust vertical content positioning in the core-toolbar (e.g. when using
  44 mode="waterfall-tall"):
  45
  46     <core-scaffold rightDrawer mode="waterfall-tall">
  47       <div tool flex >Title</div>
  48       <div tool horizontal layout flex center-justified class="middle">Title-middle</div>
  49       <div tool horizontal layout flex end-justified class="bottom">Title-bottom</div>
  50     </core-scaffold>
  51
  52 To have the content fit to the main area, use `fit` attribute.
  53
  54     <core-scaffold>
  55       <core-header-panel navigation flex mode="seamed">
  56         ....
  57       </core-header-panel>
  58       <div tool>Title</div>
  59       <div fit>Content fits to the main area</div>
  60     </core-scaffold>
  61
  62 @group Polymer Core Elements
  63 @element core-scaffold
  64 @homepage github.io
  65 -->
  66
  67 <link rel="import" href="../core-toolbar/core-toolbar.html">
  68 <link rel="import" href="../core-drawer-panel/core-drawer-panel.html">
  69 <link rel="import" href="../core-header-panel/core-header-panel.html">
  70 <link rel="import" href="../core-icon-button/core-icon-button.html">
  71
  72 <polymer-element name="core-scaffold">
  73 <template>
  74
  75   <style>
  76
  77     :host {
  78       display: block;
  79     }
  80
  81     [drawer] {
  82       background-color: #fff;
  83       box-shadow: 1px 0 1px rgba(0, 0, 0, 0.1);
  84     }
  85
  86     [main] {
  87       height: 100%;
  88       background-color: #eee;
  89     }
  90
  91     core-toolbar {
  92       background-color: #526E9C;
  93       color: #fff;
  94     }
  95
  96     #drawerPanel:not([narrow]) #menuButton {
  97       display: none;
  98     }
  99
 100   </style>
 101
 102   <core-drawer-panel id="drawerPanel" narrow="{{narrow}}" drawerWidth="{{drawerWidth}}" rightDrawer="{{rightDrawer}}" responsiveWidth="{{responsiveWidth}}" disableSwipe="{{disableSwipe}}">
 103
 104     <div vertical layout drawer>
 105
 106       <content select="[navigation], nav"></content>
 107
 108     </div>
 109
 110     <core-header-panel id="headerPanel" main mode="{{mode}}">
 111
 112       <core-toolbar>
 113         <template if="{{!rightDrawer}}">
 114           <core-icon-button id="menuButton" icon="menu" on-tap="{{togglePanel}}"></core-icon-button>
 115         </template>
 116         <content select="[tool]"></content>
 117         <template if="{{rightDrawer}}">
 118           <core-icon-button id="menuButton" icon="menu" on-tap="{{togglePanel}}"></core-icon-button>
 119         </template>
 120       </core-toolbar>
 121
 122       <content select="*"></content>
 123
 124     </core-header-panel>
 125
 126   </core-drawer-panel>
 127
 128 </template>
 129 <script>
 130
 131   Polymer('core-scaffold', {
 132
 133     /**
 134      * Fired when the main content has been scrolled.  `event.detail.target` returns
 135      * the scrollable element which you can use to access scroll info such as
 136      * `scrollTop`.
 137      *
 138      *     <core-scaffold on-scroll="{{scrollHandler}}">
 139      *       ...
 140      *     </core-scaffold>
 141      *
 142      *
 143      *     scrollHandler: function(event) {
 144      *       var scroller = event.detail.target;
 145      *       console.log(scroller.scrollTop);
 146      *     }
 147      *
 148      * @event scroll
 149      */
 150
 151     publish: {
 152
 153       /**
 154        * Width of the drawer panel.
 155        *
 156        * @attribute drawerWidth
 157        * @type string
 158        * @default '256px'
 159        */
 160       drawerWidth: '256px',
 161
 162       /**
 163        * When the browser window size is smaller than the `responsiveWidth`,
 164        * `core-drawer-panel` changes to a narrow layout. In narrow layout,
 165        * the drawer will be stacked on top of the main panel.
 166        *
 167        * @attribute responsiveWidth
 168        * @type string
 169        * @default '600px'
 170        */
 171       responsiveWidth: '600px',
 172
 173       /**
 174        * If true, position the drawer to the right. Also place menu icon to
 175        * the right of the content instead of left.
 176        *
 177        * @attribute rightDrawer
 178        * @type boolean
 179        * @default false
 180        */
 181       rightDrawer: false,
 182
 183       /**
 184        * If true, swipe to open/close the drawer is disabled.
 185        *
 186        * @attribute disableSwipe
 187        * @type boolean
 188        * @default false
 189        */
 190       disableSwipe: false,
 191
 192       /**
 193        * Used to control the header and scrolling behaviour of `core-header-panel`
 194        *
 195        * @attribute mode
 196        * @type string
 197        * @default 'seamed'
 198        */
 199       mode: {value: 'seamed', reflect: true}
 200     },
 201
 202     ready: function() {
 203       this._scrollHandler = this.scroll.bind(this);
 204       this.$.headerPanel.addEventListener('scroll', this._scrollHandler);
 205     },
 206
 207     detached: function() {
 208       this.$.headerPanel.removeEventListener('scroll', this._scrollHandler);
 209     },
 210
 211     /**
 212      * Toggle the drawer panel
 213      * @method togglePanel
 214      */
 215     togglePanel: function() {
 216       this.$.drawerPanel.togglePanel();
 217     },
 218
 219     /**
 220      * Open the drawer panel
 221      * @method openDrawer
 222      */
 223     openDrawer: function() {
 224       this.$.drawerPanel.openDrawer();
 225     },
 226
 227     /**
 228      * Close the drawer panel
 229      * @method closeDrawer
 230      */
 231     closeDrawer: function() {
 232       this.$.drawerPanel.closeDrawer();
 233     },
 234
 235     /**
 236      * Returns the scrollable element on the main area.
 237      *
 238      * @property scroller
 239      * @type Object
 240      */
 241     get scroller() {
 242       return this.$.headerPanel.scroller;
 243     },
 244
 245     scroll: function(e) {
 246       this.fire('scroll', {target: e.detail.target}, this, false);
 247     }
 248
 249   });
 250
 251 </script>
 252 </polymer-element>