CODEWITHSUNDEEP
polymer
Anders
Anders

Reputation: 1377

How to use core-scroll-header-panel with core-list

I'm wanting to use core-scroll-header-panel with core-list so that as I scroll the list the header condenses and disappears. Particularly for mobile that will maximise the space for the list. I took the demo and tried to adapt it for a core-list but failed to get it to scroll the header off the page. My attempts are at http://jsbin.com/sivuvu

Any help appreciated.

Upvotes: 1

Views: 1017

Answers (1)

Jeff Posnick
Jeff Posnick

Reputation: 56044

Here's one possible solution:

<!doctype html>
<html>
  <head>
    <script src="https://www.polymer-project.org/0.5/webcomponents.min.js"></script>
    <link rel="import" href="https://www.polymer-project.org/0.5/components/polymer/polymer.html">
    <link rel="import" href="https://www.polymer-project.org/0.5/components/core-scroll-header-panel/core-scroll-header-panel.html">
    <link rel="import" href="https://www.polymer-project.org/0.5/components/core-list/core-list.html">
    <link rel="import" href="https://www.polymer-project.org/0.5/components/core-header-panel/core-header-panel.html">
    <link rel="import" href="https://www.polymer-project.org/0.5/components/core-toolbar/core-toolbar.html">
    <link rel="import" href="https://www.polymer-project.org/0.5/components/core-icon-button/core-icon-button.html">

    <style shim-shadowdom>
      body {
        font-family: sans-serif;
        color: #333;
      }

      /* background for toolbar when it is at its full size */
      core-scroll-header-panel::shadow #headerBg {
        background-image: url(https://www.polymer-project.org/0.5/components/core-scroll-header-panel/demos/images/bg9.jpg);
      }

      /* background for toolbar when it is condensed */
      core-scroll-header-panel::shadow #condensedHeaderBg {
        background-color: #f4b400;
      }

      core-toolbar {
        color: #f1f1f1;
        fill: #f1f1f1;
        background-color: transparent;
      }

      .title {
        -webkit-transform-origin: 0;
        transform-origin: 0;
        font-size: 40px;
      }

      .content {
        padding: 8px;
        background-color: #eee;
      }
      
      core-list {
        border: solid 1px red;
        margin: 10px;
        overflow: hidden;
      }
      
      div.foo, core-list {
        border: solid 1px blue;
        margin: 10px;
      }
      
      div.row {
        height: 80px;
        border: solid 1px green;
        margin: 3px;
        text-align: center;
      }
    </style>
  </head>

  <body unresolved fullbleed>
    <template is="auto-binding" id="page-template">
      <core-scroll-header-panel condenses fit>
        <core-toolbar class="tall">
          <core-icon-button icon="arrow-back"></core-icon-button>
          <div flex></div>
          <core-icon-button icon="search"></core-icon-button>
          <core-icon-button icon="more-vert"></core-icon-button>
          <div class="bottom indent title">Title</div>
        </core-toolbar>
        <div class="content" flex>
          <core-list data="{{data}}" flex>
            <template>
              <div class="row">
                List row: {{index}}, User data from model: {{model.name}}
              </div>
            </template>
          </core-list>
        </div>
      </core-scroll-header-panel>
    </template>
    
    <script>
      var t = document.querySelector('#page-template');
      t.data = [];
      for (i = 0; i < 30; i++) {
        t.data.push({name: 'Bob'});
      }
      
      t.addEventListener('template-bound', function() {
        // custom transformation: scale header's title
        var titleStyle = document.querySelector('.title').style;
        addEventListener('core-header-transform', function(e) {
          var d = e.detail;
          var m = d.height - d.condensedHeight;
          var scale = Math.max(0.75, (m - d.y) / (m / 0.25)  + 0.75);
          titleStyle.transform = titleStyle.webkitTransform =
              'scale(' + scale + ') translateZ(0)';
        });
      });
    </script>
  </body>
</html>

A few changes that I made to your code: instead of wrapping the <core-list> in a custom Polymer element definition, I just include it as part of the main page, but the page itself is wrapped in <template is="auto-binding">, giving you access to all the same template syntactic sugar you'd get from a custom element. The main other thing was to set overflow: hidden on the <core-list>, and rely on the scrollbar from the <core-scroll-header-panel> to scroll the list's content.

Upvotes: 3

Related Questions