使用renderUI渲染bs4Dash头部左侧通知出现黑点的问题

问题根源 #

使用renderUI渲染dashboardHeader的通知菜单时，R Shiny会自动将单个返回组件包裹在<div>标签内，破坏了bs4Dash菜单原本的<ul>/<li>结构。浏览器会把被包裹的内容识别为异常列表项，从而显示默认的黑点样式。

解决方案 #

方案1：用tagList()包裹组件 #

通过tagList()避免Shiny自动添加外层<div>，直接输出符合bs4Dash要求的菜单元素结构：

output$notificationMenu <- renderUI({
  tagList(
    notificationItem(
      text = "新通知提醒",
      icon = icon("bell"),
      status = "info"
    ),
    notificationItem(
      text = "系统更新完成",
      icon = icon("check-circle"),
      status = "success"
    )
  )
})

方案2：手动用tags$li包裹菜单组件 #

直接遵循bs4Dash的DOM结构，把通知组件放在指定类名的<li>标签内：

output$notificationMenu <- renderUI({
  tags$li(
    class = "nav-item dropdown",
    dropdownMenu(
      type = "notifications",
      notificationItem(
        text = "新消息",
        icon = icon("envelope"),
        status = "warning"
      )
    )
  )
})

方案3：临时CSS修复（治标） #

若结构调整有困难，可添加自定义CSS强制隐藏该区域的列表黑点：

tags$head(
  tags$style(HTML("
    .main-header .navbar-nav .nav-item {
      list-style: none;
      margin: 0;
      padding: 0;
    }
  "))
)

完整演示代码 #

library(shiny)
library(bs4Dash)

ui <- dashboardPage(
  dashboardHeader(
    title = "bs4Dash Demo",
    uiOutput("notificationMenu")
  ),
  dashboardSidebar(),
  dashboardBody()
)

server <- function(input, output, session) {
  output$notificationMenu <- renderUI({
    tagList(
      dropdownMenu(
        type = "notifications",
        badgeStatus = "warning",
        notificationItem(
          text = "5条未读消息",
          icon = icon("bell"),
          status = "info"
        ),
        notificationItem(
          text = "服务器负载过高",
          icon = icon("exclamation-triangle"),
          status = "danger"
        )
      )
    )
  })
}

shinyApp(ui, server)

内容的提问来源于stack exchange，提问作者H. berg