Question

我需要设计一个父容器，它具有固定长度的子列表项（150像素）。

1）当调整父容器的大小时，子项列表项应该从左向右流动，并且应该进入New Row＆amp;子列表项之间的空间应均匀分布。

请告诉我如何使用角度材料实现这一目标。请参阅下面的图片了解我的要求。

我尝试使用以下代码实现此功能。

<div layout-padding layout-fill layout="row" layout-wrap layout-align="space-around start">

    <div ng-repeat="student in students"
         style="width: 150px; height: 52px;line-height: 52px;min-height: 52px;max-height: 52px;
            margin:8px;padding: 0px; border: solid 1px"
         draggable="true">

        {{student.name}}

    </div>

</div>

但这就是我所拥有的

Answer 1

这将是一个全新的控制，你需要使用角度材料的“碎片”创建自己的。例如，您可以使用角度材质md按钮创建列表项，如果要滚动则托管md内容中的所有按钮，并使用md-layout对齐项目。显然，最重要的部分是控件的样式，以获得角度材料的外观和感觉。

这里的要点是您需要创建自定义控件。我建议您创建自己的控制模块并添加必要的指令，服务以便您控制工作。

Answer 2

感谢@MikeHarrison先生......我已经编辑过我的代码，如下所示＆amp;结果正是我想要的。！

<div class="md-padding" layout="row" layout-fill layout-wrap layout-align="start start">

    <md-list-item ng-repeat="student in students" draggable="true" flex-xs="100" flex-sm="50" flex-md="33"
                  flex-gt-md="25" class="md-3-line" ng-click="alert('hi')">

        <img src="../../_resources/images/boy_real.jpg" class="md-avatar"/>

        <div class="md-list-item-text">
            <h3> {{student.name}} </h3>
            <h4> {{student.roll}} </h4>
            <p> {{student.desc + ' guy'}} </p>
        </div>

        <md-divider md-inset></md-divider>

    </md-list-item>

</div>

并且浏览器中的结果是

并且移动设备中的结果是

角度材料清单设计

2 个答案: