polymer_2.0.2/bower_components/iron-collapse/demo/index.html - infra/third_party/npm_modules - 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>

   <title>iron-collapse demo</title>

   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">

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

   <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="simple-expand-collapse.html">

   <custom-style><style is="custom-style" include="demo-pages-shared-styles">

     demo-snippet {
       --demo-snippet-code: {
         max-height: 250px;
       }
     }

     simple-expand-collapse {
       margin: 10px;
     }

     .content {
       padding: 15px;
     }
   </style></custom-style>

 </head>

 <body unresolved class="centered">

   <h4>Basic</h4>
   <demo-snippet>
     <template>
       <simple-expand-collapse>
         <div class="content">
           Lorem ipsum dolor sit amet, per in nusquam nominavi periculis, sit elit oportere ea, id minim maiestatis incorrupte duo. Dolorum verterem ad ius, his et nullam verterem. Eu alia debet usu, an doming tritani est. Vix ad ponderum petentium suavitate, eum
           eu tempor populo, graece sententiae constituam vim ex. Cu torquatos reprimique neglegentur nec, voluptua periculis has ut, at eos discere deleniti sensibus. Lorem ipsum dolor sit amet, per in nusquam nominavi periculis, sit elit oportere ea,
           id minim maiestatis incorrupte duo. Dolorum verterem ad ius, his et nullam verterem. Eu alia debet usu, an doming tritani est. Vix ad ponderum petentium suavitate, eum eu tempor populo, graece sententiae constituam vim ex. Cu torquatos reprimique
           neglegentur nec, voluptua periculis has ut, at eos discere deleniti sensibus.
         </div>
       </simple-expand-collapse>
     </template>
   </demo-snippet>

   <h4>Nested, horizontal expand</h4>
   <demo-snippet>
     <template>
       <style>
         simple-expand-collapse[horizontal] .content {
           max-height: 250px;
           overflow: auto;
         }
       </style>

       <simple-expand-collapse>
         <div class="content">
           <div>
             Lorem ipsum dolor sit amet, per in nusquam nominavi periculis, sit elit oportere ea, id minim maiestatis incorrupte duo. Dolorum verterem ad ius, his et nullam verterem. Eu alia debet usu, an doming tritani est. Vix ad ponderum petentium suavitate, eum
             eu tempor populo, graece sententiae constituam vim ex. Cu torquatos reprimique neglegentur nec, voluptua periculis has ut, at eos discere deleniti sensibus. Lorem ipsum dolor sit amet, per in nusquam nominavi periculis, sit elit oportere ea,
             id minim maiestatis incorrupte duo. Dolorum verterem ad ius, his et nullam verterem. Eu alia debet usu, an doming tritani est. Vix ad ponderum petentium suavitate, eum eu tempor populo, graece sententiae constituam vim ex. Cu torquatos reprimique
             neglegentur nec, voluptua periculis has ut, at eos discere deleniti sensibus.
           </div>
           <simple-expand-collapse horizontal>
             <div class="content">
               Lorem ipsum dolor sit amet, per in nusquam nominavi periculis, sit elit oportere ea, id minim maiestatis incorrupte duo. Dolorum verterem ad ius, his et nullam verterem. Eu alia debet usu, an doming tritani est. Vix ad ponderum petentium suavitate, eum
               eu tempor populo, graece sententiae constituam vim ex. Cu torquatos reprimique neglegentur nec, voluptua periculis has ut, at eos discere deleniti sensibus. Lorem ipsum dolor sit amet, per in nusquam nominavi periculis, sit elit oportere
               ea, id minim maiestatis incorrupte duo. Dolorum verterem ad ius, his et nullam verterem. Eu alia debet usu, an doming tritani est. Vix ad ponderum petentium suavitate, eum eu tempor populo, graece sententiae constituam vim ex. Cu torquatos
               reprimique neglegentur nec, voluptua periculis has ut, at eos discere deleniti sensibus.
             </div>
           </simple-expand-collapse>
         </div>
       </simple-expand-collapse>
     </template>
   </demo-snippet>

   <h4>No animation</h4>
   <demo-snippet>
     <template>
       <simple-expand-collapse no-animation>
         <div class="content">
           Lorem ipsum dolor sit amet, per in nusquam nominavi periculis, sit elit oportere ea, id minim maiestatis incorrupte duo. Dolorum verterem ad ius, his et nullam verterem. Eu alia debet usu, an doming tritani est. Vix ad ponderum petentium suavitate, eum
           eu tempor populo, graece sententiae constituam vim ex. Cu torquatos reprimique neglegentur nec, voluptua periculis has ut, at eos discere deleniti sensibus. Lorem ipsum dolor sit amet, per in nusquam nominavi periculis, sit elit oportere ea,
           id minim maiestatis incorrupte duo. Dolorum verterem ad ius, his et nullam verterem. Eu alia debet usu, an doming tritani est. Vix ad ponderum petentium suavitate, eum eu tempor populo, graece sententiae constituam vim ex. Cu torquatos reprimique
           neglegentur nec, voluptua periculis has ut, at eos discere deleniti sensibus.
         </div>
       </simple-expand-collapse>
     </template>
   </demo-snippet>
 </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>

	<title>iron-collapse demo</title>

	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

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

	<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="simple-expand-collapse.html">

	<custom-style><style is="custom-style" include="demo-pages-shared-styles">

	demo-snippet {
	--demo-snippet-code: {
	max-height: 250px;
	}
	}

	simple-expand-collapse {
	margin: 10px;
	}

	.content {
	padding: 15px;
	}
	</style></custom-style>

	</head>

	<body unresolved class="centered">

	<h4>Basic</h4>
	<demo-snippet>
	<template>
	<simple-expand-collapse>
	<div class="content">
	Lorem ipsum dolor sit amet, per in nusquam nominavi periculis, sit elit oportere ea, id minim maiestatis incorrupte duo. Dolorum verterem ad ius, his et nullam verterem. Eu alia debet usu, an doming tritani est. Vix ad ponderum petentium suavitate, eum
	eu tempor populo, graece sententiae constituam vim ex. Cu torquatos reprimique neglegentur nec, voluptua periculis has ut, at eos discere deleniti sensibus. Lorem ipsum dolor sit amet, per in nusquam nominavi periculis, sit elit oportere ea,
	id minim maiestatis incorrupte duo. Dolorum verterem ad ius, his et nullam verterem. Eu alia debet usu, an doming tritani est. Vix ad ponderum petentium suavitate, eum eu tempor populo, graece sententiae constituam vim ex. Cu torquatos reprimique
	neglegentur nec, voluptua periculis has ut, at eos discere deleniti sensibus.
	</div>
	</simple-expand-collapse>
	</template>
	</demo-snippet>

	<h4>Nested, horizontal expand</h4>
	<demo-snippet>
	<template>
	<style>
	simple-expand-collapse[horizontal] .content {
	max-height: 250px;
	overflow: auto;
	}
	</style>

	<simple-expand-collapse>
	<div class="content">
	<div>
	Lorem ipsum dolor sit amet, per in nusquam nominavi periculis, sit elit oportere ea, id minim maiestatis incorrupte duo. Dolorum verterem ad ius, his et nullam verterem. Eu alia debet usu, an doming tritani est. Vix ad ponderum petentium suavitate, eum
	eu tempor populo, graece sententiae constituam vim ex. Cu torquatos reprimique neglegentur nec, voluptua periculis has ut, at eos discere deleniti sensibus. Lorem ipsum dolor sit amet, per in nusquam nominavi periculis, sit elit oportere ea,
	id minim maiestatis incorrupte duo. Dolorum verterem ad ius, his et nullam verterem. Eu alia debet usu, an doming tritani est. Vix ad ponderum petentium suavitate, eum eu tempor populo, graece sententiae constituam vim ex. Cu torquatos reprimique
	neglegentur nec, voluptua periculis has ut, at eos discere deleniti sensibus.
	</div>
	<simple-expand-collapse horizontal>
	<div class="content">
	Lorem ipsum dolor sit amet, per in nusquam nominavi periculis, sit elit oportere ea, id minim maiestatis incorrupte duo. Dolorum verterem ad ius, his et nullam verterem. Eu alia debet usu, an doming tritani est. Vix ad ponderum petentium suavitate, eum
	eu tempor populo, graece sententiae constituam vim ex. Cu torquatos reprimique neglegentur nec, voluptua periculis has ut, at eos discere deleniti sensibus. Lorem ipsum dolor sit amet, per in nusquam nominavi periculis, sit elit oportere
	ea, id minim maiestatis incorrupte duo. Dolorum verterem ad ius, his et nullam verterem. Eu alia debet usu, an doming tritani est. Vix ad ponderum petentium suavitate, eum eu tempor populo, graece sententiae constituam vim ex. Cu torquatos
	reprimique neglegentur nec, voluptua periculis has ut, at eos discere deleniti sensibus.
	</div>
	</simple-expand-collapse>
	</div>
	</simple-expand-collapse>
	</template>
	</demo-snippet>

	<h4>No animation</h4>
	<demo-snippet>
	<template>
	<simple-expand-collapse no-animation>
	<div class="content">
	Lorem ipsum dolor sit amet, per in nusquam nominavi periculis, sit elit oportere ea, id minim maiestatis incorrupte duo. Dolorum verterem ad ius, his et nullam verterem. Eu alia debet usu, an doming tritani est. Vix ad ponderum petentium suavitate, eum
	eu tempor populo, graece sententiae constituam vim ex. Cu torquatos reprimique neglegentur nec, voluptua periculis has ut, at eos discere deleniti sensibus. Lorem ipsum dolor sit amet, per in nusquam nominavi periculis, sit elit oportere ea,
	id minim maiestatis incorrupte duo. Dolorum verterem ad ius, his et nullam verterem. Eu alia debet usu, an doming tritani est. Vix ad ponderum petentium suavitate, eum eu tempor populo, graece sententiae constituam vim ex. Cu torquatos reprimique
	neglegentur nec, voluptua periculis has ut, at eos discere deleniti sensibus.
	</div>
	</simple-expand-collapse>
	</template>
	</demo-snippet>
	</body>

	</html>