如何创建带有角材料的卡片网格？

Posted 2023-02-22

【中文标题】如何创建带有角材料的卡片网格？

【英文标题】：how do i create a grid of cards with angular material?

【发布时间】：2015-10-27 16:06:33

【问题描述】：

我正在尝试使用 ng-repeat 创建每行包含三张卡片的网格。我有一个普通的javascript对象数组附加到范围。下面的代码将为每张卡片创建一个新行。

<div layout="row" ng-repeat='post in posts' layout-fill="" layout-align="">
<md-card>
  <md-card-content>
    <h2 class="md-title">post.title</h2>
    <p>
      post.summary
    </p>
  </md-card-content>
  <div class="md-actions" layout="row" layout-align="end center">
    <md-button>View More</md-button>
  </div>
</md-card>
<br>

如何遍历我的数组并以三行显示卡片？我查看了this post 和this post，但看不到它们如何应用于angular material

【问题讨论】：

你能提供上面的代码笔或小提琴吗？

【参考方案1】：

我已经创建了类似于您可能想要的东西。 md-card 被包裹在具有layout-wrap 的div 中。 div是读取后动态生成的。

代码如下：

<div class='md-padding' layout="row" layout-wrap>
    <md-card style="width: 350px;" ng-repeat="user in users">
      <img src="http://placehold.it/150x150" class="md-card-image" >
      <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>
  </div>

卡片宽度可以通过内联样式调整，希望对您有所帮助。

【讨论】：

这没问题，但我认为如果包装 div 用flex 定义会更好，这样每个md-card 都可以继承和定义响应值flex="33" 而不是绑定卡片中的固定宽度

@gru 你能举个例子吗？这听起来不错，但我无法在实践中创建您的解决方案。

嘿@gru 谢谢你的例子，但它没有响应 - 在很小的 witdth 中被破坏了。是否可以声明一些属性来设置不同宽度的卡片计数定义？

@Jenan 在这种情况下，您应该只使用angular material layout docs 中描述的正常断点符号，例如你会有 flex-sm、flex-md 等。

【参考方案2】：

我只是需要这个；这是一个更全面的解决方案，仅使用 3 列的布局功能：

<md-content class="md-padding" layout="row" layout-wrap>
    <div flex="33" ng-repeat="i in [1,2,3,4,5,6,7]">
        <md-card>
            // ...
        </md-card>
    </div>
</md-content>

卡片must be wrapped 位于大小正确的 div 中，以控制边距并避免溢出。

【讨论】：

layout-wrap 解决了我的问题，flex 无法正常工作。我仍然不明白为什么需要它，我将阅读更多关于它是如何工作的。谢谢！

【参考方案3】：

要符合材料/角度，您必须使用 flex attr 到 md-card。 Flex attr 将为您提供与其父级成比例的宽度。

<div class='md-padding' layout="row" layout-wrap>
    <md-card flex="40" flex-sm="80" ng-repeat="user in users">
      <img src="http://placehold.it/150x150" class="md-card-image" >
      <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>
  </div>

在此示例中，您将有两张卡片（每张 40%），当屏幕大小调整为 -sm 时，卡片将为 80%。

【参考方案4】：

您可以为此使用class="grid-container"。 以这样的代码sn-p为例，

<div class="grid-container">
    <mat-grid-list cols="2" rowHeight="350px">
        <mat-grid-tile [colspan]="1" [rowspan]="1">
            <mat-card class="mat-elevation-z8 card-prop"> CARD 1
            </mat-card>  
        </mat-grid-tile>
        <mat-grid-tile [colspan]="1" [rowspan]="2">
            <mat-card class="mat-elevation-z8 card-prop"> CARD 2
            </mat-card>  
        </mat-grid-tile>
        <mat-grid-tile [colspan]="1" [rowspan]="1">
            <mat-card class="mat-elevation-z8 card-prop"> CARD 3
            </mat-card>  
        </mat-grid-tile>
    </mat-grid-list>
</div>

将产生与此类似的输出。