anglejs – 试图拥有带有角材料的卡格

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

导读：我一直在试图使用角材料的网格。所以我正在使用指令md-grid-list和md-card。但结果是相当丑陋的，我不知道md-row-heigh(ratio)如何工作，我有文档，但并没有说得太多。这是我迄今为止所做的一切： http://codepen.io/stunaz/pen/qdQwbq，我试图有一个响应格

我一直在试图使用角材料的网格。所以我正在使用指令md-grid-list和md-card。但结果是相当丑陋的，我不知道md-row-heigh(ratio)如何工作，我有文档，但并没有说得太多。

这是我迄今为止所做的一切：
http://codepen.io/stunaz/pen/qdQwbq，我试图有一个响应格局的卡，甚至不确定如果md网格列表是适当的在这里。

<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>

我有任何帮助。

您可以使用 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 layout

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

希望这是你想要的。

（编辑：李大同）

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