Polymer Paper Card

by Online Tutorials Library July 14, 2022

Polymer paper-card

The polymer paper-card is a simple material design piece of paper with unique related data. To get the paper-card in your directory, you should use the following command in the command prompt.

Example

Create an index.html file and add the following code in it to see the use of paper-card element in Polymer.js.

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

Now, open the my-app.html file and include the following code in it.

  <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”>tutoraspire</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”>tutoraspire is a platform for all technologies.</p>           </div>        </paper-card>     </template>        <script>        Polymer ({           is: ‘my-app’,           ready: function() {              this.async(function() {              });           }        });     </script>  <dom-module>  

Output:

Next TopicWeb Components

Polymer Paper Card

Polymer paper-card

Example

Apache Pig UNION Operator

PostgreSQL BIGINT

You may also like