systrace/catapult/third_party/polymer/components/paper-item/demo/index.html - platform/prebuilts/fullsdk-darwin/platform-tools - Git at Google

 <!doctype html>
 <!--
 @license
 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
 Code distributed by Google as part of the polymer project is also
 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 -->
 <html>
 <head>

   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
   <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">

   <title>paper-item demo</title>

   <script src="../../webcomponentsjs/webcomponents-lite.js"></script>

   <link rel="import" href="../../iron-icon/iron-icon.html">
   <link rel="import" href="../../iron-icons/iron-icons.html">
   <link rel="import" href="../../iron-icons/communication-icons.html">
   <link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
   <link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
   <link rel="import" href="../../paper-icon-button/paper-icon-button.html">
   <link rel="import" href="../paper-icon-item.html">
   <link rel="import" href="../paper-item.html">
   <link rel="import" href="../paper-item-body.html">
   <link rel="import" href="../../paper-styles/color.html">

   <style is="custom-style" include="demo-pages-shared-styles">
     div[role="listbox"] {
       border: 1px solid #e5e5e5;
     }
     .avatar {
       display: inline-block;
       box-sizing: border-box;
       width: 40px;
       height: 40px;
       border-radius: 50%;
       background: var(--paper-amber-500);
     }

     .blue {
       background-color: var(--paper-light-blue-300);
     }
   </style>
 </head>
 <body unresolved>
   <div class="vertical-section-container centered">
     <h3>Paper-items are simple list elements, ideally used in a paper-listbox or
     an element with <i>role="listbox"</i></h3>
     <demo-snippet>
       <template>
         <div role="listbox">
           <paper-item>Inbox</paper-item>
           <paper-item>Starred</paper-item>
           <paper-item>Sent mail</paper-item>
         </div>
       </template>
     </demo-snippet>

     <h3>They can be styled using custom properties</h3>
     <demo-snippet>
       <template>
         <style is="custom-style">
           paper-item.fancy {
             --paper-item-focused: {
               background: var(--paper-amber-500);
               font-weight: bold;
             };
             --paper-item-focused-before: {
               opacity: 0;
             };
           }
         </style>
         <div role="listbox">
           <paper-item class="fancy">Inbox</paper-item>
           <paper-item class="fancy">Starred</paper-item>
           <paper-item class="fancy">Sent mail</paper-item>
         </div>
       </template>
     </demo-snippet>

     <h3>To add a leading element, use a paper-icon-item with an <i>item-icon</i> attribute. This
     leading image can be an iron-icon, or any other regular element.</h3>
     <demo-snippet>
       <template>
         <div role="listbox">
           <paper-icon-item>
             <iron-icon icon="inbox" item-icon></iron-icon>
             Inbox
           </paper-icon-item>
           <paper-icon-item>
             <iron-icon icon="star" item-icon></iron-icon>
             Starred
           </paper-icon-item>
           <paper-icon-item>
             <div class="avatar blue" item-icon></div>
             Alphonso Engelking
           </paper-icon-item>
           <paper-icon-item>
             <div class="avatar" item-icon></div>
             Angela Decker
           </paper-icon-item>
         </div>
       </template>
     </demo-snippet>

     <h3>For two-line items, use a paper-item-body inside a paper-item or paper-icon-item</h3>
     <demo-snippet>
       <template>
         <div role="listbox">
           <paper-item>
             <paper-item-body two-line>
               <div>Profile Photo</div>
               <div secondary>Change your Google+ profile photo</div>
             </paper-item-body>
           </paper-item>
           <paper-icon-item>
             <iron-icon icon="communication:phone" item-icon>
             </iron-icon>
             <paper-item-body two-line>
               <div>(650) 555-1234</div>
               <div secondary>Mobile</div>
             </paper-item-body>
           </paper-icon-item>
           <paper-icon-item>
             <div class="avatar blue" item-icon></div>
             <paper-item-body two-line>
               <div>Alphonso Engelking</div>
               <div secondary>Change photo</div>
             </paper-item-body>
           </paper-icon-item>
         </div>
       </template>
     </demo-snippet>

     <h3>Complex layouts are usually a combination of all these elements</h3>
     <demo-snippet>
       <template>
         <div role="listbox">
           <paper-icon-item>
             <div class="avatar blue" item-icon></div>
             <paper-item-body two-line>
               <div>Photos</div>
               <div secondary>Jan 9, 2014</div>
             </paper-item-body>
             <paper-icon-button icon="star" alt="favourite this!">
             </paper-icon-button>
           </paper-icon-item>
           <paper-icon-item>
             <div class="avatar" item-icon></div>
             <paper-item-body two-line>
               <div>Recipes</div>
               <div secondary>Jan 17, 2014</div>
             </paper-item-body>
             <paper-icon-button icon="star" alt="favourite this!">
             </paper-icon-button>
           </paper-icon-item>
         </div>
       </template>
     </demo-snippet>

     <h3>Paper-items can be used as links</h3>
     <demo-snippet>
       <template>
         <style is="custom-style">
           .paper-item-link {
             color: inherit;
             text-decoration: none;
           }
         </style>
         <div role="listbox">
           <a class="paper-item-link" href="#inbox" tabindex="-1">
             <paper-item>Inbox</paper-item>
           </a>
           <a class="paper-item-link" href="#starred" tabindex="-1">
             <paper-item>Starred</paper-item>
           </a>
           <a class="paper-item-link" href="#sent" tabindex="-1">
             <paper-item>Sent mail</paper-item>
           </a>
         </div>
       </template>
     </demo-snippet>
   </div>
 </body>
 </html>
	<!doctype html>
	<!--
	@license
	Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
	This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
	The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
	The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
	Code distributed by Google as part of the polymer project is also
	subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
	-->
	<html>
	<head>

	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">

	<title>paper-item demo</title>

	<script src="../../webcomponentsjs/webcomponents-lite.js"></script>

	<link rel="import" href="../../iron-icon/iron-icon.html">
	<link rel="import" href="../../iron-icons/iron-icons.html">
	<link rel="import" href="../../iron-icons/communication-icons.html">
	<link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
	<link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
	<link rel="import" href="../../paper-icon-button/paper-icon-button.html">
	<link rel="import" href="../paper-icon-item.html">
	<link rel="import" href="../paper-item.html">
	<link rel="import" href="../paper-item-body.html">
	<link rel="import" href="../../paper-styles/color.html">

	<style is="custom-style" include="demo-pages-shared-styles">
	div[role="listbox"] {
	border: 1px solid #e5e5e5;
	}
	.avatar {
	display: inline-block;
	box-sizing: border-box;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--paper-amber-500);
	}

	.blue {
	background-color: var(--paper-light-blue-300);
	}
	</style>
	</head>
	<body unresolved>
	<div class="vertical-section-container centered">
	<h3>Paper-items are simple list elements, ideally used in a paper-listbox or
	an element with <i>role="listbox"</i></h3>
	<demo-snippet>
	<template>
	<div role="listbox">
	<paper-item>Inbox</paper-item>
	<paper-item>Starred</paper-item>
	<paper-item>Sent mail</paper-item>
	</div>
	</template>
	</demo-snippet>

	<h3>They can be styled using custom properties</h3>
	<demo-snippet>
	<template>
	<style is="custom-style">
	paper-item.fancy {
	--paper-item-focused: {
	background: var(--paper-amber-500);
	font-weight: bold;
	};
	--paper-item-focused-before: {
	opacity: 0;
	};
	}
	</style>
	<div role="listbox">
	<paper-item class="fancy">Inbox</paper-item>
	<paper-item class="fancy">Starred</paper-item>
	<paper-item class="fancy">Sent mail</paper-item>
	</div>
	</template>
	</demo-snippet>

	<h3>To add a leading element, use a paper-icon-item with an <i>item-icon</i> attribute. This
	leading image can be an iron-icon, or any other regular element.</h3>
	<demo-snippet>
	<template>
	<div role="listbox">
	<paper-icon-item>
	<iron-icon icon="inbox" item-icon></iron-icon>
	Inbox
	</paper-icon-item>
	<paper-icon-item>
	<iron-icon icon="star" item-icon></iron-icon>
	Starred
	</paper-icon-item>
	<paper-icon-item>
	<div class="avatar blue" item-icon></div>
	Alphonso Engelking
	</paper-icon-item>
	<paper-icon-item>
	<div class="avatar" item-icon></div>
	Angela Decker
	</paper-icon-item>
	</div>
	</template>
	</demo-snippet>

	<h3>For two-line items, use a paper-item-body inside a paper-item or paper-icon-item</h3>
	<demo-snippet>
	<template>
	<div role="listbox">
	<paper-item>
	<paper-item-body two-line>
	<div>Profile Photo</div>
	<div secondary>Change your Google+ profile photo</div>
	</paper-item-body>
	</paper-item>
	<paper-icon-item>
	<iron-icon icon="communication:phone" item-icon>
	</iron-icon>
	<paper-item-body two-line>
	<div>(650) 555-1234</div>
	<div secondary>Mobile</div>
	</paper-item-body>
	</paper-icon-item>
	<paper-icon-item>
	<div class="avatar blue" item-icon></div>
	<paper-item-body two-line>
	<div>Alphonso Engelking</div>
	<div secondary>Change photo</div>
	</paper-item-body>
	</paper-icon-item>
	</div>
	</template>
	</demo-snippet>

	<h3>Complex layouts are usually a combination of all these elements</h3>
	<demo-snippet>
	<template>
	<div role="listbox">
	<paper-icon-item>
	<div class="avatar blue" item-icon></div>
	<paper-item-body two-line>
	<div>Photos</div>
	<div secondary>Jan 9, 2014</div>
	</paper-item-body>
	<paper-icon-button icon="star" alt="favourite this!">
	</paper-icon-button>
	</paper-icon-item>
	<paper-icon-item>
	<div class="avatar" item-icon></div>
	<paper-item-body two-line>
	<div>Recipes</div>
	<div secondary>Jan 17, 2014</div>
	</paper-item-body>
	<paper-icon-button icon="star" alt="favourite this!">
	</paper-icon-button>
	</paper-icon-item>
	</div>
	</template>
	</demo-snippet>

	<h3>Paper-items can be used as links</h3>
	<demo-snippet>
	<template>
	<style is="custom-style">
	.paper-item-link {
	color: inherit;
	text-decoration: none;
	}
	</style>
	<div role="listbox">
	<a class="paper-item-link" href="#inbox" tabindex="-1">
	<paper-item>Inbox</paper-item>
	</a>
	<a class="paper-item-link" href="#starred" tabindex="-1">
	<paper-item>Starred</paper-item>
	</a>
	<a class="paper-item-link" href="#sent" tabindex="-1">
	<paper-item>Sent mail</paper-item>
	</a>
	</div>
	</template>
	</demo-snippet>
	</div>
	</body>
	</html>