我试图使用Angular Material模拟门户网站样式页面,该页面显示了一个卡片网格,每张卡片都应该可以展开以占据容器(即大部分可见页面)。当1张卡展开时,所有其他卡都被覆盖(不可见)。这些卡具有状态/数据,其当前主要包含在卡的组件中。
我正在寻找一个好的设计来支持这一点。我最初的想法是,我可以在两个地方使用相同的组件,一次作为全屏,一次作为卡的内容,结合ngIf来显示或隐藏组件。但我认为为了实现这一点,我必须将数据保留在组件之外,服务中,并且我试图避免进行此更改。任何建议表示赞赏。
答案 0 :(得分: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。
答案 1 :(得分:1)
我认为您应该创建一个模板卡,并将选定的卡数据绑定到它。 demo
答案 2 :(得分:0)
这是纯CSS方法
<mat-card class="card">
在您的CS文件中包括
.card{
position:fixed;
min-height:100%;
max-height:100%;
}