Created
October 15, 2015 20:51
-
-
Save tuxsudo/388bc591a17d099a1925 to your computer and use it in GitHub Desktop.
Web Component
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <link rel="import" href="./my-tabs.html"> | |
| </head> | |
| <body> | |
| <my-tabs cool> | |
| <a slot="tab-handle" for="1">tab 1</a> | |
| <section slot="tab" class="is-active" tab="1"> | |
| Image One: | |
| <img src="//placehold.it/400x400" /> | |
| </section> | |
| <a slot="tab-handle" for="2">tab 2</a> | |
| <section slot="tab" tab="2"> | |
| Image Two: | |
| <img src="//placehold.it/400x400" /> | |
| </section> | |
| <a slot="tab-handle" for="3">tab 3</a> | |
| <section slot="tab" tab="3"> | |
| Image 3: | |
| <img src="//placehold.it/400x400" /> | |
| </section> | |
| <a slot="tab-handle" for="4">tab 4</a> | |
| <section slot="tab" tab="4"> | |
| Image Cuatro: | |
| <img src="//placehold.it/400x400" /> | |
| </section> | |
| <a slot="tab-handle" for="5">tab 600</a> | |
| <section slot="tab" tab="5"> | |
| Image 50000: | |
| <img src="//placehold.it/400x400" /> | |
| </section> | |
| </my-tabs> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <template> | |
| <style> | |
| .tabs { | |
| display: flex; | |
| justify-content: space-between; | |
| padding: 1em; | |
| } | |
| ::content [slot=tab] { | |
| display: none; | |
| } | |
| ::content [slot=tab].is-active { | |
| display: block; | |
| } | |
| ::content [slot=tab-handle] { | |
| cursor: pointer; | |
| flex: 1; | |
| padding: 1em 0; | |
| } | |
| </style> | |
| <nav class="tabs"> | |
| <content select="[slot=tab-handle]"></content> | |
| <slot name="tab-handle"></slot> | |
| </nav> | |
| <div class="tab_contents"> | |
| <content select="[slot=tab]"></content> | |
| </div> | |
| </template> | |
| <script> | |
| var proto = Object.create(HTMLElement.prototype), | |
| doc = document.currentScript.ownerDocument; | |
| proto.createdCallback = function() { | |
| var template = doc.querySelector('template'); | |
| this.createShadowRoot(); | |
| this.shadowRoot.appendChild( document.importNode(template.content, true) ); | |
| }; | |
| proto.attachedCallback = function() { | |
| this.addEventListener('click', function(e) { | |
| if(e.target.getAttribute('slot')==='tab-handle') { | |
| [].slice.call(this.querySelectorAll('.is-active')) | |
| .map(function(elm){ elm.classList.remove('is-active')}); | |
| e.target.nextElementSibling.classList.add('is-active'); | |
| } | |
| }.bind(this)); | |
| }; | |
| proto.attributeChangedCallback = function(attr, old, newVal) { | |
| console.log('I (%s) once was %s but now Im %s', attr, old, newVal); | |
| }; | |
| document.registerElement('my-tabs', { | |
| prototype: proto | |
| }); | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment