web-dev-qa-db-ja.com

Angular Material Collapsible Card

angular素材を使用して折りたたみ可能なカードを作成する方法はありますか？かなり人気のあるもののようですが、ここで適切なangular素材コンポーネント/設定を探しています： Angular Material-Card 、何も見つかりませんでした。

ありがとう！

angularangular-materialangular-material2
7
cobolstinks

Willが述べたように、拡張パネルを使用します。 https://material.angular.io/components/expansion/overview

それ以外の場合は、通常のAngularマテリアルカードを作成し、[非表示]品質または一部のCSS（表示：なし）で独自の折りたたみメカニズムを実装します。折りたたみ可能なカード。多くのコードは必要ありません。

このようなもの：

<mat-card>
  <mat-card-header>
     <mat-card-title style="font-size: 20px;">My collapsible card title</mat-card-title>
  </mat-card-header>

  <mat-card-content *ngIf="!collapsed">
    <p>This is some example text.</p>
     <p>This text will disappear when you use the action button in the actions bar below.</p>
  </mat-card-content>
  <mat-card-actions>
     <button mat-button (click)="collapsed=true">Collapse text</button>
     <button mat-button (click)="collapsed=false">Uncollapse text</button>
  </mat-card-actions>
</mat-card>

Stackblitz： https://stackblitz.com/edit/angular-95ygrr

10
mahval

angular material 7で最新の「ソリューション」が必要な場合は、mat-expansion-panel内部mat-card-contentおよびクラスを追加mat-elevation-z0：

<mat-card-content>
   <mat-expansion-panel class="mat-elevation-z0"> 
   ...
   </mat-expansion-panel>
</mat-card-content>
3
Tal Abziz

Tal Abzizが示唆したように、もっと派手なangularマテリアル折りたたみカードを実現する最良の方法は、mat-expansion-panelのmat-cardおよびスタイルmat-expansion-panel-header少しだけ絶対位置を持ち、上と右のCSSプロパティを0pxにします。行くぞ.

<mat-card style="margin-top:1em; margin-bottom:1em">
    <mat-card-header>
    <mat-card-title> Yemi Orokotan </mat-card-title>
    <mat-card-subtitle>Lagos, Nigeria</mat-card-subtitle>
    </mat-card-header>

<mat-card-content>

  <mat-expansion-panel class="mat-elevation-z0">
    <mat-expansion-panel-header style="position: absolute; right: 0px; top: 0px;"></mat-expansion-panel-header>

      <mat-form-field>
      <input matInput placeholder="Occupation">
      </mat-form-field>

      <mat-form-field>
      <input matInput placeholder="DOB">
      </mat-form-field>
  </mat-expansion-panel>

  </mat-card-content></mat-card>
1
Yemi Gatyee