angular 材料垫分隔器中的插图到底是什么？

Question

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

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

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

Answer 1

mat-divider 插入属性

如您所知，它是mat-divider组件的@Input() ，它采用 boolean 作为值。 Mat divider 绘制一条线（它可以是水平的或垂直的，使用vertical的@Input），如果我们将 inset 设置为true ，它所做的只是尝试用它旁边的元素包裹线。

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

• position: static
• 边距：80px （它可以应用于左侧、右侧或两者）

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

如您所见，在左图中，mat-divider 的 position 为static ，但另一方面，在右图中，线条和组件边缘之间没有空格（这里是 mat-card成分）

---

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

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

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