| Index: pkg/polymer/lib/elements/polymer-ui-collapsible/polymer-ui-collapsible.html
|
| diff --git a/pkg/polymer/lib/elements/polymer-ui-collapsible/polymer-ui-collapsible.html b/pkg/polymer/lib/elements/polymer-ui-collapsible/polymer-ui-collapsible.html
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..810fc7ca9b6b9c9db6cc43bb7bc1ee712c8f82da
|
| --- /dev/null
|
| +++ b/pkg/polymer/lib/elements/polymer-ui-collapsible/polymer-ui-collapsible.html
|
| @@ -0,0 +1,78 @@
|
| +<!--
|
| +Copyright 2013 The Polymer Authors. All rights reserved.
|
| +Use of this source code is governed by a BSD-style
|
| +license that can be found in the LICENSE file.
|
| +-->
|
| +<!--
|
| +/**
|
| + * @module Polymer UI Elements
|
| + */
|
| +/**
|
| + * polymer-ui-collapsible has a header and a body and the body appears or
|
| + * disappears based on "active" property. Tapping on the header will toggle
|
| + * the active state. User needs to put the class "polymer-ui-collapsible-header"
|
| + * on the element to indicate it represents a header.
|
| + *
|
| + * Example:
|
| + *
|
| + * <polymer-ui-collapsible>
|
| + * <div class="polymer-ui-collapsible-header">Title</div>
|
| + * <div>
|
| + * some content...
|
| + * </div>
|
| + * </polymer-ui-collapsible>
|
| + *
|
| + * @class polymer-ui-collapsible
|
| + */
|
| +-->
|
| +<link rel="import" href="../polymer/polymer.html">
|
| +<link rel="import" href="../polymer-collapse/polymer-collapse.html">
|
| +
|
| +<polymer-element name="polymer-ui-collapsible" attributes="active notap">
|
| + <template>
|
| + <link rel="stylesheet" href="polymer-ui-collapsible.css">
|
| + <div on-tap="{{headerTap}}">
|
| + <content select=".polymer-ui-collapsible-header"></content>
|
| + </div>
|
| + <div id="collapsibleBody" on-tap="{{bodyTap}}">
|
| + <content></content>
|
| + </div>
|
| + <polymer-collapse targetId="collapsibleBody" closed="{{!active}}"></polymer-collapse>
|
| + </template>
|
| + <script>
|
| + Polymer('polymer-ui-collapsible', {
|
| + /**
|
| + * If true, tapping on the header will not toggle the active state.
|
| + *
|
| + * @attribute notap
|
| + * @type boolean
|
| + * @default false
|
| + */
|
| + notap: false,
|
| + /**
|
| + * If true, the body is expanded.
|
| + *
|
| + * @attribute active
|
| + * @type boolean
|
| + * @default false
|
| + */
|
| + active: false,
|
| + /**
|
| + * Toggle the active state of the collapsible.
|
| + *
|
| + * @method toggle
|
| + */
|
| + toggle: function() {
|
| + this.active = !this.active;
|
| + },
|
| + headerTap: function() {
|
| + if (!this.notap) {
|
| + this.toggle();
|
| + }
|
| + },
|
| + bodyTap: function(e) {
|
| + e.notap = true;
|
| + }
|
| + });
|
| + </script>
|
| +</polymer-element>
|
|
|