问题标签 [mat-card]

我想将人员信息的水平列表制作为卡片。我将在 Angular 中使用 matcard 组件的 ngfor。

相关专家.component.html：

相关专家.component.css：

相关专家卡组件：

我能够或多或少地使用brite force和重复代码创建它，但我想以两种方式优化我的代码：

1- 该网站也有阿拉伯语版本，因此需要 rtl 方向。但是，并非我卡内的所有组件都被翻转（例如人的图标和箭头图标）。什么会导致这个问题？

2- 我给出的尺寸以像素为单位。但是，我希望组件具有相对大小（百分比）。但是，一旦我使用百分比，卡片就会立即变形和不居中。

谁能帮我识别我在代码中犯的错误？将不胜感激。

谢谢你！

我正在使用 mat-card 我想将 mat-cards 放置为 2x1 即；在移动视图中每行 2 张卡片，在选项卡和笔记本电脑视图中每行 3 张卡片。

我按照这个例子使用了网格列表，这就是我想要实现的。我尝试使用相同的方法使用 mat-card 并且无法正常工作。

我使用了 flex-layout，但它不合适。关于如何实现这一目标的任何建议？

这样的事情我需要实现

我有带有动态背景图像的垫卡，我需要模糊此图像

我的 CSS

我有什么： 示例我有 什么我需要什么： 示例我需要什么 这是我添加此代码后得到的：

但是这种方法不适合我，因为伪元素不是 DOM 树的一部分，因此不会暴露任何可用于与它们交互的 DOM API

我试图让我对它获得的动态数据值做出响应。我使用以下代码使其具有响应性

我得到的输出是：

它对我传递的数据没有反应。我应该如何修改

我正在尝试按以下布局创建仪表板：

我正在使用 mat-card 并执行了以下操作：

谢谢

我正在开发一个仪表板，每个用户都可以在其中可视化他的“工作区”和“项目”（一个工作区可以有多个项目）。为此，我以这种方式创建了两个与 ngFor 结合的 mat-card：

第二张工作区卡片以与第一张卡片上的项目数量相等的空项目卡片数量开始。在附图中，我在第一个工作区有 7 个项目，可以看出，第二个工作区的项目从第 8 个“位置”开始，首先有 7 个空卡。

有没有办法重置第二个工作区卡的索引？这是正确的方法吗？

使用 Angular Material（版本 10），我想为 a 设置动画，mat-card以便在页面加载时它垂直扩展至其全高。

我已经使用悬停事件尝试了一些测试（如果这可行，我将研究如何在页面加载时应用过渡 - 这是另一个故事），使用以下 CSS：

不幸的是，这不起作用：

1. 当我将鼠标悬停时mat-card，卡片直接从 0 消耗到 100%，但根本没有过渡。顺便说一句，当我尝试从 Chrome 开发人员工具手动设置高度时，我意识到任何中间百分比（例如 50%）似乎都被视为 100%。只有 0% 与 100% 有区别。（但是，动画使用不透明度而不是高度，并将 100% 替换为 1）。

2. 我不能px在过渡中使用值，因为垫卡的实际高度可能会因显示的数据而异。

3. 即使我会使用px过渡值，它仍然不能完全工作：当我从 Chrome 开发者工具手动设置像素高度（例如“30px”）时，卡片本身的大小实际上是正确的，但它的内容显示在外面卡（我本来希望自己对mat-card内容进行某种剪辑mat-card）。

请你帮助我好吗？非常感谢！