web-dev-qa-db-ja.com

angular materialのカードのグリッドを作成しようとしています

私は角材を使ったカードのグリッドを作ろうとしています。そこで、md-grid-listとmd-cardのディレクティブを使用しています。しかし、結果はかなりいものであり、md-row-heigh（比率）がどのように機能するかを理解するのは確かではありません。ドキュメントはありますが、多くは語っていません。

ここに私がこれまでやってきたことがあります： http://codepen.io/stunaz/pen/qdQwbq 、私はmd-gridが-listはここで適切です。

  <md-grid-list md-cols-sm="1" md-cols-md="2" md-cols-gt-md="6" md-row-height="300px" md-Gutter="12px" md-Gutter-gt-sm="8px">

<md-grid-tile class="gray" ng-repeat="user in users">
  <md-card>
    <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>
</md-grid-tile>

私はあらゆる種類の助けを受け入れています。

angularjsmaterial-designgrid-layoutangular-material
21
storm_buster

同じ効果を得るには、md-grid-listの代わりに Flex Box を使用できます。

  <div class='md-padding' layout="row" flex>
     <div layout="row" flex>
        <div class="parent" layout="column" ng-repeat="user in users" flex>
            ... Your content here
        </div>
     </div>
  </div>

固定された数のカードを一列に並べたこの例を見てください。

http://codepen.io/anon/pen/bdQJxy

Wrap layout を使用したレスポンシブな例

http://codepen.io/anon/pen/MwzRde

これがあなたが望んでいたことを願っています。

32
Italo Ayres

このHTMLマークアップを使用し、mdカードのフレックス番号を変更して要件を満たします。

<div class='md-padding' layout="row" layout-wrap>
                    <md-card flex="15" ng-repeat ="n in [1, 2, 3, 4, 5, 6, 7, 8, 9, 0]">
                        <img ng-src="http://i2.wp.com/celebsbios.com/wp-content/uploads/2015/12/Halsey-Singer-3.jpg?resize=150%2C150" class="md-card-image" alt="Washed Out">
                        <md-card-title>
                            <md-card-title-text>
                                <span class="md-headline">Action buttons</span>
                            </md-card-title-text>
                        </md-card-title>
                        <md-card-content>
                            <p>
                                The titles of Washed Out's breakthrough song and the first single from Paracosm share the
                                two most important words in Ernest Greene's musical language: feel it. It's a simple request, as well...
                            </p>
                            <p>
                                The titles of Washed Out's breakthrough song and the first single from Paracosm share the
                                two most important words in Ernest Greene's musical language: feel it. It's a simple request, as well...
                            </p>
                            <p>
                                The titles of Washed Out's breakthrough song and the first single from Paracosm share the
                                two most important words in Ernest Greene's musical language: feel it. It's a simple request, as well...
                            </p>
                        </md-card-content>
                        <md-card-actions layout="row" layout-align="end center">
                            <md-button>Action 1</md-button>
                            <md-button>Action 2</md-button>
                        </md-card-actions>
                    </md-card>
                </div>
1
Umair Hamid