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更改为：

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填充的空间的右侧（因此我们必须扩展宽度以包括未被标签占用的所有标头;此百分比可能必须根据文本输入而改变这取代了“Navbar！”）。

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

1 个答案: