angular material mat-divider 中 inset 到底做了什么？

Question

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

分隔条是否为内嵌分隔条

但是它没有正确定义它，所以我想知道如果我们将它设置为 true.

它到底做了什么

Answer 1

mat-divider 插入属性

如您所知，它是 mat-divider 组件的一个 @Input()，其值是一个布尔值。 Mat divider 绘制一条线（它可以是水平或垂直的 vertical @Input），如果我们将 inset 设置为 true，它所做的只是 尝试换行旁边的元素.

如果您检查这些元素，您会发现可以将两个属性应用于该元素：

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

在下面的两张图片中，您可以了解将 inset 设置为 true 或 false 的不同之处。

如您所见，在左图中，mat-divider 的位置是 static，但另一方面，在右图中，没有 space s 在线和组件边缘之间（这里是一个 mat-card 组件）

---

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

很明显，分隔符的左侧有一个space (margin-left: '80px').

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