尝试使用Angular Material创建卡片网格。

Question

我一直在尝试使用angular-material创建卡片的网格。因此，我使用了指令md-grid-list和md-card。但是结果相当丑陋，而且我不确定如何使用md-row-height（比例），虽然我有文档，但并没有说太多。

到目前为止，我所做的是：http://codepen.io/stunaz/pen/qdQwbq，我正在尝试创建一个响应式的卡片网格，甚至不确定在这里是否适合使用md-grid-list指令。

  <md-grid-list md-cols-sm="1" md-cols-md="2" md-cols-gt-md="6" md-row-height="300px" md-gutter="12px" md-gutter-gt-sm="8px">

<md-grid-tile class="gray" ng-repeat="user in users">
  <md-card>
    <img src="http://placehold.it/150x150" class="md-card-image" alt="user avatar">
    <md-card-content>
      <h2>{{user}}</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
    </md-card-content>
    <div class="md-actions" layout="row" layout-align="end center">
      <md-button>Save</md-button>
      <md-button>View</md-button>
    </div>
  </md-card>
</md-grid-tile>

我乐意接受任何形式的帮助。

- storm_buster

Answer 1

您可以使用Flex Box代替md-grid-list，以获得相同的效果。

  <div class='md-padding' layout="row" flex>
     <div layout="row" flex>
        <div class="parent" layout="column" ng-repeat="user in users" flex>
            ... Your content here
        </div>
     </div>
  </div>

请看一个每行固定卡片数的示例：

http://codepen.io/anon/pen/bdQJxy

另外，使用Wrap布局的响应式示例：

http://codepen.io/anon/pen/MwzRde

希望这是你想要的。

- Italo Ayres

---

问题在于它不是响应式的，当屏幕尺寸较小时，卡片应该相互叠放。 - storm_buster

是的，这个有固定数量的瓷砖每行。正在处理一个响应式的示例。 - Italo Ayres

通过设置 flex-sm 选项，您可以为每个不同的屏幕大小设置不同的尺寸或布局。（答案中的链接页面中有所有相关信息）。 - Italo Ayres

@TiagoSousa 我可以用葡萄牙语写吗？如果你观察您发送的示例，组织是通过将一个带有单个卡片的行放置在列中来完成的。这与我所做的示例相反，在其中包含了行内的列。这会产生您正在寻找的效果。 - Italo Ayres

@ItaloAyres 哈哈哈，我认为在这里用英语交流会更好，因为对其他人可能有帮助。我在这个问题中达到了这个点http://codepen.io/TiagoSousa/pen/EKpvJJ，这个问题是http://stackoverflow.com/questions/36791292/how-to-put-the-cards-dynamically-and-fill-the-empty-spaces/36792144?noredirect=1，但当我转到较小的窗口时，它会变成错误的顺序，你明白吗？ - Tiago Sousa

Answer 2

使用这个 HTML 标记并在 md-card 中更改 flex 数字以满足您的需求。

<div class='md-padding' layout="row" layout-wrap>
                    <md-card flex="15" ng-repeat ="n in [1, 2, 3, 4, 5, 6, 7, 8, 9, 0]">
                        <img ng-src="http://i2.wp.com/celebsbios.com/wp-content/uploads/2015/12/Halsey-Singer-3.jpg?resize=150%2C150" class="md-card-image" alt="Washed Out">
                        <md-card-title>
                            <md-card-title-text>
                                <span class="md-headline">Action buttons</span>
                            </md-card-title-text>
                        </md-card-title>
                        <md-card-content>
                            <p>
                                The titles of Washed Out's breakthrough song and the first single from Paracosm share the
                                two most important words in Ernest Greene's musical language: feel it. It's a simple request, as well...
                            </p>
                            <p>
                                The titles of Washed Out's breakthrough song and the first single from Paracosm share the
                                two most important words in Ernest Greene's musical language: feel it. It's a simple request, as well...
                            </p>
                            <p>
                                The titles of Washed Out's breakthrough song and the first single from Paracosm share the
                                two most important words in Ernest Greene's musical language: feel it. It's a simple request, as well...
                            </p>
                        </md-card-content>
                        <md-card-actions layout="row" layout-align="end center">
                            <md-button>Action 1</md-button>
                            <md-button>Action 2</md-button>
                        </md-card-actions>
                    </md-card>
                </div>

- Umair Hamid