Polímero - Tarjeta de papel

La tarjeta de papel es una hoja de papel de diseño de material simple con datos relacionados únicos. Para obtener la tarjeta de papel en su directorio, debe usar el siguiente comando en el símbolo del sistema.

bower install --save PolymerElements/paper-card

Ejemplo

El siguiente ejemplo especifica el uso del elemento de tarjeta de papel en Polymer.js. Cree un archivo index.html y agregue el siguiente código en él:

<!doctype html>
<html>
   <head>
      <link rel = 'import' href = 'my-app.html'>
   </head>
   
   <body>
      <h2>Paper-Card Example</h2>
      <my-app></my-app>
   </body>
</html>

Ahora, abra el archivo my-app.html e incluya el siguiente código en él.

<link rel = 'import' href = 'bower_components/polymer/polymer.html'>
<link rel = "import" href = "bower_components/paper-button/paper-button.html">
<link rel = "import" href = "bower_components/paper-styles/paper-styles.html">
<link rel = "import" href = "bower_components/paper-card/paper-card.html">
<link rel = "import" href = "bower_components/iron-icons/iron-icons.html">
<link rel = "import" href = "bower_components/iron-icons/communication-icons.html">

<dom-module id = 'my-app'>
   <template>
    
      <style is = "custom-style">
         body {
            display: flex;
            align-items: center;
            justify-content: center;
         }
         
         paper-card {
            max-width: 500px;
         }
         
         .cafe-header { @apply(--paper-font-headline); }
         .cafe-light { color: var(--paper-grey-600); }
         .cafe-location {
            float: right;
            font-size: 15px;
            vertical-align: middle;
         }
         
         .cafe-reserve { color: var(--google-blue-500); }
         iron-icon.star {
            --iron-icon-width: 16px;
            --iron-icon-height: 16px;
            color: var(--paper-amber-500);
         }
      </style>
      
      <paper-card >
         <div class = "card-content">
            <div class = "cafe-header">TutorialsPoint</div>
            <div class = "cafe-rating">
               <iron-icon class = "star" icon = "star"></iron-icon>
               <iron-icon class = "star" icon = "star"></iron-icon>
               <iron-icon class = "star" icon = "star"></iron-icon>
               <iron-icon class = "star" icon = "star"></iron-icon>
               <iron-icon class = "star" icon = "star"></iron-icon>
            </div>
         
            <p>Free Tutorials</p>
            <p class = "cafe-light">Enjoy theory and lab at the same time, right here
               online. An online Lab for IT Professionals</p>
         </div>
      </paper-card>
   </template>
   
   <script>
      Polymer ({
         is: 'my-app',
         ready: function() {
            this.async(function() {
            });
         }
      });
   </script>
<dom-module>

Salida

Para ejecutar la aplicación, navegue hasta el directorio del proyecto creado y ejecute el siguiente comando.

polymer serve

Ahora abra el navegador y navegue hasta http://127.0.0.1:8081/. Lo siguiente será la salida.

↰ Previous page