web-dev-qa-db-ja.com

angular material？

Ng-repeatを使用して、行ごとに3枚のカードのグリッドを作成しようとしています。スコープにアタッチされたjavascriptオブジェクトの通常の配列があります。以下のコードは、すべてのカードに新しい行を作成します。

<div layout="row" ng-repeat='post in posts' layout-fill="" layout-align="">
<md-card>
  <md-card-content>
    <h2 class="md-title">{{post.title}}</h2>
    <p>
      {{post.summary}}
    </p>
  </md-card-content>
  <div class="md-actions" layout="row" layout-align="end center">
    <md-button>View More</md-button>
  </div>
</md-card>
<br>

enter image description here

アレイを反復処理して、3行のカードを表示するにはどうすればよいですか？ この投稿 と この投稿 を見ましたが、 角形素材 にどのように適用されるかわかりません

javascriptangularjsmaterial-designangular-material
15
Connor Leech

あなたが望むものに似たものを作成しました。 md-cardは、layout-wrapを持つdiv内にラップされます。 divは読み取り後に動的に生成されます。

コードは次のとおりです。

<div class='md-padding' layout="row" layout-wrap>
    <md-card style="width: 350px;" ng-repeat="user in users">
      <img src="http://placehold.it/150x150" class="md-card-image" alt="user avatar">
      <md-card-content>
        <h2>{{user}}</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
      </md-card-content>
      <div class="md-actions" layout="row" layout-align="end center">
        <md-button>Save</md-button>
        <md-button>View</md-button>
      </div>
    </md-card>
  </div>

カードの幅はインラインスタイリングで調整できます。

21
user2719890

これが必要なだけです。 3列のレイアウト機能のみを使用した、より包括的なソリューションを次に示します。

<md-content class="md-padding" layout="row" layout-wrap>
    <div flex="33" ng-repeat="i in [1,2,3,4,5,6,7]">
        <md-card>
            // ...
        </md-card>
    </div>
</md-content>

カード ラップする必要があります 正しいサイズのdiv内で、マージンを制御し、オーバーフローを回避します。

4
Jaime Gómez

素材/角度に準拠するには、mdカードにflex attrを使用する必要があります。 Flex attrは、親について比例した幅を提供します。

<div class='md-padding' layout="row" layout-wrap>
    <md-card flex="40" flex-sm="80" ng-repeat="user in users">
      <img src="http://placehold.it/150x150" class="md-card-image" alt="user avatar">
      <md-card-content>
        <h2>{{user}}</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
      </md-card-content>
      <div class="md-actions" layout="row" layout-align="end center">
        <md-button>Save</md-button>
        <md-button>View</md-button>
      </div>
    </md-card>
  </div>

この例では、2枚のカード（それぞれ40％）があり、画面が-smにサイズ変更されると、カードは80％になります。

3
sGambolati