Polymercomponenten delen deel 2

In deel een van deze serie heb ik besproken hoe de geweldige nieuwe boilerplate moet worden geconfigureerd, untitled-element, dat het Polymer-team heeft gecreëerd om het maken en delen van polymeercomponenten aanzienlijk eenvoudiger te maken.

In de volgende tutorial ga ik dieper in op wat untitled-element omvat, net als de documentatie voor het automatisch genereren van gegevens en het instellen van uw component voor distributie via Bower. We blijven de Reddit-componentcode gebruiken die ik ook in mijn eerste zelfstudie met Polymer heb gemaakt.

Een kijkje binnenin untitled-element

Binnen het boilerplate-project zijn er een aantal sleutelbestanden die u zult gebruiken:

• bower.json - Hiermee kunt u instellingen en afhankelijkheden voor uw component opgeven
• zt-element-master.html - de sjabloon voor de nieuwe component
• zt-element-master.css - de stylesheetsjabloon om je nieuwe component te stylen
• index.html - het HTML-bestand met de kern van Polymer voor het genereren van documentatie
• demo.html - het HTML-bestand waarmee gebruikers uw component kunnen testen

Dit zijn de basisbestanden die worden verstrekt wanneer u de boilerplate voor het eerst downloadt vanuit de PolymerLabs GitHub-repo en fungeert als de basis voor uw nieuwe component. In deel één hebben we de naam veranderd zt-element-master.html naar reddit-element.html en zt-element-master.css naar reddit-element.css, omdat ze moeten worden genoemd hetzelfde als onze component. We hebben ook verwijzingen bijgewerkt naar untitled-element in de bestanden, om ervoor te zorgen dat de code verwijst naar de juiste componentnaam.

Laten we eens kijken naar de code in reddit-element.html: