polymerAan de slag met polymeer


Opmerkingen

Het Polymer- project bestaat uit:

  • Polymeerbibliotheek : Polymeer is een lichtgewichtbibliotheek die u helpt optimaal te profiteren van webcomponenten. Met Web Components kunt u herbruikbare aangepaste elementen maken die naadloos samenwerken met de ingebouwde elementen van de browser, of uw app opdelen in componenten van de juiste maat, waardoor uw code schoner en goedkoper is om te onderhouden.
  • WebComponents Polyfill : WebComponents Polyfill is een toekomstige gerichte bibliotheek gericht op het voldoen aan de specificaties van de W3C-webcomponenten. Browsers die de specificatie volledig implementeren, hebben geen webcomponents.js nodig. De meeste browsers missen echter nog steeds een deel van de specificatie, dus dit zal een hele tijd een afhankelijkheid zijn.
  • Polymer App Toolbox : Polymer App Toolbox helpt u bij het bouwen en leveren van geavanceerde progressieve web-apps met minimale overhead en nuttige lading, door gebruik te maken van krachtige webplatformfuncties zoals Web Components, Service Worker en HTTP / 2. De Toolbox biedt een op componenten gebaseerde architectuur, responsieve lay-outs, een modulaire router, ondersteuning voor lokalisatie, turnkey-ondersteuning voor lokale opslag en offline caching en efficiënte levering van ontbundelde app-bronnen. Gebruik deze functies afzonderlijk of gebruik ze samen om een complete Progressive Web-app te bouwen. Polymeer strooit een beetje suiker over de standaard Web Components API's, waardoor u gemakkelijker geweldige resultaten kunt behalen. De polymeerbibliotheek biedt een reeks functies voor het maken van aangepaste elementen. Deze functies zijn ontworpen om het eenvoudiger en sneller te maken om aangepaste elementen te maken die werken als standaard DOM-elementen. Vergelijkbaar met standaard DOM-elementen, kunnen polymeerelementen zijn:

versies

Versie Publicatiedatum
v2.0.0 2017/05/15
v1.7.0 2016/09/28
v1.6.1 2016/08/01
v1.6.0 2016/06/29
v1.5.0 2016/05/31
v1.4.0 2016/05/18
v1.0.0 2015/05/27

Basiselementstructuur

We hebben het volgende zeer elementaire element my-element opgeslagen als src/my-element.html

<link rel="import" href="bower_components/polymer/polymer.html">

<dom-module id="my-element">

  <template>
    <style>
      /* local styles go here */
      :host {
        display: block;
      }
    </style>
    <!-- local DOM goes here -->
    <content></content>
  </template>

  <script>
    Polymer({
      /* this is the element's prototype */
      is: 'my-element'
    });
  </script>

</dom-module>
 
  • De <link> bevat de polymeerbibliotheek met behulp van een HTML-import.
  • De <dom-module> is de lokale DOM-wrapper voor het element (in dit geval my-element ).
  • De <template> is de werkelijke lokale DOM-definitie.
  • Met de <style> in de <template> kunt u stijlen definiëren die zijn gericht op dit element en de lokale DOM en die niets anders in het document zullen beïnvloeden.
  • De <content> bevat alles wat u in uw element plaatst.
  • De :host pseudo-klasse komt overeen met het aangepaste element ( my-element ).
  • De Polymer oproep registreert het element.
  • Het is Property is de naam van het element (het moet de match <dom-module> 's id )

U kunt het in uw app importeren met:

<link rel="import" href="src/my-element.html">
 

En gebruik het als een tag:

<my-element>Content</my-element>
 

Hallo Wereld

In dit voorbeeld wordt een Polymer-element met de naam x-foo , waarvan de sjabloon bindt aan een tekenreekseigenschap, genaamd "message". De HTML van het element wordt geïmporteerd in het hoofddocument, waarmee <x-foo> -tags in <body> .

x-foo.html

<dom-module id="x-foo">
  <template>
    <span>{{message}}</span>
  </template>

  <script>
    Polymer({
      is: 'x-foo',
      properties : {
        message: {
          type: String,
          value: "Hello world!"
        }
      }
    });
  </script>
</dom-module>
 

index.html

<head>
  <!-- PolyGit used here as CDN for demo purposes only. In production,
       it's recommended to import Polymer and Web Components locally
       from Bower. -->
  <base href="https://polygit.org/polymer+1.6.0/components/">

  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="polymer/polymer.html">

  <link rel="import" href="x-foo.html">
</head>
<body>
  <x-foo></x-foo>
</body>
 

Zie demo in CodePen

Uw eerste polymeer-app instellen op basis van een sjabloon

Laten we je instellen om je eigen geweldige Progressive Web-app met Polymer te bouwen!

Voordat u Polymer kunt installeren, hebt u het volgende nodig:

De opdrachtregelinterface van het polymeer installeren

De Polymer CLI biedt u alle tools die nodig zijn voor polymeerprojecten:

npm install -g polymer-cli
 

Initialiseer uw app vanuit een app-sjabloon

Gebruik polymer init om uw app te initialiseren vanuit een app-sjabloon .

Een cool sjabloon is het --app-drawer-template . Laten we dat gebruiken:

polymer init app-drawer-template
 

Serveer je app

Er is geen gebouw nodig om uw eerste geweldige Polymer-app te bedienen. serve het gewoon:

polymer serve --open
 

Hiermee wordt de app in uw standaardbrowser op http://localhost:8080 .

Elementen uit de polymeercatalogus gebruiken

Polymeer produceert veel goedgebouwde elementen die u in uw app kunt gebruiken.

Blader ze door in hun Elementcatalogus .

Laten we de workflow van het gebruik van een element doornemen met paper-input ( documentatie )

Download het element

Om een element te downloaden zijn er twee manieren:

Prieel

De handige manier is om de opdrachtregel te gebruiken met het bower install commando:

bower install --save PolymerElements/paper-input

Opmerking: --save voegt het element toe als een afhankelijkheid van de bower.json van uw app.

Zip bestand

De andere manier is om het geselecteerde element (in dit geval paper-input ) aan uw verzameling (in de polymeercatalogus) toe te voegen met "Toevoegen aan verzameling" in de navigatie en uw verzameling te downloaden met het sterpictogram in de rechterbovenhoek.

Dit genereert een .zip-bestand dat het element en al zijn afhankelijkheden bevat. Vervolgens kunt u de map bower_components in de .zip / componenten naar de hoofdmap van uw app kopiëren.

Importeer het element in uw app

Om het zojuist geïnstalleerde element te importeren, importeert u het bijbehorende .html bestand:

<link rel="import" href="bower_components/paper-input/paper-input.html">
 

Gebruik het element

Nu kunt u paper-input gebruiken in het document waarin u het hebt geïmporteerd:

<paper-input></paper-input>