角形材料垫子分隔器中的插入物到底有什么作用？

Question

mat-dividerAngular Material 中的属性之一是inset采用布尔值的输入。在文档中，它是这样引用的：

分隔线是否为嵌入式分隔线。

但它没有正确定义它，所以我想知道如果我们将其设置为它到底会做什么true.

Answer 1

mat-divider 插入属性

如您所知，它是一个以布尔值作为值的组件@Input()。mat-dividerMat diver 绘制一条线（它可以通过vertical@Input 水平或垂直），如果我们将 inset 设置为true，它所做的就是尝试用旁边的元素包裹这条线。

如果您检查这些元素，您确实会意识到两个属性可以应用于该元素：

• 位置：静态
• 边距：80px（可以应用于左侧、右侧或两者）

在下面的两个图像中，您可以了解设置如何inset彼此true不同false。

正如您所看到的，在左图中，mat-divider 的位置为static，但另一方面，在右图中，线条和组件边缘之间没有空格（这里是一个 mat-card 组件） ）

让我们一起检查另一个关于inset功能的好例子：

很明显，分隔线的左侧有一个空格（margin-left：'80px'）。

我在 StackBlitz中提供了一些代码，您可以查看更多。