Google Polymer - Comment cela va changer la façon dont les applications Web sont construites

En outre, ces éléments personnalisés peuvent également avoir un couple d'attributs personnalisés acceptés. En ce qui concerne élément, vous définissez un attribut appelé username qui sera utilisé pour spécifier le nom d'utilisateur Twitter.

Éléments personnalisés dans Polymer

Polymer est livré avec un tas d'éléments qui représentent (presque) tous les besoins de l'application web. Google divise ces éléments en groupes: éléments en fer, éléments en papier, composants Web Google, éléments en or, éléments en néon, éléments en platine et molécules.

1. Éléments de fer

Iron Elements est une collection d'éléments de base. Ces éléments de base sont ce que nous utilisons normalement pour créer une page Web telle qu'une entrée, un formulaire et une image. La différence est que Polymer ajoute des pouvoirs supplémentaires à ces éléments.

Tous les éléments de ce groupe ont un préfixe en iron-, par exemple , qui est utilisé pour afficher une image. le élément a été équipé de quelques attributs supplémentaires que nous ne pouvons pas appliquer dans la norme élément. Nous pouvons, par exemple, ajouter des attributs de preload, de fade et d' placeholder :

L'exemple ci-dessus affichera d'abord l'espace réservé pour l'image, puis fondra dans l'image réelle dans le src alors qu'il est complètement chargé, ce qui assurera un effet de chargement d'image fluide .

2. Éléments de papier

Les éléments de papier est un groupe d'éléments de conception de matériaux. Material Design est le langage de conception de Google pour rendre l'interface utilisateur et l'expérience sur les plates-formes Google à la fois le Web et les applications Android plus visuellement cohérente. Certains éléments qui sont uniques à la conception de matériaux sont le papier et le bouton d'action flottant (FAB).

Papier

Le papier est la métaphore de Google pour le médium qui sous-tend le contenu . Pour ajouter un papier avec Polymer, nous utilisons élément. Cet élément prend 2 attributs:

• elevation pour soulever le papier, ajoutant ainsi une ombre pour renforcer l'élévation
• animated appliquera l'animation comme le changement d'altitude du papier.

Bouton d'action flottant (FAB)

Le bouton d'action flottant (FAB) est un bouton circulaire avec une icône, flottant sur l'écran, généralement avec une couleur distincte. Google suggère que ce bouton comporte une fonction fréquemment utilisée. Voici un exemple:

L'extrait de code suivant ajoute un matériau de papier avec une image et un FAB.

Nous aurons le résultat suivant:

• Voir la démo papier

3. Composants Web Google

Les composants Web Google sont des éléments spéciaux qui traitent les API et services Google tels que Google Maps, Youtube, ainsi que Google Feed, pour n'en nommer que quelques-uns. Les éléments de ce groupe interagissent avec les services Google à quelques lignes seulement .

Voici un exemple pour montrer une carte Google en utilisant le élément.

 C'est Googleplex 

Comme vous le pouvez ci-dessus, le L'élément prend la latitude et la longitude pour spécifier l'emplacement sur la carte. Nous pouvons également nicher pour montrer un marqueur de carte de cet emplacement avec un texte qui apparaîtra en cliquant sur le marqueur.

• Voir la carte Démo

Voulez-vous afficher une vidéo YouTube? vous pouvez utiliser le élément.

De même, nous personnalisons la sortie à travers les attributs.

• Voir la démo Youtube

4. Éléments d'or

Les éléments en or sont les éléments conçus spécifiquement pour les applications de commerce électronique . Ici vous trouverez des éléments pour montrer la carte de crédit, l'email, le téléphone et l'entrée ZIP qui ont tous été équipés avec la validation de format pour assurer la saisie correcte des données et la sécurité. Voici un exemple pour ajouter une entrée de carte de crédit Visa.

5. Autres éléments

Les éléments restants incluent des éléments Neon pour l'animation et les effets spéciaux, des éléments Platinum pour les notifications hors ligne et push et enfin des Molecules, des wrappers pour les bibliothèques tierces.

Note de la rédaction: Au moment d'écrire ces lignes, les éléments néon, les éléments de platine et les molécules ne sont toujours pas disponibles.

Intégration de polymère

Vous voulez utiliser Polymer dans votre développement web? Voici comment l'installer et l'intégrer dans vos pages Web. Comme la plupart des éléments Polymer dépendent les uns des autres, la meilleure façon d'installer Polymer est de passer par Bower.

Bower est un gestionnaire de dépendances de projet qui facilite l'installation de scripts ou de styles requis pour exécuter le projet. Consultez notre article précédent sur l'installation, la mise à jour et la suppression des bibliothèques Web facilement avec Bower.

Pour intégrer Polymer, lancez Terminal puis accédez au répertoire de votre projet, en supposant que vous en ayez créé un. Ensuite, exécutez la commande bower init pour lancer le fichier bower.json dans votre projet qui sera utilisé pour enregistrer les dépendances du projet. Ouvrez bower.json et ajoutez les lignes suivantes.

 "dépendances": {"polymère": "Polymère / polymère # ^ 1.0.0", "composants-web-google": "GoogleWebComponents / google-web-components # ^ 1.0.0", "iron-elements": " PolymerElements / iron-elements # ^ 1.0.0 ", " éléments-papier ":" PolymerElements / paper-elements # ^ 1.0.0 ", " éléments-doré ":" PolymerElements / gold-elements # ^ 1.0.0 "} 

Cette configuration suppose que nous allons utiliser tous les éléments de chaque groupe. Vous pouvez supprimer ce dont vous n'avez pas besoin de la liste des dépendances. Lorsque les dépendances sont définies, exécutez la commande bower install pour installer les dépendances dans la liste.

Voici un exemple:

Cette configuration nous permettra d'utiliser le , , éléments.

Vitrines

Voici certaines des applications Web qui utilisent déjà Google Polymer.

Google

Google a utilisé Google Polymer dans la page Web Google IO 2015; Google Fi, le service sans fil de Google pour les opérateurs et les fournisseurs en partenariat; et Google Music.

Éléments personnalisés

CustomElements est un hub où vous pouvez trouver des éléments personnalisés construits avec des composants Web. Il utilise l'élément Paper pour contenir et construire la liste. Il fournit également un itinéraire pratique pour installer ces éléments via Bower et NPM.

Une application Chrome pour l'édition de code qui fonctionne étonnamment bien. Cette application utilise le bouton FAB, le menu Papier et les éléments de dialogue Papier dans l'interface utilisateur.

Un outil pour construire une application web avec des éléments Polymer en utilisant une interface glisser-déposer.

Un rapport de bourse et des prévisions construites entièrement avec des éléments Polymer.

Une application client de messagerie pour Gmail. Il semble beau et fluide, bien que malheureusement, il ne fonctionne pas entièrement.

Polymer a une portée énorme et il peut vous prendre un certain temps pour vous habituer à tous les éléments personnalisés ainsi qu'à son API. Néanmoins, Web Components et Polymer vont certainement influencer la façon dont nous construisons les applications web. Restez en avance sur la foule en lisant plus sur les composants Web - les références sont trouvées ci-dessous.

• Voir la démo
• Source de téléchargement

Références utiles

• L'état des composants Web
• Une introduction détaillée aux éléments personnalisés
• Blog officiel de Google Polymer

15 porte-clés créatifs pour garder vos clés organisées

Imagine ça. Vous êtes arrivé chez vous et vous commencez à creuser partout mais vous n'arrivez pas à les trouver. Oui, vous avez égaré vos clés à nouveau. C'est là qu'un porte-clé serait utile. Un détenteur de clé n'est pas seulement extrêmement pratique, mais c'est aussi nécessaire. Après tout, v

(Conseils techniques et de conception)

Plus de 50 + polices de symboles de haute qualité et gratuit pour les concepteurs Web

Ces derniers temps, des polices de symboles à l'aspect impressionnant sont apparues sur tout le web, le nombre de polices conçues pour être utilisées sous forme d'icônes, de symboles et de glyphes augmentant de jour en jour. En fait, de nombreux sites Web ont déjà remplacé leurs images par une seule police de caractères - GitHub en est un exemple.En utili

(Conseils techniques et de conception)