可以在闪亮的 navbarPage 中显示 messageItem 吗？

Question

类似于shinydashboard 中可用的dropdownMenu 和messageItem 函数我想在基于navbarPage 的应用程序的导航栏右侧显示消息项。此处相关函数示例：https://rstudio.github.io/shinydashboard/structure.html

我尝试将相同的功能插入到 navbarPage 应用程序中，但它没有按预期工作 - 未正确对齐。

作为一个非常基本的可重现示例，这是我的应用程序的结构，我尝试包含消息项：

library(shiny)
library(shinydashboard)

ui <- shinyUI(
    navbarPage("Navbar!",
               tabPanel("Plot",
                   sidebarLayout(
                     sidebarPanel(),
                     mainPanel()
                   )
               ),
               tabPanel(
                   dropdownMenu(type = "messages",
                                messageItem(
                                    from = "Sales Dept",
                                    message = "Sales are steady this month."
                               )
                   )
               )
    )
)

server = function(input, output) { }

shinyApp(ui = ui, server = server)

Answer 1

我不是最擅长 css，但这是获得您正在寻找的结果的开始。将用户界面更改为：

ui <- shinyUI(
          fluidPage(
              tags$head(
                  tags$style(HTML("
                      .navbar-nav .messages-menu a {padding-top: 0px; padding-bottom:0px}
                      .navbar-nav {width: 90%}
                      .navbar-nav .messages-menu {float: right; padding-top: 25px;}
                  "))
              ),
          navbarPage("Navbar!",
              tabPanel("Plot",
                  sidebarLayout(
                      sidebarPanel(),
                      mainPanel()
                  )
              ),
              tabPanel(
                  dropdownMenu(type = "messages",
                      messageItem(
                          from = "Sales Dept",
                          message = "Sales are steady this month."
                      )
                  )
              )
         )   
     )
 )

宽度将类 navbar-nav 设置为屏幕宽度的 90%，因为它是包含两个选项卡面板但不包含标签“Navbar！”的空间，第二行包含类消息菜单navbar-nav 并将其移动到由 navbar-nav 填充的空间的右侧（因此我们必须扩展宽度以包括所有未被标签占用的标题；这个百分比可能必须根据文本输入而改变代替“导航栏！”）。