third_party/polymer/components-chromium/core-splitter/demo.html

   1 <!doctype html>
   2 <!--
   3 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
   4 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
   5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
   6 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
   7 Code distributed by Google as part of the polymer project is also
   8 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
   9 -->
  10 <html>
  11 <head>
  12   <title>core-splitter</title>
  13   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
  14
  15   <script src="../webcomponentsjs/webcomponents.js"></script>
  16
  17   <link rel="import" href="core-splitter.html">
  18
  19   <style>
  20
  21     .container {
  22       height: 240px;
  23       border: 4px solid #aaa;
  24     }
  25
  26     #box1, #box3, #box5, #box6 {
  27       width: 100px;
  28     }
  29
  30     #box2, #box4 {
  31       height: 40px;
  32     }
  33
  34   </style>
  35
  36 </head>
  37 <body unresolved>
  38
  39   <div class="container" horizontal layout>
  40     <div>left (min: 128px)</div>
  41     <core-splitter direction="left" minSize="128px"></core-splitter>
  42     <div flex>right</div>
  43   </div>
  44
  45   <br>
  46
  47   <div class="container" vertical layout>
  48     <div id="box2">top</div>
  49     <core-splitter direction="up"></core-splitter>
  50     <div flex>bottom</div>
  51   </div>
  52
  53   <br>
  54
  55   <div class="container" horizontal layout>
  56     <div id="box3">1</div>
  57     <core-splitter direction="left"></core-splitter>
  58     <div flex vertical layout>
  59       <div id="box4">2</div>
  60       <core-splitter direction="up"></core-splitter>
  61       <div flex>3</div>
  62     </div>
  63   </div>
  64
  65   <br>
  66
  67   <div class="container" horizontal layout>
  68     <div id="box5">left</div>
  69     <core-splitter direction="left"></core-splitter>
  70     <div flex>center</div>
  71     <core-splitter direction="right"></core-splitter>
  72     <div id="box6">right</div>
  73   </div>
  74
  75 </body>
  76 </html>