如何只用CSS设计Angular响应式组件？

Posted 2023-02-24

我是 设计Angular组件主布局 by default it is responsive其中包含以下组件...

1. 导航组件
2. 侧栏组件
3. 主要成分
4. 容器组件

问题如下图所示...

我的app.component.html的结构是

<app-navbar></app-navbar>
<app-main>
   <app-sidebar> </app-sidebar>
   <app-container> 
      <app-card> </app-card>
   </app-container>
   <app-container>  
      <app-card> </app-card>
   </app-container>
</app-main>

我这里也在使用内容投影。每次当我在重复使用 <app-container> 将被视为新的 row 内的主组件。现在我所面临的问题是，当我使用了 <app-container> 第二次，它显示在侧栏组件之外，就在下面。

我想显示每一个 <app-container> 恰好在侧栏组件的右侧。每次新的组件必须显示为新的行。

注意：目前，我没有使用任何CSS框架，我需要在不使用任何CSS框架的情况下解决这个问题，只使用行CSS类。

我在这里分享项目链接 Stackblitz链接

我在这里做的是如何在Angular中设计我们自己的组件，有谁能给我建议如何把这个也做为响应式的最佳实践。

答案

我建议你把所有的内容都投射到你的sidenav里面，然后用一点CSS就可以得到你想要的东西。

看一下 该演示. 我已经添加了你需要的CSS。