SGH / COMPONENTS

Blame view

bower_components/paper-drawer-panel/README.md 1.95 KB
Edit Raw Normal View History
c5169e0e   Renato De Donato   a new hope 
1
 
  # paper-drawer-panel
73bcce88   luigser   COMPONENTS 
2
3
4
5
6
7
8
9
10
11
12
13
14
 
  
  `paper-drawer-panel` contains a drawer panel and a main panel.  The drawer
  and the main panel are side-by-side with drawer on the left.  When the browser
  window size is smaller than the `responsiveWidth`, `paper-drawer-panel`
  changes to narrow layout.  In narrow layout, the drawer will be stacked on top
  of the main panel.  The drawer will slide in/out to hide/reveal the main
  panel.
  
  Use the attribute `drawer` to indicate that the element is the drawer panel and
  `main` to indicate that the element is the main panel.
  
  Example:
c5169e0e   Renato De Donato   a new hope 
15
16
17
18
19
20
 
  ```html
  <paper-drawer-panel>
    <div drawer> Drawer panel... </div>
    <div main> Main panel... </div>
  </paper-drawer-panel>
  ```
73bcce88   luigser   COMPONENTS 
21
22
23
24
25
26
 
  
  The drawer and the main panels are not scrollable.  You can set CSS overflow
  property on the elements to make them scrollable or use `paper-header-panel`.
  
  Example:
c5169e0e   Renato De Donato   a new hope 
27
28
29
30
31
32
33
34
35
36
37
38
 
  ```html
  <paper-drawer-panel>
    <paper-header-panel drawer>
      <paper-toolbar></paper-toolbar>
      <div> Drawer content... </div>
    </paper-header-panel>
    <paper-header-panel main>
      <paper-toolbar></paper-toolbar>
      <div> Main content... </div>
    </paper-header-panel>
  </paper-drawer-panel>
  ```
73bcce88   luigser   COMPONENTS 
39
40
41
42
43
44
45
 
  
  An element that should toggle the drawer will automatically do so if it's
  given the `paper-drawer-toggle` attribute.  Also this element will automatically
  be hidden in wide layout.
  
  Example:
c5169e0e   Renato De Donato   a new hope 
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
 
  ```html
  <paper-drawer-panel>
    <paper-header-panel drawer>
      <paper-toolbar>
        <div>Application</div>
      </paper-toolbar>
      <div> Drawer content... </div>
    </paper-header-panel>
    <paper-header-panel main>
      <paper-toolbar>
        <paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button>
        <div>Title</div>
      </paper-toolbar>
      <div> Main content... </div>
    </paper-header-panel>
  </paper-drawer-panel>
  ```
73bcce88   luigser   COMPONENTS 
63
64
65
 
  
  To position the drawer to the right, add `right-drawer` attribute.
c5169e0e   Renato De Donato   a new hope 
66
67
68
69
70
71
 
  ```html
  <paper-drawer-panel right-drawer>
    <div drawer> Drawer panel... </div>
    <div main> Main panel... </div>
  </paper-drawer-panel>
  ```