如何在angular2材质中的md-card中添加填充？

如何在angular2材质中添加md-card中的填充？我使用MD-卡显示我的产品列表，但我不能对他们添加填充，这里是我做的：如何在angular2材质中的md-card中添加填充？

product.component.html：

<p> 
    Product List 
</p> 

<div class="container"> 
    <div class="col-sm-2 filter-area"> 
    <div>Filter area</div> 
    <div>Search area</div> 
    <div>Category area</div> 
    <div>Widget area</div> 
    </div> 
    <div class="col-sm-10"> 
    <md-card class="example-card" *ngFor="let data of (myData ? myData.slice(0,5): []); let i = index"> 

     <img md-card-image src="{{ data.url }}"> 
     <md-card-header> 
      <md-card-title>{{ data.title }}</md-card-title> 
     </md-card-header> 

     <md-card-actions> 
      <button md-button>Add to Cart</button> 
      <button md-button>Buy Now</button> 
     </md-card-actions> 

     </md-card> 
    </div> 
</div>

，这里是我的产品.component.ts：

myData: Array<any>; 

    constructor(private http:Http) { 
    this.http.get('https://jsonplaceholder.typicode.com/photos') 
     .map(response => response.json()) 
     .subscribe(res => this.myData = res); 
    }

这就是我如何显示我的JSON数据，这是我使用我的原型设计样本JSON数据。下面是我使用（如果你触发我的构造函数应该看起来像下面的地址）5 JSON数据：

[ 

    { 
     "albumId": 1, 
     "id": 1, 
     "title": "accusamus beatae ad facilis cum similique qui sunt", 
     "url": "http://placehold.it/600/92c952", 
     "thumbnailUrl": "http://placehold.it/150/92c952" 
    }, 
    { 
     "albumId": 1, 
     "id": 2, 
     "title": "reprehenderit est deserunt velit ipsam", 
     "url": "http://placehold.it/600/771796", 
     "thumbnailUrl": "http://placehold.it/150/771796" 
    }, 
    { 
     "albumId": 1, 
     "id": 3, 
     "title": "officia porro iure quia iusto qui ipsa ut modi", 
     "url": "http://placehold.it/600/24f355", 
     "thumbnailUrl": "http://placehold.it/150/24f355" 
    }, 
    { 
     "albumId": 1, 
     "id": 4, 
     "title": "culpa odio esse rerum omnis laboriosam voluptate repudiandae", 
     "url": "http://placehold.it/600/d32776", 
     "thumbnailUrl": "http://placehold.it/150/d32776" 
    }, 
    { 
     "albumId": 1, 
     "id": 5, 
     "title": "natus nisi omnis corporis facere molestiae rerum in", 
     "url": "http://placehold.it/600/f66b97", 
     "thumbnailUrl": "http://placehold.it/150/f66b97" 
    } 
]

，这里是我的CSS文件，product.component.css：

.example-card { 
    width: 220px; 
    float: left; 
    padding: 30px; 
    } 

.filter-area { 
    background-color: peachpuff; 
}

这里是我的应用程序截图：

如何在那里添加填充？

来源

2017-08-22 Ke Vin

对于md卡不能应用填充。所以创建div并应用填充。

<div class="col-md-10"> 
    <md-card> 
     <div class="example-card" style="background-color: #40DEC8;"> 
      <img md-card-image src="{{ data.url }}"> 
     <md-card-header> 
      <md-card-title>{{ data.title }}</md-card-title> 
     </md-card-header> 

     <md-card-actions> 
      <button md-button>Add to Cart</button> 
      <button md-button>Buy Now</button> 
     </md-card-actions> 
     </div> 
     <!-- Other html --> 
    </md-card> 
</div>

来源

2017-08-22 04:45:56 Vignesh

谢谢！这是真的，我不能申请补丁在md卡，现在的作品，现在谢谢你 –

把话挑一个div内垫衬添加到类。根据需要使用firstchild和lastchild来创建CSS类。不要像我这里使用内联CSS。

<div layout="column" style="padding : 10px;"> 
    <md-card>Simple card</md-card> 
</div> 
<div layout="column" style="padding : 10px;"> 
    <md-card>Simple card</md-card> 
</div> 
<div layout="column" style="padding : 10px;"> 
    <md-card>Simple card</md-card> 
</div>

来源

2017-08-22 04:50:50 heysulo

如何在angular2材质中的md-card中添加填充？

回答

相关问题