Question

我目前正在将徽章添加到我的应用程序菜单的按钮上，该按钮已经可以正常使用了。我想显示用户仍然需要看的通知数量：

<span matBadge="4" matBadgeColor="warn">Look at these notifications!</span>

在手机上，菜单隐藏在汉堡图标的后面。我不希望用户在此图标上方显示他有多少个通知。我只想让他知道他有一些，当他打开菜单时，他将在各个按钮上看到带有通知编号的徽章。

我的问题是空徽章总是被隐藏。我似乎无法像这样显示它：

<span matBadge="" matBadgeColor="warn">Look at these notifications!</span>

是否完全不可能显示空徽章？我是否缺少某些东西，或者是设计使然？

Answer 1

使用[matBadgeHidden] = "true"动态控制matBadge的可见性，例如：

<span [matBadgeHidden] = "commentCount == 0"  [matBadge]="commentCount" matBadgeColor="warn" matBadgeOverlap="false">Comments</span>

Answer 2

您将不得不为自己添加一个类以隐藏文本。垫子徽章没有隐藏内容的功能。空格或 无效：

.mat-badge.hide-text .mat-badge-content {
  color: transparent;
}

<span matBadge="0" matBadgeColor="warn" class="hide-text">Look at these notifications!</span>

更新：

如果您真的不想使用类，则可以使用⁠。这就是所谓的WORD JOINER。里程可能因Angular版本而异：)，但这会打印一个空的徽章

<span matBadge="&#8288;" matBadgeColor="warn">Look at these notifications!</span>

Answer 3

在查看source for the badge component时，由于线条的缘故，这似乎是设计使然的：

'[class.mat-badge-hidden]': 'hidden || !_hasContent',
...
this._hasContent = value != null && `${value}`.trim().length > 0;

看来您可以使用matBadge=""来显示一个空的徽章来解决此问题。

Answer 4

您可以在CSS下方添加以显示空徽章。

.mat-badge-hidden .mat-badge-content:empty {
  display: inline-block;
}

看看下面的例子。

https://stackblitz.com/edit/angular-mat-badge-with-pipe

角材料-空徽章

4 个答案: