web-dev-qa-db-ja.com

Angularマテリアル2md-cardレスポンシブ列

このレイアウトのAngular 2/4の例を探しています。2列のカード（左の列に2つ、右の列に1つ）から始める必要があります。ただし、画面の場合は小さいので、1つの列に折りたたむ必要があります。CSSでdivを使用して実行できますが、マテリアル2には簡単な方法が必要です。マテリアル1の例はたくさんあります。

このコードはAngular Material 1の回答から採用されていますが、機能していません（機能することを期待して、「行」を「列」に変更しましたが、3枚のカードで1つの列を取得します）：

angular material？ でカードのグリッドを作成するにはどうすればよいですか？

<div class='md-padding' layout="column" layout-wrap>
    <md-card flex="40" flex-sm="80">
      <md-card-content>
        <h2>Left Card 1</h2>
      </md-card-content>
    </md-card>

    <md-card flex="40" flex-sm="80">
      <md-card-content>
        <h2>Left Card 2</h2>
      </md-card-content> 
    </md-card>
</div>

<div class='md-padding' layout="column" layout-wrap>
    <md-card flex="40" flex-sm="80">
      <md-card-content>
        <h2>Right Column </h2>
      </md-card-content>
    </md-card>
</div>

答えから：「この例では、2枚のカード（それぞれ40％）があり、画面のサイズが-smに変わると、カードは80％になります。」

angularangular-materialangular-material2
5
beachCode

まず、アプリに@angular/flex-layoutパッケージを追加します。 "flex-layout" についてもっと読む。次に、app.module.tsインポートエントリにFlexLayoutModuleをインポートする必要があります。

import { FlexLayoutModule } from '@angular/flex-layout';

....
@NgModule({
    imports: [
        // other modules
        // .....
        FlexLayoutModule
    ],
    ....

その後、アプリで「flex-layout」を使用できます。前述のようにカードをレスポンシブにするには、次のテンプレートを使用できます。

<div fxLayout="row" fxLayout.xs="column">
    <md-card fxFlex="40%;" fxFlex.xs="80%">
        <md-card-content>
            <h2>Left Card 1</h2>
        </md-card-content>
    </md-card>

    <md-card fxFlex="40%;" fxFlex.xs="80%">
        <md-card-content>
            <h2>Left Card 2</h2>
        </md-card-content>
    </md-card>

    <md-card fxFlex="20%;" fxFlex.xs="80%">
        <md-card-content>
            <h2>Right Column </h2>
        </md-card-content>
    </md-card>
</div>

stackblitzデモ へのリンク。

6
Faisal

CSSフレックスボックスソリューションを見つけました。それでもAngularフレックスレイアウトの回答を希望しますが、今のところは問題ありません。正しい方向に向けてくれた@Faisalに感謝します。これにより2つ生成されます。最初の列に2行ある大画面の列。画面が小さい場合、レイアウトは3行の1列に変わります。

私はこの例に基づいてコードを作成しました： https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes

HTML：

<div id='main'>
    <div id='col1'>
        <article>article</article>
        <nav>nav</nav>
    </div>
    <aside>aside</aside>
</div>

CSS：

#main {
  min-height: 100px;
  margin: 0;
  padding: 0;
  display: flex;
  flex-flow: row;
}

#main > col1 {
  min-height: 100px;
  margin: 0;
  padding: 0;
  display: flex;
  flex-flow: column;
}

#col1 > article {
  margin: 4px;
  padding: 5px;
  border: 1px solid #cccc33;
  border-radius: 7pt;
  background: #dddd88;
  flex: 3 1 60%;
  order: 2;
}

#col1 > nav {
  margin: 4px;
  padding: 5px;
  border: 1px solid #8888bb;
  border-radius: 7pt;
  background: #dddd88;
  flex: 1 6 20%;
  order: 1;
}

#main > aside {
  margin: 4px;
  padding: 5px;
  border: 1px solid #8888bb;
  border-radius: 7pt;
  background: #ccccff;
  flex: 1 6 20%;
  order: 3;
}

/* Too narrow to support three columns */
@media all and (max-width: 640px) {
  #main, #page {
      flex-direction: column;
  }

  #col1 > article, #col1 > nav, #main > aside {
  /* Return them to document order */
      order: 0;
  }

  #main > col1, #main > aside {
      min-height: 50px;
      max-height: 50px;
  }
}
2
beachCode

私にはまったく同じ要件があり、マットカードを含むmat-grid-listを使用してこれを行いました。 mat-grid-listを使用してリストをレスポンシブにし、番号を調整できるようにしました。画面サイズに応じた行の要素の数。これが私がしたことです：

<mat-grid-list [cols]="breakpoint" rowHeight="4:5" (window:resize)="onResize($event)" >
  <mat-grid-tile *ngFor="let product of pagedList">
    <div>
      <mat-card class="example-card">
          mat-card content here..
      </mat-card>
    </div>
  </mat-grid-tile>
</mat-grid-list>

コンポーネントは次のようになります。

  pagedList: Product[]= [];
  breakpoint: number = 3;  //to adjust to screen

  ngOnInit() {
        this.breakpoint = (window.innerWidth <= 800) ? 1 : 3;
        this.pagedList = <SOME LIST>;
    });
  }

  onResize(event) { //to adjust to screen size
    this.breakpoint = (event.target.innerWidth <= 800) ? 1 : 3;
  }

また、ページネーションを追加することもできます。ここで私の答えを確認してください マットカードで角度のあるマテリアルのページ付けを使用する方法は？

0
Sachin Parashar