angularjs – 如何创建响应(变化列计数)角材料卡网格

发布时间：2020-12-17 08:06:32 所属栏目：安全来源：网络整理

导读：我正在尝试创建一个Angular-Material卡的网格，其行为有点像Bootstrap网格。理想情况下，对于小屏幕宽度，卡片将是全宽的，并在较大的断点处跳到两列。 Demo with 2 cards 问题是A-M为每张卡创建列。我还没有想出如何指定每个断点的列数。 Demo with 5 cards

我正在尝试创建一个Angular-Material卡的网格，其行为有点像Bootstrap网格。理想情况下，对于小屏幕宽度，卡片将是全宽的，并在较大的断点处跳到两列。

Demo with 2 cards

问题是A-M为每张卡创建列。我还没有想出如何指定每个断点的列数。

Demo with 5 cards

这是我使用的标记的基础，它将卡布局从第一个断点处的行到列：

<div ng-app layout="column" layout-gt-sm="row" class="layout-sm-column layout-row">
  <div flex class="flex" ng-repeat="i in [1,2,3,4,5] track by $index">
    <md-card>

有一个similar question on SO已经，但接受的答案是不能令人满意的，因为它使用自定义CSS和卡不流畅的宽度。我没有发现其他类似的例子。

我想我可以用Angular循环每两张卡，并创建堆叠集，但这似乎不必要的繁琐。我必须认为材料提供了一个更好的解决方案。此外，这样的解决方案会在卡片高度不同的页面中留下空格。材料似乎面向像砖石般的弯曲布局，我想坚持。

谢谢。

您可以使用材料 Grid-List，它允许自定义缩放，并在宽度更改时动画更改。

我调整了站点的样本，并在内容中添加了md卡。确保在md卡上??添加布局填充。
您可以轻松地调整样品的列数。

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

我也修改了你的5卡样本。您需要知道卡的高度才能使用网格列表，但您可以轻松地在小屏幕上实现100％的高度。您可以为行使用比例或固定的CSS高度，然后您的卡片工作以灵活的方式显示内容。

<md-grid-list ng-app="app" layout-fill flex
    md-cols-sm="1"
    md-cols-md="2"
    md-cols-gt-md="5"
    md-row-height-sm="100%"
    md-row-height="600px"
    md-gutter="8px">
    <md-grid-tile ng-repeat="i in [1,5] track by $index">
        <md-card layout-fill>

http://jsfiddle.net/2afaok1n/34/

编辑：

如果你正在寻找某种交错的网格，那么你必须添加一个库：angular-deckgrid，它只是提供网格布局，内容中的所有内容都是有角度的。与angular-masonry不同，该库没有任何依赖关系。如果您不用担心添加jQuery等，那么您也可以使用棱角砖。

<div ng-app="app" ng-controller="DeckController" flex layout="column">
   <deckgrid class="deckgrid" flex source="data">
       <md-card>

甲板布局的重要部分是CSS configuration.您可以配置列数及其宽度。我使用了一个媒体查询角材料sm断点来切换到单列布局。

.deckgrid::before {
  content: '4 .column.column-1-4';
  font-size: 0;
  visibility: hidden;
}

.deckgrid .column {
  float: left;
}

.deckgrid .column-1-4 {
  width: 25%;
}

.deckgrid .column-1-1 {
  width: 100%;
}

@media screen and (max-width: 960px) {
  .deckgrid::before {
    content: '1 .column.column-1-1';
  }
}

http://jsfiddle.net/2afaok1n/39/

编辑2：

还有一个砖石版本，不需要jQuery和一个简单的指令来使用它：angular-masonry-directive.这里是一个例子，它与另一个类似。

http://jsfiddle.net/xjnp97ye/1/

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!