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

Question

如何在 angular2 的 md-card 中添加填充 material？我正在使用 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>

这是我的 product.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 数据（如果你在我的构造函数中触发 url 它应该如下所示）：

[

    {
        "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;
}

这是我的应用程序屏幕截图：

如何添加填充？

Answer 1

对于 md-card 不能应用填充。所以创建 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>

Answer 2

将您的卡片放入 div 并向 class 添加填充。根据需要使用 firstchild 和 lastchild 来创建 CSS classes。不要像我在这里那样使用内联 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>

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

How to add padding in md-card in angular2 material?

html

css

responsive-design

angular-material2

angular