ペーパーカードでグリッドレイアウトを作成するには

Question

template repeaterとthe paper-card tutorialをPolymer Starter Kitに混在させようとしています。従業員

従業員

従業員リストの

1. リスト：私は2つのカスタム要素を作成し http://cdn.instantshift.com/wp-content/uploads/2014/11/material-design-01.jpg

   ：

   私の目的は、グリッドのようなものをコピーすることです：

   <style is="custom-style"> 
   #board { 
       @apply(--layout-vertical);   <<= HERE ARE DEFINED THE LAYOUT OF THE GRID 
       @apply(--layout-wrap); 
       height: 344px; 
       width: 384px; 
   } 
   #board > paper-card { 
       box-sizing: border-box; 
       max-width: 184px; 
       margin: 4px; 
       flex: 0 0 auto; 
   } 
   </style> 
       <template> 
       <div id="board"> 
        <template is="dom-repeat" items="{{employeesArray}}"> 
         <employee-element name="{{item.title}}" 
             preview="{{item.preview}}" 
             width={{item.width}} height={{item.height}}> 
         </employee-element> 
        </template> 
       </div> 
       </template> 
   

   従業員：

   <paper-card 
       heading="{{name}}" 
       image="{{preview}}" 
       style="max-width:{{width}}px; 
        max-height:{{height}}px;" 
       > 
       <div class="card-actions"> 
       <paper-icon-button class="favorite" icon="favorite"></paper-icon-button> 
       <paper-icon-button class="bookmark" icon="bookmark"></paper-icon-button> 
       <paper-icon-button class="share" icon="social:share"></paper-icon-button> 
       </div> 
   </paper-card> 
   

   ここでは、私が得るものです：

   

   私は結果が期待近づくことができる方法は？カードを自動的に配置する設定はありますか？

   「キャリッジリターン」のような動作を得るにはどうすればよいですか？

   手順：

   あなたの要素をインポートし、次の行（私の場合は要素/ elements.html）

   を追加

   ---

   回答は（@Snekwのおかげで）結果

   <link rel="import" href="../bower_components/iron-flex-layout/iron-flex-layout-classes.html"> 
   

   私の従業員のリスト要素は次のようになります。

   <style is="custom-style" include="iron-flex"> 
       .flex-wrap { 
        @apply(--layout-horizontal); 
        @apply(--layout-wrap); 
       } 
       </style> 
       <template> 
       <div class="container flex-wrap"> 
        <template is="dom-repeat" items="{{employeesArray}}"> 
         <employee-element name="{{item.title}}" 
             preview="{{item.preview}}" 
             width={{item.width}} height={{item.height}}> 
         </employee-element> 
   
        </template> 
       </div> 
       </template> 
   

   そして、私はこの結果を得る：

   

   を私はまだ紙のカードアクションパネルでの問題を修正する必要があります。

Answer 1

styleタグにiron-flexクラスを含める必要があります。

<style is="custom-style" include="iron-flex"> 
//your styling 
</style> 

iron-flex-layout-classes.html要素をロードする必要があります。 Iron-flex-layout要素には、--layout-verticalと--layout-wrapのプロパティが含まれています。

ここで鉄フレックスレイアウトの詳細：iron-flex-layout-classes GitHub