我如何設計用於我的聚合物元素的<paper-card>

您好我正在創建我使用<紙卡的聚合物元素。我想改變紙卡的高度&，以便它佔據整個空間。此外，我想做出更多的更改，但我發現它很困難。我可以用內聯樣式這樣做：我如何設計用於我的聚合物元素的<paper-card>

<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>

如果你看到這裏，我已經做了風格=「寬度：100％」，使其跨越整個寬度。任何人都可以告訴我如何在<風格>標籤中寫入相同的內容。我讀了幾篇文章，但發現它非常困難*聚合物新*。感謝提前:)

來源

2016-05-29 Shikha

爲<paper-card style="width: 100%">等效CSS是：

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

這裏的工作演示：

<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

來源

2016-05-29 16:45:44 tony19

謝謝!!如果這很簡單，那麼我們爲什麼要使用::而且我看到了某處 - >紙卡.heading {-----一些css ----}。這是什麼意思？ – Shikha

另外，如果我必須居中對齊紙卡標題，那麼我應該如何繼續。我試過這個但是沒有工作 - >紙卡.heading { text-align：center; } – Shikha

你可以在你的風格標籤使用is="custom-style"，然後使用紙質卡屬性元素頁面或標準的CSS屬性

來源

2016-07-23 15:43:44 ateebahmed

上描述不要以爲紙卡元素設置爲100％的工作。
我相信正確的方法是使用混合，因爲這是您style Polymer elements的方式。

在這種情況下，正確的方法是：

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

文本的對齊是在這種情況下，與處理：

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

不同選擇的完整列表，可以發現在element description here.

來源

2017-01-26 20:24:00 Niklas

我如何設計用於我的聚合物元素的<paper-card>

回答

相關問題