在r Shiny中使用没有导航菜单的面板？

Question

是否可以在不显示导航菜单的情况下将面板与navbarPage ， navlistPanel ， navbarMenu或tabsetPanel一起使用？

我写了以下脚本：

library(shiny)
library(shinyjs)

ui <- fluidPage(
  useShinyjs(),

  navbarPage
  (
    title = NULL, id = "navBar",

    tabPanel
    (
      title = "01", value = "panel01",
      h1("First panel", align = "center"),
      actionButton("next01", "Next", width = "10%")
    ),

    tabPanel
    (
      title = "02", value = "panel02",
      h1("Second panel", align = "center"),
      actionButton("prev02", "Previous", width = "10%")
    )
  )
)

server <- function(input, output, session)
{
  observe(
  {
    hide(selector = "#navBar li a[data-value=panel02]")
  })

  observeEvent(input$next01,
  {
    hide(selector = "#navBar li a[data-value=panel01]")
    show(selector = "#navBar li a[data-value=panel02]")
    updateNavbarPage(session, "navBar", selected="panel02")
  })

  observeEvent(input$prev02,
  {
    hide(selector = "#navBar li a[data-value=panel02]")
    show(selector = "#navBar li a[data-value=panel01]")
    updateNavbarPage(session, "navBar", selected="panel01")
  })
}

shinyApp(ui = ui, server = server)

由于我在每个面板的底部都有一个“上一个”和“下一个”按钮，因此我不需要菜单，并且希望摆脱每个面板顶部的导航菜单。

Answer 1

如注释中所述，隐藏导航菜单，您可以在观察中添加hide(selector = "#navBar") 。

要摆脱导航栏的灰色背景，您可以在ui中添加以下css标记： tags$style(type='text/css', "nav.navbar.navbar-default.navbar-static-top{border-color: #f5f5f5;background-color: #f5f5f5;}")

要进一步降低导航栏的高度，可以添加以下两个CSS标记： tags$style(type='text/css', ".navbar{min-height: 0px; margin-bottom: 0px;}") tags$style(type='text/css', ".navbar-brand{height: 0px; padding: 0px 0px;}")

因此，添加所有这些代码将如下所示：

library(shiny)
library(shinyjs)

ui <- fluidPage(
  useShinyjs(),
  tags$style(type='text/css', "nav.navbar.navbar-default.navbar-static-top{border-color: #f5f5f5;background-color: #f5f5f5;}"),
  tags$style(type='text/css', ".navbar{min-height: 0px; margin-bottom: 0px;}"),
  tags$style(type='text/css', ".navbar-brand{height: 0px; padding: 0px 0px;}"),
  navbarPage
  (
    title = NULL, id = "navBar",

    tabPanel
    (
      title = "01", value = "panel01",
      h1("First panel", align = "center"),
      actionButton("next01", "Next", width = "10%")
    ),

    tabPanel
    (
      title = "02", value = "panel02",
      h1("Second panel", align = "center"),
      actionButton("prev02", "Previous", width = "10%")
    )
  )
)

server <- function(input, output, session)
{
  observe(
    {
      hide(selector = "#navBar li a[data-value=panel02]")
      hide(selector = "#navBar")
    })

  observeEvent(input$next01,
               {
                 hide(selector = "#navBar li a[data-value=panel01]")
                 show(selector = "#navBar li a[data-value=panel02]")
                 updateNavbarPage(session, "navBar", selected="panel02")
               })

  observeEvent(input$prev02,
               {
                 hide(selector = "#navBar li a[data-value=panel02]")
                 show(selector = "#navBar li a[data-value=panel01]")
                 updateNavbarPage(session, "navBar", selected="panel01")
               })
}

# Run the application 
shinyApp(ui = ui, server = server)

希望能帮助到你！