闪亮的navbarPage中的搜索字段

时间:2016-11-15 07:35:49

标签: r twitter-bootstrap shiny

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

rStudio闪亮布局指南指向bootstrap navbar documentation,他们实际上就是这样做的。但我无法使用我的闪亮应用程序重现它。

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)

3 个答案:

答案 0 :(得分:6)

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

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。

答案 1 :(得分:1)

在基础Shiny中你可以使用tabPanel来实现,如果重新呈现当前tabPanel并不昂贵:

ui <- navbarPage('test',id='test',
                 tabPanel('my app1',
                          titlePanel("Old Faithful Geyser Data1"),
                          sidebarLayout(
                            sidebarPanel(
                              sliderInput("bins",
                                          "Number of bins:",
                                          min = 1,
                                          max = 50,
                                          value = 30)),
                            mainPanel(plotOutput("distPlot1")))),
                 tabPanel('my app2',
                          titlePanel("Old Faithful Geyser Data2"),
                          sidebarLayout(
                            sidebarPanel(
                              sliderInput("bins",
                                          "Number of bins:",
                                          min = 1,
                                          max = 50,
                                          value = 30)),
                            mainPanel(plotOutput("distPlot2")))),
                 tabPanel( value= "search_panel",
                           textInput("search", label=NULL, value="Search"))
                )

server <- function(input, output, session) {
  observe({
    if(!is.null(input$test)){
      if(input$test=="search_panel")     # Go back to last active panel
        updateNavbarPage(session, 'test', selected = selected_panel)
      else                               # Save active panel
        selected_panel <<- input$test
      }
    })
  searchtext <- reactive({
    if(!is.null(input$search))
       if(input$search!="Search")
         return(input$search)
    return(NULL)
    })
  output$distPlot1 <- renderPlot({
    x    <- faithful[, 2]
    bins <- seq(min(x), max(x), length.out = input$bins + 1)
    hist(x, breaks = bins, col = 'darkgray', border = 'white', 
         main=ifelse(is.null(searchtext()), "Alt title 1", searchtext()))
    })
  output$distPlot2 <- renderPlot({
    x    <- faithful[, 2]
    bins <- seq(min(x), max(x), length.out = input$bins + 1)
    hist(x, breaks = bins, col = 'darkgray', border = 'white', 
         main=ifelse(is.null(searchtext()), "Alt title 2", searchtext()))
    })
}

shinyApp(ui, server)

答案 2 :(得分:0)

这是使用HTML重建菜单的一种可能方式。它看起来不是很干净,但它可以满足您的需求。

app.R

library(shiny)

    ui <- shinyUI(
            tagList(
                    bootstrapPage(
                    HTML('
                         <nav class="navbar navbar-default" role="navigation">
                            <div class="navbar-header">
                                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                                            <span class="sr-only">Toggle navigation</span>
                                            <span class="icon-bar"></span>
                                            <span class="icon-bar"></span>
                                            <span class="icon-bar"></span>
                                    </button>
                                    <a class="navbar-brand" href="#">Old Faithful Geyser Data</a>
                            </div>
                            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                                    <ul class="nav navbar-nav">
                                            <li class="active"><a href="#plot1" data-toggle="tab" data-value="Plot1">First</a></li>
                                            <li><a href="#plot2" data-toggle="tab" data-value="Plot2">Second</a></li>
                                    </ul>
                                    <div class="col-sm-3 col-md-3">
                                            <form class="navbar-form" role="search">
                                                    <div class="input-group">
                                                            <input id="searchBox" type="text" class="form-control" placeholder="Search" name="q">
                                                    </div>
                                            </form>
                                    </div>
                            </div><!-- /.navbar-collapse -->
                         </nav>
                         '),
                    tags$div(class="container-fluid", 
                             tags$div(class="tab-content",
                                      HTML('<div class="tab-pane active" data-value="Plot1" id="plot1">'),
                                      sliderInput("bins1",
                                                  "Number of bins:",
                                                  min = 1,
                                                  max = 50,
                                                  value = 30),
                                      plotOutput("distPlot1"),
                                      verbatimTextOutput("searchBoxValuePlot1"),
                                      HTML('</div>'),
                                      HTML('<div class="tab-pane" data-value="Plot2" id="plot2">'),
                                      sliderInput("bins2",
                                                  "Number of bins:",
                                                  min = 1,
                                                  max = 50,
                                                  value = 30),
                                      plotOutput("distPlot2"),
                                      verbatimTextOutput("searchBoxValuePlot2"),                                  
                                      HTML('</div>')

                             )

                    )
            )
            ))

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

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

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

            })
            output$distPlot2 <- renderPlot({

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

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

            })
            searchBoxValue <- reactive({
                    input$searchBox
            })
            output$searchBoxValuePlot1 <- renderPrint({
                    paste("You entered: ", searchBoxValue(), "and you are on the first link", sep = " ")
            })
            output$searchBoxValuePlot2 <- renderPrint({
                    paste("You entered: ", searchBoxValue(), "and you are on the second link", sep = " ")
            })
    }

    shinyApp(ui, server)