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
  10 <!--
  11 `core-splitter` provides a split bar and dragging on the split bar
  12 will resize the sibling element.  Use its `direction` property to indicate
  13 which sibling element to be resized and the orientation.  Usually you would want
  14 to use `core-splitter` along with flex layout so that the other sibling
  15 element can be _flexible_.
  16
  17 Example:
  18
  19     <div horizontal layout>
  20       <div>left</div>
  21       <core-splitter direction="left"></core-splitter>
  22       <div flex>right</div>
  23     </div>
  24
  25 In the above example, dragging the splitter will resize the _left_ element.  And
  26 since the parent container is a flexbox and the _right_ element has
  27 `flex`, the _right_ element will be auto-resized.
  28
  29 For horizontal splitter set `direction` to "up" or "down".
  30
  31 Example:
  32
  33     <div vertical layout>
  34       <div>top</div>
  35       <core-splitter direction="up"></core-splitter>
  36       <div flex>bottom</div>
  37     </div>
  38
  39 @group Polymer Core Elements
  40 @element core-splitter
  41 @homepage github.io
  42 -->
  43
  44 <link rel="import" href="../polymer/polymer.html">
  45
  46 <polymer-element name="core-splitter" attributes="direction locked minSize allowOverflow" on-trackstart="{{trackStart}}" on-track="{{track}}" on-down="{{preventSelection}}" assetpath="">
  47
  48 <template>
  49
  50   <link rel="stylesheet" href="core-splitter.css">
  51
  52 </template>
  53
  54 </polymer-element><script src="core-splitter-extracted.js"></script>