将边距 letf 添加到 Angular 材料中的徽章 - Javascript

在 Angular Material 库中使用徽章是很常见的。徽章通常用于表示未读消息或某种状态。但是，有时需要将徽章与其他元素分开，因此需要添加 margin 或 padding。在本文中，我们将向您展示如何在 Angular Material 中添加 left margin 或 padding。

在 Angular Material 中创建一个带有徽章的元素

首先，我们需要在 Angular Material 中创建一个带有徽章的元素。对于该示例，我们将使用 mat-badge 和 mat-icon 元素。以下是示例代码：

<mat-icon matBadge="4" matBadgeSize="small">notifications</mat-icon>

在这个例子中，我们添加了一个显示数字 4 的徽章，并设置徽章大小为 small。notifications 是我们要显示的图标。但是，这个元素紧贴在它前面的元素旁边，没有 margin 或 padding。

使用 CSS 添加 left margin 或 padding

要添加 left margin 或 padding，我们需要使用 CSS。我们可以使用内联样式或在 CSS 文件中设置样式。

添加内联样式

首先，我们将添加内联样式：

<mat-icon matBadge="4" matBadgeSize="small" style="margin-left:20px;">notifications</mat-icon>

在这个例子中，我们添加了 margin-left:20px; 样式。请注意，如果您需要添加 padding，只需将 margin 替换为 padding。

在 CSS 文件中设置样式

另一种方法是在 CSS 文件中设置样式：

.mat-icon-with-badge {
  margin-left: 20px;
}

<mat-icon matBadge="4" matBadgeSize="small" class="mat-icon-with-badge">notifications</mat-icon>

在这个例子中，我们将样式添加到 mat-icon-with-badge 类中。然后，我们在 mat-icon 元素中添加了该类。这将添加 margin-left:20px; 样式。

结论

以上就是将边距 letf 添加到 Angular 材料中的徽章的两种方法。我们可以使用内联样式或在 CSS 文件中设置样式。

如果您需要添加 padding，只需将 margin 替换为 padding。此外，您可能需要添加其他样式属性，例如 top、right 或 bottom。

希望这篇文章对您有所帮助！