浮动标签图标

Question

是否可以通过语义用户界面获得类似facebook的通知图标？即带有红色标签的图标以显示通知数量？找到this thread但没有答案。

我试过了：

<Icon name='bell outline'>
  <Label color='red' floating>22</Label>
</Icon>

但标签没有显示（语法是语义 - 反应）。

Answer 1

使用语义UI，您可以将另一个图标浮动到右上角：

<i class="huge icons">
  <i class="puzzle icon"></i>
  <i class="top right corner add icon"></i>
</i>

但是如果你想在角落里显示一些数字，那么它就没什么用处 - 对于intance，关注者的数量或者消息的数量。如果你想实现它，你必须使用自己的CSS样式。

在我的项目中，我按照以下方式进行：

<div class="ui top  dropdown item">
<i class="icon bell outline"></i>
<div id="live_message_badge_main_header" class="floating ui red label hidden" style="padding:2px 3px;top: 10px;left: 47px;">
  <span class='live_message_badge'>&nbsp;</span>
</div>
</div>

此外，您需要相应的js来填充范围。

结果：