src/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
  14   <script src="../platform/platform.js"></script>
  15
  16   <link rel="import" href="core-splitter.html">
  17
  18   <style>
  19
  20     body {
  21       -webkit-user-select: none;
  22       -moz-user-select: none;
  23       -webkit-tap-highlight-color: rgba(0,0,0,0);
  24       margin: 24px;
  25     }
  26
  27     .container {
  28       width: 400px;
  29       height: 200px;
  30       border: 4px solid #aaa;
  31     }
  32
  33     #box1, #box3, #box5, #box6 {
  34       width: 100px;
  35     }
  36
  37     #box2, #box4 {
  38       height: 40px;
  39     }
  40
  41   </style>
  42
  43 </head>
  44 <body unresolved>
  45   <div class="container" horizontal layout>
  46     <div>left</div>
  47     <core-splitter direction="left"  minSize="128"></core-splitter>
  48     <div flex>right</div>
  49   </div>
  50
  51   <br>
  52
  53   <div class="container" vertical layout>
  54     <div id="box2">top</div>
  55     <core-splitter direction="up"></core-splitter>
  56     <div flex>bottom</div>
  57   </div>
  58
  59   <br>
  60
  61   <div class="container" horizontal layout>
  62     <div id="box3">1</div>
  63     <core-splitter direction="left"></core-splitter>
  64     <div flex vertical layout>
  65       <div id="box4">2</div>
  66       <core-splitter direction="up"></core-splitter>
  67       <div flex>3</div>
  68     </div>
  69   </div>
  70
  71   <br>
  72
  73   <div class="container" horizontal layout>
  74     <div id="box5">left</div>
  75     <core-splitter direction="left"></core-splitter>
  76     <div flex>center</div>
  77     <core-splitter direction="right"></core-splitter>
  78     <div id="box6">right</div>
  79   </div>
  80
  81 </body>
  82 </html>