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

   1 <!--
   2 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
   3 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
   4 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
   5 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
   6 Code distributed by Google as part of the polymer project is also
   7 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
   8 --><!--
   9 `core-splitter` provides a split bar and dragging on the split bar
  10 will resize the sibling element.  Use its `direction` property to indicate
  11 which sibling element to be resized and the orientation.  Usually you would want
  12 to use `core-splitter` along with flex layout so that the other sibling
  13 element can be _flexible_.
  14
  15 Example:
  16
  17     <div horizontal layout>
  18       <div>left</div>
  19       <core-splitter direction="left"></core-splitter>
  20       <div flex>right</div>
  21     </div>
  22
  23 In the above example, dragging the splitter will resize the _left_ element.  And
  24 since the parent container is a flexbox and the _right_ element has
  25 `flex`, the _right_ element will be auto-resized.
  26
  27 For horizontal splitter set `direction` to `up` or `down`.
  28
  29 Example:
  30
  31     <div vertical layout>
  32       <div>top</div>
  33       <core-splitter direction="up"></core-splitter>
  34       <div flex>bottom</div>
  35     </div>
  36
  37 @group Polymer Core Elements
  38 @element core-splitter
  39 @homepage github.io
  40 --><html><head><link rel="import" href="../polymer/polymer.html">
  41 <link rel="import" href="../core-resizable/core-resizable.html">
  42
  43 </head><body><polymer-element name="core-splitter" attributes="direction locked minSize allowOverflow" on-trackstart="{{trackStart}}" on-track="{{track}}" on-down="{{preventSelection}}" assetpath="">
  44
  45 <template>
  46
  47   <link rel="stylesheet" href="core-splitter.css">
  48
  49 </template>
  50
  51 </polymer-element>
  52 <script charset="utf-8" src="core-splitter-extracted.js"></script></body></html>