Angular 如何创建带有详细信息抽屉的角形卡片？

我们正在尝试在Angular 7中使用材质设计实现一个瓷砖/卡片布局，它具有与许多现代图像搜索引擎类似的功能

这是一个

创建平铺并不是那么困难，但是创建抽屉是因为，正确的术语以及单击时显示在其下方的平铺的详细信息更难

当然，当你考虑到响应性时。缩小示例搜索查询的屏幕时，当窗口要缩小以适合屏幕时，选定图像右侧的美丽图像将移动到详细信息抽屉下第一行左侧的位置

由于大多数搜索引擎都实现了这样的功能，我们想知道是否有一个库可以为我们提供这些功能

我试着寻找一天中最好的部分，但到目前为止，我还没有找到一个合适的候选人，要么是因为我不知道合适的搜索词，要么是因为它不存在

我所发现的与它所得到的非常接近：

如果没有你知道的图书馆，什么是一个好的起点

我知道这听起来有点像请帮我编码，但我们已经在这上面花了太多的时间和几个人。我们就是找不到一个好的起点。

变量$cell=$'.card'； //单击卡片时打开和关闭卡片 $cell.find'.js expander'.clickfunction{ var$thisCell=$this.closest'.card'； 如果$thisCell.hasClass“已折叠”{ $cell.not$thisCell.removeClass'is-expanded'。addClass'is-collapsed'。addClass'is-inactive'； $thisCell.removeClass'is-collapsed'。addClass'is-expanded'； 如果$cell.not$thisCell.hasClass'is-inactive'{ //无所事事 }否则{ $cell.not$thisCell.addClass'is-inactive'； } }否则{ $thisCell.removeClass'is-expanded'。addClass'is-collapsed'； $cell.not$thisCell.removeClass'is-inactive'； } }; //单击“交叉”时关闭卡 $cell.find'.js collapser'.clickfunction{ var$thisCell=$this.closest'.card'； $thisCell.removeClass'is-expanded'。addClass'is-collapsed'； $cell.not$thisCell.removeClass'is-inactive'； }; * { 框大小：边框框； } 身体{ 背景：eceef1； 字体系列：“Slabo 27px”，衬线； 颜色：333a45； } .包装纸{ 保证金：5em自动； 最大宽度：1000px； 背景色：fff； 盒影：0.5px 0 rgba0,0,0,0.06； } .标题{ 填充：30px 30px 0； 文本对齐：居中； } .标题{ 保证金：0； 文本转换：大写； 字号：2.5em； 字号：500； 线高：1.1； } .header\uuu副标题{ 保证金：0； 字号：1.5em； 颜色：949fb0； 字体系列：“昨天”，草书； 字号：500； 线高：1.1； } .卡片{ 填充：15px； 显示器：flex； 柔性流：行换行； } .卡片{ 利润率：15px； 宽度：calc100%/3-30px； 过渡：所有0.2秒缓进缓出； } @媒体屏幕和最大宽度：991px{ .卡片{ 宽度：calc100%/2-30px； } } @媒体屏幕和最大宽度：767px{ .卡片{ 宽度：100%； } } .card：悬停。card\uuuu内部{ 背景色：1abc9c； 变换：scale1.05； } .卡丁{ 宽度：100%； 填充：30px； 位置：相对位置； 光标：指针； 背景色：949fb0； 颜色：eceef1； 字号：1.5em； 文本转换：大写； 文本对齐：居中； 过渡：所有0.2秒缓进缓出； } .card__内部：之后{ 过渡：所有0.3秒的缓进缓出； } .card__inner.fa{ 宽度：100%； 边缘顶部：0.25em； } .卡扩展器{ 过渡：所有0.2秒缓进缓出； 背景色：333a45； 宽度：100%； 位置：相对位置； 显示器：flex； 证明内容：中心； 对齐项目：居中； 文本转换：大写； 颜色：eceef1； 字号：1.5em； } .card\u扩展器.fa{ 字体大小：0.75em； 位置：绝对位置； 顶部：10px； 右：10px； 光标：指针； } .card\u扩展器.fa:悬停{ 不透明度：0.9； } .card.is-collapped.card__内部：之后{ 内容：； 不透明度：0； } .card.is-collapped.card\u扩展器{ 最大高度：0； 最小高度：0； 溢出：隐藏； 边际上限：0； 不透明度：0； } .card.is-expanded.card\uu内部{ 背景色：1abc9c； } .card.is-expanded.card__内部：之后{ 内容：； 不透明度：1； 显示：块； 身高：0； 宽度：0； 位置：绝对位置； 底部：-30px； 左：calc50%-15px； 左边框：15px实心透明； 右边框：15px实心透明； 边框底部：15px实心333a45； } .card.is-expanded.card\uuu-inner.fa:before{ 内容：\f115； } .card.is-expanded.card\u扩展器{ 最大高度：1000px； 最小高度：200px； 溢出：可见； 边缘顶部：30px； 不透明度：1； } .card.展开：悬停.card\uu内部{ 变换：scale1； } .card.is-inactive.card\u内部{ 指针事件：无； 不透明度：0.5； } .card.处于非活动状态：悬停.card\u内部{ 背景色：949fb0； 变换：scale1； } @媒体屏幕和最小宽度：992px{ .卡片：第n种类型 3n+2.卡扩展器{ 左边距：calc-100%-30px； } .卡：第n种类型3n+3.卡扩展器{ 左边距：calc-200%-60px； } .卡片：第n种类型3n+4{ 清除：左； } .卡扩展器{ 宽度：calc300%+60px； } } @媒体屏幕和最小宽度：768px，最大宽度：991px{ .卡：第n种类型2n+2.卡扩展器{ 左边距：calc-100%-30px； } .卡片：第n种类型2n+3{ 清除：左； } .卡扩展器{ 宽度：calc200%+30px； } } 扩展卡栅 使用Flexbox 卡片 扩展器 卡片 扩展器 卡片 扩展器 卡片 扩展器 卡片 扩展器 卡片 扩展器 卡片 扩展器 卡片 扩展器 卡片 扩展器

---

我想这可能会有点帮助哇，是的，这肯定看起来很合适！它是针对angular.js的，但是如果你添加它作为一个答案，我会将它标记为suchNow，随着设计的到位，使用AngularJS管理css类会更容易。我们使用angular 7，AngularJS非常过时，但尽管如此，这个例子可以帮助我们开始我认为StackOverflow希望你不要仅仅链接到互联网源，但也要在你的帖子中添加代码，当链接消失时，它将永远不会消失@DaniëlTulp