SGH / COMPONENTS

Blame view

bower_components/paper-scroll-header-panel/README.md 1.68 KB
Edit Raw Normal View History
c5169e0e   Renato De Donato   a new hope 
1
2
 
  paper-scroll-header-panel
  ========================
73bcce88   luigser   COMPONENTS 
3
c5169e0e   Renato De Donato   a new hope 
4
 
  `paper-scroll-header-panel` contains a header section and a content section. The header is initially on the top part of the view but it scrolls away with the rest of the scrollable content. Upon scrolling slightly up at any point, the header scrolls back into view. This saves screen space and allows users to access important controls by easily moving them back to the view.
73bcce88   luigser   COMPONENTS 
5
c5169e0e   Renato De Donato   a new hope 
6
 
  Important: The `paper-scroll-header-panel` will not display if its parent does not have a height. Using layout classes, you can easily make the `paper-scroll-header-panel` fill the screen
73bcce88   luigser   COMPONENTS 
7
8
9
10
11
 
  
  ```html
  <body class="fullbleed layout vertical">
    <paper-scroll-header-panel class="flex">
      <paper-toolbar>
c5169e0e   Renato De Donato   a new hope 
12
 
        Hello World!
73bcce88   luigser   COMPONENTS 
13
14
15
16
 
      </paper-toolbar>
    </paper-scroll-header-panel>
  </body>
  ```
c5169e0e   Renato De Donato   a new hope 
17
 
  or, if you would prefer to do it in CSS, just give html, body, and `paper-scroll-header-panel` a height of 100%:
73bcce88   luigser   COMPONENTS 
18
19
20
21
22
23
24
25
26
 
  ```css
  html, body {
    height: 100%;
    margin: 0;
  }
  paper-scroll-header-panel {
    height: 100%;
  }
  ```
c5169e0e   Renato De Donato   a new hope 
27
 
  `paper-scroll-header-panel` works well with `paper-toolbar` but can use any element that represents a header by adding a `paper-header` class to it.
73bcce88   luigser   COMPONENTS 
28
29
30
31
32
33
34
35
 
  
  ```html
  <paper-scroll-header-panel>
    <paper-toolbar>Header</paper-toolbar>
    <div>Content goes here...</div>
  </paper-scroll-header-panel>
  ```
c5169e0e   Renato De Donato   a new hope 
36
 
  ### Styling scroll-header-panel:
73bcce88   luigser   COMPONENTS 
37
c5169e0e   Renato De Donato   a new hope 
38
 
  To change background for toolbar when it is at its full size:
73bcce88   luigser   COMPONENTS 
39
c5169e0e   Renato De Donato   a new hope 
40
41
42
43
44
45
46
 
  ```css
  paper-scroll-header-panel {
    --paper-scroll-header-panel-full-header: {
      background-color: red;
    };
  }
  ```
73bcce88   luigser   COMPONENTS 
47
c5169e0e   Renato De Donato   a new hope 
48
 
  To change the background for toolbar when it is condensed:
73bcce88   luigser   COMPONENTS 
49
c5169e0e   Renato De Donato   a new hope 
50
51
52
53
54
55
56
 
  ```css
  paper-scroll-header-panel {
    --paper-scroll-header-panel-condensed-header: {
      background-color: #f4b400;
    };
  }
  ```