闪亮的导航栏页面中的搜索字段 [英] search field in shiny navbarPage

问题描述

我试图在一些 tabPanel 之后将全局搜索字段放入我的 navbarPage.我不确定是否有可能，因为我所有的测试都在 navbar 之外产生了 textInput.

I am trying to get a global search field into my navbarPage after some tabPanel. I am not sure if it is possible, since all my tests producing the textInput outside the navbar.

rStudio 闪亮的布局指南指向 bootstrap 导航栏文档 ，他们实际上就是这样做的.但我无法用我闪亮的应用重现它.

The rStudio shiny layout guide points to the bootstrap navbar documentation , where they actually did exactly this. But I am not able to reproduce it with my shiny app.

library(shiny)

ui <- shinyUI(
  shiny::navbarPage('test',
    shiny::tabPanel('my app',
   fluidPage(

  # Application title
  titlePanel("Old Faithful Geyser Data"),

  # Sidebar with a slider input for number of bins
  sidebarLayout(
    sidebarPanel(
      sliderInput("bins",
                  "Number of bins:",
                  min = 1,
                  max = 50,
                  value = 30)
    ),

    # Show a plot of the generated distribution
    mainPanel(
      plotOutput("distPlot")
    )
  ))),

  ### Still inside navbarPage
  shiny::textInput("text", 
                   label=h3("Text input"), 
                   value="should be inside the navbar!")
))

server <- function(input, output, session) {
  output$distPlot <- renderPlot({

    # generate bins based on input$bins from ui.R
    x    <- faithful[, 2]
    bins <- seq(min(x), max(x), length.out = input$bins + 1)

    # draw the histogram with the specified number of bins
    hist(x, breaks = bins, col = 'darkgray', border = 'white')

  })
}

shinyApp(ui, server)

推荐答案

您可以通过稍微操作导航栏 HTML 来实现此目的.Valter 是正确的 - 您可以通过完全在 HTML 中构建菜单而不是使用 Shiny 来实现这一点.但是有一个更简单的方法:您可以在常规 Shiny 中构建导航栏，然后使用 htmltools 稍微修改它.这是我认为是当前提议的解决方案中最干净的一种快速解决方案:

You can do this by manipulating the navbar HTML a little bit. Valter is correct - you can achieve this by constructing the menu entirely in HTML instead of using Shiny. But there's an easier way: you can build the navbar in regular Shiny, and then use htmltools to slightly modify it. Here's one quick solution that I think is the cleanest out of the current proposed solutions:

library(shiny)

navbarPageWithInputs <- function(..., inputs) {
  navbar <- navbarPage(...)
  form <- tags$form(class = "navbar-form", inputs)
  navbar[[3]][[1]]$children[[1]] <- htmltools::tagAppendChild(
    navbar[[3]][[1]]$children[[1]], form)
  navbar
}

ui <- navbarPageWithInputs(
  "Test app",
  tabPanel("tab1", "tab 1", textOutput("out")),
  tabPanel("tab2", "tab 2"),
  inputs = textInput("search", NULL, placeholder = "Search")
)

server <- function(input, output, session) {
  output$out <- renderText(input$search)
}

shinyApp(ui = ui, server = server)

基本上我创建了一个 navbarPageWithInputs() 函数，它接受与 navbarPage() 相同的所有参数，以及一个 inputs 参数.这个函数所做的就是调用常规的 navbarPage()，然后将给定的输入添加到 HTML.

Basically I created a navbarPageWithInputs() function that accepts all the same parameters as navbarPage(), and also an inputs parameter. All this function does is call the regular navbarPage(), and then adds the given inputs to the HTML.

这篇关于闪亮的导航栏页面中的搜索字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！