Skip to content
Demonstration of using basic-carousel with paper-tabs
HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
bower_components
node_modules
LICENSE
README.md
bower.json
index.html
package.json

README.md

carousel-with-tabs

Demonstration showing a basic-carousel (a JavaScript-based component in the Basic Web Components project) being used with paper-tabs (a Polymer-based component).

Live demo

This demonstration is meant to confirm that the standard nature of web components permits interoperability, not to say that this particular combination of user interface elements is necessarily beautiful or useful.

One interoperability feature explored here is using Polymer's data binding against an attribute defined by a non-Polymer element. In this case, the selected attribute of the paper-tabs component is bound successfully to the selected-index attribute of the basic-carousel component. This works because both components support the same convention: when a property backing an attribute changes, the component raises an event. The event's name is the attribute's name, plus -changed, e.g., selected-index-changed.

Note that this binding works in both directions: clicking on a tab changes the image shown and, in the other direction, using touch/keyboard/trackpad to change the image shown updates the selected tab.

You can’t perform that action at this time.