web-dev-qa-db-ja.com

レスポンシブ（列数が変化する）角材カードグリッドを作成する方法

Bootstrapグリッドのように動作するAngular-Materialカードのグリッドを作成しようとしています。理想的には、カードは小さな画面幅に対して全幅で、大きなブレークポイントで2列にジャンプします。 。

2枚のカードのデモ

問題は、A-Mが各カードの列を作成することです。各ブレークポイントの列数を指定する方法を理解していません。

5枚のカードのデモ

私が使用しているマークアップの基本は次のとおりです。最初のブレークポイントで行から列にカードレイアウトを取得します。

<div ng-app layout="column" layout-gt-sm="row" class="layout-sm-column layout-row">
  <div flex class="flex" ng-repeat="i in [1,2,3,4,5] track by $index">
    <md-card>

SOに関する同様の質問 が既にありますが、受け入れられた答えは、カスタムCSSを使用し、カードが流動的な幅ではないため、満足のいくものではありません。他の同様の例は見つかりませんでした。

Angularで2枚ごとにループしてスタックセットを作成できると思いますが、それは不必要に煩雑に思えます。Materialはより良い解決策を提供すると考えなければなりません。カードの高さが異なるページ。素材は石積みのようなフレックスレイアウトに合わせて調整されているようで、これに固執したい。

ありがとう。

angularjsresponsive-designmaterial-designangularjs-material
17
isherwood

マテリアル Grid-List を使用できます。これにより、カスタムのcol-spanが可能になり、幅が変更されたときに変更をアニメーション化します。

サイトからサンプルを調整し、コンテンツにmd-cardを追加しました。 layout-fillにmd-cardを追加してください。サンプルを列数に合わせて簡単に調整できます。

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

あなたの5枚のカードのサンプルも合わせました。 Grid-Listを使用するにはカードの高さを知る必要がありますが、小さな画面で100％の高さを簡単に達成できます。行に比率または固定CSS高さを使用でき、コンテンツを柔軟な方法で表示するのはカードの仕事です。

<md-grid-list ng-app="app" layout-fill flex
    md-cols-sm="1"
    md-cols-md="2"
    md-cols-gt-md="5"
    md-row-height-sm="100%"
    md-row-height="600px"
    md-Gutter="8px">
    <md-grid-tile ng-repeat="i in [1,2,3,4,5] track by $index">
        <md-card layout-fill>

http://jsfiddle.net/2afaok1n/34/

編集：

代わりにある種のスタッガードグリッドを探している場合は、ライブラリを追加する必要があります： angular-deckgrid 、グリッドレイアウトを提供します。材料。 angular-masonry とは異なり、このライブラリには依存関係がありません。 jQueryなどの追加について心配していない場合は、angular-masonryも使用できます。

<div ng-app="app" ng-controller="DeckController" flex layout="column">
   <deckgrid class="deckgrid" flex source="data">
       <md-card>

デッキレイアウトの重要な部分は、 CSS構成 です。これを使用して、列の数と幅を構成します。角材smブレークポイントのメディアクエリを使用して、単一列レイアウトに切り替えました。

.deckgrid::before {
  content: '4 .column.column-1-4';
  font-size: 0;
  visibility: hidden;
}

.deckgrid .column {
  float: left;
}

.deckgrid .column-1-4 {
  width: 25%;
}

.deckgrid .column-1-1 {
  width: 100%;
}

@media screen and (max-width: 960px) {
  .deckgrid::before {
    content: '1 .column.column-1-1';
  }
}

http://jsfiddle.net/2afaok1n/39/

編集2：

JQueryを必要としない石工バージョンと、それを使用するための単純なディレクティブもあります： angular-masonry-directive 。次に例を示します。他の例と同様に機能します。

http://jsfiddle.net/xjnp97ye/1/

18
kuhnroyal

あなたの質問を正しく理解したら、このコードを使用して、helloを好きなものに置き換えてください

<md-grid-list md-cols-lg="12" md-cols-gt-lg="15" md-cols-xs="3" md-cols-sm="6" md-cols-md="9" md-row-height-gt-md="1:1" md-row-height-md="1:1" md-row-height="1:2" md-Gutter-gt-md="16px" md-Gutter-md="8px" md-Gutter="4px">
            <md-grid-tile ng-repeat="contact in contacts" md-colspan="3" md-rowspan-gt-sm="4" style="background:red;">
                hello
            </md-grid-tile>
        </md-grid-list>
2
Rishabh Jain

私が質問を正しく理解していれば、これは魅力のように機能します：

<body ng-app="app" ng-cloak>
  <div layout="column" layout-gt-sm="row" layout-wrap>
  <div flex="25" flex-gt-sm="50" ng-repeat="i in [1,2, 3, 4, 5] track by $index">
    <md-card>
     <!--  You code-->
    </md-card>
  </div>
  </div>
</body>

複数のブレークポイントを持つプランカー：（ブラウザーウィンドウではなく、内部ウィンドウのサイズを変更します） http://plnkr.co/edit/8QPYdzLD8qzEbdz5sesE?p=preview

プランカーは、異なる高さのカードを表示するように更新されました。
2つのディレクティブが作成されたため、すべてのカードの最大の高さがメモリに保持され、これがすべてのカードに適用されます。

1
gr3g
<div  ng-repeat="i in [1,2, 3, 4, 5] track by $index" flex-xs="100" flex-sm="50" flex-md="50" flex="33">
<md-card>

  <md-card-title >
    <md-card-title-text >
      <span class="md-headline">Demo Title {{i}}</span>
      <span class="md-subhead">Demo Description</span>
    </md-card-title-text>    
  </md-card-title>
</md-card>
</div>

この例を確認してください： http://codepen.io/ktn/pen/jqNBOe

1
kTn