使用Angular Material2创建水平卡片

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

角1.x中不支持材料2.如果你想在材料使用; 2，卡，那么你可以看看这里https://material.angular.io/components/component/card