diff options
Diffstat (limited to 'third_party/polymer/components-chromium/paper-tabs/paper-tabs.html')
-rw-r--r-- | third_party/polymer/components-chromium/paper-tabs/paper-tabs.html | 60 |
1 files changed, 60 insertions, 0 deletions
diff --git a/third_party/polymer/components-chromium/paper-tabs/paper-tabs.html b/third_party/polymer/components-chromium/paper-tabs/paper-tabs.html new file mode 100644 index 0000000..041d62b --- /dev/null +++ b/third_party/polymer/components-chromium/paper-tabs/paper-tabs.html @@ -0,0 +1,60 @@ +<!-- +Copyright (c) 2014 The Polymer Project Authors. All rights reserved. +This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt +The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt +The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt +Code distributed by Google as part of the polymer project is also +subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt +--> + +<!-- +`paper-tabs` is a `core-selector` styled to look like tabs. Tabs make it easy to +explore and switch between different views or functional aspects of an app, or +to browse categorized data sets. + +Use `selected` property to get or set the selected tab. + +Example: + + <paper-tabs selected="0"> + <paper-tab>TAB 1</paper-tab> + <paper-tab>TAB 2</paper-tab> + <paper-tab>TAB 3</paper-tab> + </paper-tabs> + +See <a href="#paper-tab">paper-tab</a> for more information about +`paper-tab`. + +Styling tabs: + +To change the sliding bar color: + + paper-tabs.pink::shadow #selectionBar { + background-color: #ff4081; + } + +@group Paper Elements +@element paper-tabs +@extends core-selector +@homepage github.io +--> + +<link rel="import" href="../core-selector/core-selector.html"> +<link rel="import" href="paper-tab.html"> + +<polymer-element name="paper-tabs" extends="core-selector" attributes="noink nobar" role="tablist" assetpath=""> +<template> + + <link rel="stylesheet" href="paper-tabs.css"> + + <div id="tabsContainer" horizontal="" layout=""> + + <shadow></shadow> + <div id="selectionBar" hidden?="{{nobar}}" on-transitionend="{{barTransitionEnd}}"></div> + + </div> + +</template> + +</polymer-element> +<script src="paper-tabs-extracted.js"></script>
\ No newline at end of file |