Question

我正在尝试使用Angular重现此codepen。但是，Angular不向后兼容。如何用Angular完成？

<div ng-controller="AppCtrl" class="carddemoBasicUsage" ng-app="MyApp">

  <md-content class="md-padding">

    <md-card layout="row"
             layout-sm="column">
      <div flex-gt-sm="33"
           layout-align="center center"
           layout="column">
        <img src="http://i.imgur.com/2uL6DQ8.jpg"
             flex
             class="md-card-image">
      </div>
      <div layout="column" flex>
        <md-card-content flex>
          <h2 class="md-title">Paracosm</h2>
          <p>
            lorem ipsum
          </p>
        </md-card-content>
        <div class="md-actions" layout="row" layout-align="end center">
          <md-button>Action 1</md-button>
          <md-button>Action 2</md-button>
        </div>
      </div>
    </md-card>
    <md-content>
</div>

Answer 1

对于那些对水平卡感兴趣的人，只需使用flexbox并将布局设置为父div上的行。

    <md-card>
        <md-card-header>
            <md-card-title> Title </md-card-title>
            <md-card-subtitle> Subtitle</md-card-subtitle>
        </md-card-header>
        <div fxLayout="row">
        <img md-card-image src="" fxFlex="25">
            <span fxFlex="10"></span>
        <md-card-content fxFlex="65">
            <p>
               content
            </p>
        </md-card-content>
        </div>
        <md-card-actions>
            <button md-button>Action 1</button>
            <button md-button>Action 2</button>
        </md-card-actions>
    </md-card>

Answer 2

Angular 1.x不支持素材2.如果你想在素材2中使用牌，那么你可以看看https://material.angular.io/components/component/card

使用Angular Material2创建水平卡片

2 个答案: