CODEWITHSUNDEEP
angularjsangular-material
Moshe
Moshe

Reputation: 2684

Create a horizontal card with Angular Material2

I am trying to reproduce this codepen with Angular. However, Angular is not backwards compatible. How can this be done with 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>

Upvotes: 1

Views: 5954

Answers (2)

Moshe
Moshe

Reputation: 2684

For those who are interested in a horizontal card, just use flexbox and set the layout to row on the parent 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>

Upvotes: 2

Mohit Bajoria
Mohit Bajoria

Reputation: 505

Angular 1.x does not support material 2. If you want to use cards in material 2 then you can look here https://material.angular.io/components/component/card

Upvotes: -1

Related Questions