Angular Material md-card无响应

时间:2016-03-25 16:30:21

标签: javascript css angularjs flexbox angular-material

我正在尝试使用md-card创建一个文章卡网格。在大型显示器上,我希望它是3卡宽,平板电脑大小2卡宽,智能手机1卡宽。虽然图像尺寸不完全相同,但我希望所有的卡尺寸都相同,而不会扭曲图像。

我不知道如何实现这一目标。我非常想避免硬编码卡片的设置宽度和高度,并希望它们与显示器的尺寸一样流畅。我在想我需要使用flex属性?

这就是现在的样子:

enter image description here enter image description here

以下是我的卡片视图的结构:

<md-content>
    <section class="cards" ng-if="view === 'Articles'">
            <div layout="row" layout-sm="column" layout-align="center" layout-wrap>

              <md-card flex="33" ng-repeat="article in home.articles | filter:searchCard">
                <img ng-src="{{article.imagePath}}" alt="Test image">
                <div class="card_content">
                    <a href="/article/{{article.id}}"><h3 class="md-subhead article_card_title">{{article.title}}</h3></a>
                    <div class="card_agency">
                        <span class="agency_name">{{article.agency}}</span>
                    </div>
                </div>
              </md-card>

              <h1 class="md-display-1" ng-show="(home.articles | filter:searchCard).length == 0">No results!</h1>
            </div>
        </section>
</md-content>

任何有关如何使这些卡片响应的见解都会非常受欢迎!

2 个答案:

答案 0 :(得分:2)

您要求所有图像可能具有不同的尺寸,同时保持它们所在元素的大小。

想一想。 如果你有一块比萨饼,它对你的盘子来说太大了,额外的披萨会去哪里?离开你的盘子。除非你想“扭曲”你的披萨,折叠它,然后它会适合!我想你能做的另一件事就是切掉那些不适合的比萨饼(作物),然后就可以了! 如果我们收缩披萨,这会引起问题,因为它适合盘子,但盘子里没有完全披萨。

我使用上面的例子,因为从技术上讲,你不可能做你所要求的。 我可能误解了你想要的东西。

我建议使用md-grid-list并将md-card指令放在网格中。 为网格提供所需的布局,并从卡片中删除所有样式。

我在尝试使用md-card进行扩展时遇到了类似的问题。相反,使用md-grid限制它更容易使用。

 <md-content layout-padding>
  <md-grid-list md-cols="2" md-gutter="0px" md-row-height="5.8:10">
    <md-grid-tile ng-repeat="cat in catalogs">
      <md-card md-ink-ripple>
        <catalog-select type="cat">
        </catalog-select>
      </md-card>
    </md-grid-tile>
  </md-grid-list>
</md-content>

注意:catalog-select是一个自定义指令,它引用了templateUrl,但我会粘贴它们携带的代码,即:

<md-card-content>
  <img ng-src="{{ type.img }}"/>
    <md-card-title>
      <md-card-title-text>
        <h4> {{ type.year }} </h4>
        <h5> {{ type.title }} </h5>
      </md-card-title-text>
    </md-card-title>
  </md-card-content>

我希望我的代码能够将卡片2连成两行(或两列):md-cols =“2” 有关如何调整md-grid-list指令布局的良好文档,如何:https://material.angularjs.org/latest/api/directive/mdGridList

希望这至少有帮助。 在md-card上使用flex =“33”似乎可以工作,但md-card的主要功能是看起来不适合布局。他们为后者创建了网格列表。

希望这有帮助。

答案 1 :(得分:0)

这比你想象的要简单。由于您希望卡片保持其原始大小(因此它们不会扭曲图像),您不应设置弹性百分比,而是让它们根据需要增长和缩小。要获得所需效果,请尝试以下操作:

<div layout="row" layout-align="center stretch" layout-wrap>

  <md-card ng-repeat="article in home.articles | filter:searchCard">
   ...
  </md-card>

</div>

卡片只会占用他们需要的空间,如果它们溢出了行,它们将因为layout-wrap属性而被包装。这并不能确保您在桌面上总是有3张卡片,平板电脑上有2张卡片,移动设备上有1张卡片,但是可以确保卡片总是有足够的空间放在屏幕上。

如果你真的想要这种布局,那么这样做的方法是:

<div layout="row" layout-align="center stretch" layout-wrap>

  <md-card flex="95" flex-gt-sm="45" flex-gt-md="30" ng-repeat="article in home.articles | filter:searchCard">
   ...
  </md-card>

</div>

由于卡片有边距,因此您必须设置下一个较小的弹性百分比。因此,不是flex = 33%,而是使用30%而不是50%使用45%(或者手动将最大宽度和弹性基础设置为CSS文件的47%左右)。

希望这有帮助。