CODEWITHSUNDEEP
csspolymerpolymer-1.0stylingpaper-elements
S2K
S2K

Reputation: 97

How can I style the <paper-card> used in my polymer-element

Hi I am creating my polymer element in which i am using < paper-card >. I want to change the height & width of my paper-card so that it occupies the entire space. Also i want to make few more changes but I am finding it difficult. I can do it with inline styling like this :

<template>
 <div >
 <paper-card heading="OTS Task" animatedShadow="true" style="width: 100%">
  <div class="card-content" >
      <iron-label >Label 1 </iron-label>
      <iron-label> Label 2</iron-label>       
  </div>
  <div class="card-actions">
    <paper-button>Share</paper-button>
    <paper-button>Explore!</paper-button>
  </div>
</paper-card>
</div>

If you see here i have done style="width : 100%" to make it span the entire width. Can anyone tell me how can i write the same in < style > tag. I read few docs on this but found it very difficult * New to polymer *. Thanks in advance :)

Upvotes: 0

Views: 3545

Answers (3)

Niklas
Niklas

Reputation: 1299

Don't think that setting the paper-card element to 100% will work.
I believe that the correct way would be to use mixing as this is the way you style Polymer elements.

The correct way in this case would be:

  paper-card {
    --paper-card: {
      width: 100%;
    };
  }

The alignment of the text would be in this case handled with:

  paper-card {
    --paper-card-header-text: {
        text-align: center;
    };
  }
  paper-card {
    --paper-card-content: {
        text-align: center;
    };
  }

A full list of the different selectors can be found in the element description here.

Upvotes: 3

ateebahmed
ateebahmed

Reputation: 182

You can use is="custom-style" in your style tag and then use paper-card properties as described on elements page or standard CSS properties

Upvotes: 0

tony19
tony19

Reputation: 138286

The equivalent CSS for <paper-card style="width: 100%"> would be:

<style>
  paper-card {
    width: 100%;
  }
</style>

Here's a working demo:

<head>
  <base href="https://polygit.org/polymer+1.4.0/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="polymer/polymer.html">
  <link rel="import" href="paper-card/paper-card.html">
</head>

<body>
  <x-foo></x-foo>

  <dom-module id="x-foo">
    <style>
      paper-card {
        width: 100%;
      }
    </style>
    <template>
      <div>
        <paper-card heading="OTS Task" animated-shadow="true">
          <div class="card-content" >
            <iron-label >Label 1 </iron-label>
            <iron-label> Label 2</iron-label>       
          </div>
          <div class="card-actions">
            <paper-button>Share</paper-button>
            <paper-button>Explore!</paper-button>
          </div>
        </paper-card>
      </div>
    </template>
    <script>
      HTMLImports.whenReady(function() {
        Polymer({
          is: 'x-foo'
        });
      });
    </script>
  </dom-module>
</body>

codepen

Upvotes: 1

Related Questions