1 <!doctype html> 2 <!-- 3 @license 4 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 5 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt 6 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt 7 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt 8 Code distributed by Google as part of the polymer project is also 9 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt 10 --> 11 <html> 12 <head> 13 14 <meta charset="utf-8"> 15 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 16 <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes"> 17 18 <title>paper-item demo</title> 19 20 <script src="../../webcomponentsjs/webcomponents-lite.js"></script> 21 22 <link rel="import" href="../../iron-icon/iron-icon.html"> 23 <link rel="import" href="../../iron-icons/iron-icons.html"> 24 <link rel="import" href="../../iron-icons/communication-icons.html"> 25 <link rel="import" href="../../iron-demo-helpers/demo-snippet.html"> 26 <link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html"> 27 <link rel="import" href="../../paper-icon-button/paper-icon-button.html"> 28 <link rel="import" href="../paper-icon-item.html"> 29 <link rel="import" href="../paper-item.html"> 30 <link rel="import" href="../paper-item-body.html"> 31 <link rel="import" href="../../paper-styles/color.html"> 32 33 <style is="custom-style" include="demo-pages-shared-styles"> 34 div[role="listbox"] { 35 border: 1px solid #e5e5e5; 36 } 37 .avatar { 38 display: inline-block; 39 box-sizing: border-box; 40 width: 40px; 41 height: 40px; 42 border-radius: 50%; 43 background: var(--paper-amber-500); 44 } 45 46 .blue { 47 background-color: var(--paper-light-blue-300); 48 } 49 </style> 50 </head> 51 <body unresolved> 52 <div class="vertical-section-container centered"> 53 <h3>Paper-items are simple list elements, ideally used in a paper-listbox or 54 an element with <i>role="listbox"</i></h3> 55 <demo-snippet> 56 <template> 57 <div role="listbox"> 58 <paper-item>Inbox</paper-item> 59 <paper-item>Starred</paper-item> 60 <paper-item>Sent mail</paper-item> 61 </div> 62 </template> 63 </demo-snippet> 64 65 <h3>They can be styled using custom properties</h3> 66 <demo-snippet> 67 <template> 68 <style is="custom-style"> 69 paper-item.fancy { 70 --paper-item-focused: { 71 background: var(--paper-amber-500); 72 font-weight: bold; 73 }; 74 --paper-item-focused-before: { 75 opacity: 0; 76 }; 77 } 78 </style> 79 <div role="listbox"> 80 <paper-item class="fancy">Inbox</paper-item> 81 <paper-item class="fancy">Starred</paper-item> 82 <paper-item class="fancy">Sent mail</paper-item> 83 </div> 84 </template> 85 </demo-snippet> 86 87 <h3>To add a leading element, use a paper-icon-item with an <i>item-icon</i> attribute. This 88 leading image can be an iron-icon, or any other regular element.</h3> 89 <demo-snippet> 90 <template> 91 <div role="listbox"> 92 <paper-icon-item> 93 <iron-icon icon="inbox" item-icon></iron-icon> 94 Inbox 95 </paper-icon-item> 96 <paper-icon-item> 97 <iron-icon icon="star" item-icon></iron-icon> 98 Starred 99 </paper-icon-item> 100 <paper-icon-item> 101 <div class="avatar blue" item-icon></div> 102 Alphonso Engelking 103 </paper-icon-item> 104 <paper-icon-item> 105 <div class="avatar" item-icon></div> 106 Angela Decker 107 </paper-icon-item> 108 </div> 109 </template> 110 </demo-snippet> 111 112 <h3>For two-line items, use a paper-icon-body inside a paper-item or paper-icon-item</h3> 113 <demo-snippet> 114 <template> 115 <div role="listbox"> 116 <paper-item> 117 <paper-item-body two-line> 118 <div>Profile Photo</div> 119 <div secondary>Change your Google+ profile photo</div> 120 </paper-item-body> 121 </paper-item> 122 <paper-icon-item> 123 <iron-icon icon="communication:phone" item-icon> 124 </iron-icon> 125 <paper-item-body two-line> 126 <div>(650) 555-1234</div> 127 <div secondary>Mobile</div> 128 </paper-item-body> 129 </paper-icon-item> 130 <paper-icon-item> 131 <div class="avatar blue" item-icon></div> 132 <paper-item-body two-line> 133 <div>Alphonso Engelking</div> 134 <div secondary>Change photo</div> 135 </paper-item-body> 136 </paper-icon-item> 137 </div> 138 </template> 139 </demo-snippet> 140 141 <h3>Complex layouts are usually a combination of all these elements</h3> 142 <demo-snippet> 143 <template> 144 <div role="listbox"> 145 <paper-icon-item> 146 <div class="avatar blue" item-icon></div> 147 <paper-item-body two-line> 148 <div>Photos</div> 149 <div secondary>Jan 9, 2014</div> 150 </paper-item-body> 151 <paper-icon-button icon="star" alt="favourite this!"> 152 </paper-icon-button> 153 </paper-icon-item> 154 <paper-icon-item> 155 <div class="avatar" item-icon></div> 156 <paper-item-body two-line> 157 <div>Recipes</div> 158 <div secondary>Jan 17, 2014</div> 159 </paper-item-body> 160 <paper-icon-button icon="star" alt="favourite this!"> 161 </paper-icon-button> 162 </paper-icon-item> 163 </div> 164 </template> 165 </demo-snippet> 166 167 <h3>Paper-items can be used as links</h3> 168 <demo-snippet> 169 <template> 170 <style is="custom-style"> 171 .paper-item-link { 172 color: inherit; 173 text-decoration: none; 174 } 175 </style> 176 <div role="listbox"> 177 <a class="paper-item-link" href="#inbox" tabindex="-1"> 178 <paper-item>Inbox</paper-item> 179 </a> 180 <a class="paper-item-link" href="#starred" tabindex="-1"> 181 <paper-item>Starred</paper-item> 182 </a> 183 <a class="paper-item-link" href="#sent" tabindex="-1"> 184 <paper-item>Sent mail</paper-item> 185 </a> 186 </div> 187 </template> 188 </demo-snippet> 189 </div> 190 </body> 191 </html> 192
