Home | History | Annotate | Download | only in paper-tabs 
      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 `paper-tabs` is a `core-selector` styled to look like tabs. Tabs make it easy to 
     12 explore and switch between different views or functional aspects of an app, or 
     13 to browse categorized data sets.
     14 
     15 Use `selected` property to get or set the selected tab.
     16 
     17 Example:
     18 
     19     <paper-tabs selected="0">
     20       <paper-tab>TAB 1</paper-tab>
     21       <paper-tab>TAB 2</paper-tab>
     22       <paper-tab>TAB 3</paper-tab>
     23     </paper-tabs>
     24 
     25 See <a href="#paper-tab">paper-tab</a> for more information about 
     26 `paper-tab`.
     27 
     28 Styling tabs:
     29 
     30 To change the sliding bar color:
     31 
     32     paper-tabs.pink::shadow #selectionBar {
     33       background-color: #ff4081;
     34     }
     35 
     36 @group Paper Elements
     37 @element paper-tabs
     38 @extends core-selector
     39 @homepage github.io
     40 -->
     41 
     42 <link rel="import" href="../core-selector/core-selector.html">
     43 <link rel="import" href="paper-tab.html">
     44 
     45 <polymer-element name="paper-tabs" extends="core-selector" attributes="noink nobar" role="tablist">
     46 <template>
     47 
     48   <link rel="stylesheet" href="paper-tabs.css">
     49   
     50   <div id="tabsContainer" horizontal layout>
     51   
     52     <shadow></shadow>
     53     <div id="selectionBar" hidden?="{{nobar}}" on-transitionend="{{barTransitionEnd}}"></div>
     54     
     55   </div>
     56     
     57 </template>
     58 <script>
     59 
     60   Polymer('paper-tabs', {
     61     
     62     /**
     63      * If true, ink effect is disabled.
     64      *
     65      * @attribute noink
     66      * @type boolean
     67      * @default false
     68      */
     69     noink: false,
     70     
     71     /**
     72      * If true, the bottom bar to indicate the selected tab will not be shown.
     73      *
     74      * @attribute nobar
     75      * @type boolean
     76      * @default false
     77      */
     78     nobar: false,
     79     
     80     activateEvent: 'down',
     81     
     82     nostretch: false,
     83     
     84     selectedIndexChanged: function(old) {
     85       var s = this.$.selectionBar.style;
     86       
     87       if (!this.selectedItem) {
     88         s.width = 0;
     89         s.left = 0;
     90         return;
     91       } 
     92       
     93       var w = 100 / this.items.length;
     94       
     95       if (this.nostretch || old === null || old === -1) {
     96         s.width = w + '%';
     97         s.left = this.selectedIndex * w + '%';
     98         return;
     99       }
    100       
    101       var m = 5;
    102       this.$.selectionBar.classList.add('expand');
    103       if (old < this.selectedIndex) {
    104         s.width = w + w * (this.selectedIndex - old) - m + '%';
    105       } else {
    106         s.width = w + w * (old - this.selectedIndex) - m + '%';
    107         s.left = this.selectedIndex * w + m + '%';
    108       }
    109     },
    110     
    111     barTransitionEnd: function() {
    112       var cl = this.$.selectionBar.classList;
    113       if (cl.contains('expand')) {
    114         cl.remove('expand');
    115         cl.add('contract');
    116         var s = this.$.selectionBar.style;
    117         var w = 100 / this.items.length;
    118         s.width = w + '%';
    119         s.left = this.selectedIndex * w + '%';
    120       } else if (cl.contains('contract')) {
    121         cl.remove('contract');
    122       }
    123     }
    124     
    125   });
    126   
    127 </script>
    128 </polymer-element>
    129