如何在bslib::page_sidebar()的navbar中插入textInput搜索框？

你希望将搜索框放置到导航栏的红框标注位置（如下示意图）：

当前你的代码如下：

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")))
  
)

当前搜索框的显示位置不符合预期，目标位置如下红框标注：

实现方法 #

方案一：自定义page_sidebar的标题区域

通过将标题和搜索框组合进title参数，配合CSS调整布局，把搜索框嵌入导航栏区域：

library(shiny)   
library(bslib)

page_sidebar(
  tags$head(
    tags$style(HTML("
      .navbar-group {
        display: flex;
        align-items: center;
        gap: 2rem;
      }
      .search-input {
        margin-bottom: 0;
        width: 200px;
      }
    "))
  ),
  title = tagList(
    div(class = "navbar-group",
        h1("Weather", style = "margin: 0;"),
        textInput("search","Search", class = "search-input")
    )
  ),
  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"))
  )
  
)

方案二：改用bs_navbar构建导航栏

如果需要更贴合Bootstrap原生导航栏的样式，可以直接用bs_navbar组件，将搜索框嵌入导航栏右侧：

library(shiny)
library(bslib)

bs_navbar(
  title = "Weather",
  align = "end",
  textInput("search", "Search", width = "200px"),
  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"))),
                    ),
  page_fillable(
    layout_columns(
      card("card1",
           card_body(card("card2",height = "200px"),card("card3",height = "200px"))
      ), 
      col_widths = c(8,4),
      layout_columns(card("card4"))
    )
  )
)

两种方案都能将搜索框放置到你需要的导航栏位置，可根据页面整体布局偏好选择。

内容的提问来源于stack exchange，提问作者Sakina Zaveri