如何将Angular Material mat-card切换到全屏

Question

我试图使用Angular Material模拟门户网站样式页面，该页面显示了一个卡片网格，每张卡片都应该可以展开以占据容器（即大部分可见页面）。当1张卡展开时，所有其他卡都被覆盖（不可见）。这些卡具有状态/数据，其当前主要包含在卡的组件中。

我正在寻找一个好的设计来支持这一点。我最初的想法是，我可以在两个地方使用相同的组件，一次作为全屏，一次作为卡的内容，结合ngIf来显示或隐藏组件。但我认为为了实现这一点，我必须将数据保留在组件之外，服务中，并且我试图避免进行此更改。任何建议表示赞赏。

Answer 1

我花了一些时间研究它，一个简单的解决方案是根据某些条件切换卡上的其他类。即：

<mat-card [ngClass]="{'fullscreen': isCardExpanded}"></mat-card>

.mat-card {
  position: fixed;
  transition: all 1s linear;
}

.fullscreen {
  background-color: red;
  width: 100%;
  height: 100%;
}

看看这个working demo。

Answer 2

我认为您应该创建一个模板卡，并将选定的卡数据绑定到它。 demo

Answer 3

这是纯CSS方法

<mat-card class="card">

在您的CS文件中包括

.card{
  position:fixed;
  min-height:100%;
  max-height:100%;      
 }