如何在 bslib::page_sidebar() 的导航栏中插入文本输入？

Question

我想在

navbar

内插入搜索栏，该怎么做？

library(shiny)   
library(bslib)

page_sidebar(
  tags$head(
    tags$link(rel = "stylesheet", type = "text/css", href = "style.css")
  ),
  title = "Weather",textInput("search","Search"),
  sidebar = sidebar("sidebar",
                    card(" ",actionButton("card_click", card_body("Cities",align = "center"))),
                    card(" ",actionButton("card_click-1", card_body("Maps",align = "center"))),
                    card(" ",actionButton("card_click-2", card_body("About Me",align = "center"))),
                    ),
  
  layout_columns(
    
    card("card1",
         card_body(card("card2",height = "200px"),card("card3",height = "200px"))
         
         ), col_widths = c(8,4),
    layout_columns(card("card4")))
  
)

我需要红色框所在的搜索栏。有什么办法可以做到吗？

Answer 1

您可以使用绝对定位。

position:absolute;
left:foo;
right:foo

Answer 2

您可以将

title

包裹在

tagList

中，其中包含

title

（“天气”）和

textInput

的标签，然后在

display: grid;

上使用

navbar

以及合适的

 column-gap

：

library(shiny)   
library(bslib)

page_sidebar(
  tags$head(
    tags$style(HTML('
                     .navbar.navbar-static-top {display: grid;}
                     .navbar.navbar-static-top > div:first-child {column-gap: 8.25rem;}
                    ')
               )
  ),
  title = tagList(tags$div("Weather") |> tagAppendAttributes(class = "bslib-page-title navbar-brand"), 
                  textInput("searchInput","Search")),
  sidebar = sidebar("sidebar",
                    card(" ",actionButton("card_click", card_body("Cities",align = "center"))),
                    card(" ",actionButton("card_click-1", card_body("Maps",align = "center"))),
                    card(" ",actionButton("card_click-2", card_body("About Me",align = "center"))),
  ),
  layout_columns(
    card("card1",
         card_body(card("card2",height = "200px"),card("card3",height = "200px"))
         
    ), col_widths = c(8,4),
    layout_columns(card("card4")))
)