Question

如何在angular2材质的md-card中添加填充？我正在使用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中并向该类添加填充。根据需要使用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>

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

2 个答案: