如何使用 bslib 在 Shiny 中设置可导航页面侧边栏的样式

Question

我正在尝试使用

bslib

设计我的闪亮应用程序页面，并希望使侧边栏与 bootstrap examples 中的类似，但不知道如何使用

shiny

在

bslib

中实现类似的操作。

问题： 如何创建这种引导侧边栏，有没有像

sidebar()

这样的直接功能。实现引导侧边栏后，如何单击主面板中打开不同的页面。

R 脚本示例：

library(bslib)
library(shiny)
library(ggplot2)
  
ui <- page_sidebar(
  title = "Example dashboard",
  sidebar = sidebar(
    varSelectInput("var", "Select variable", mtcars)
  ),
  card(
    full_screen = TRUE,
    card_header("My plot"),
    plotOutput("p")
  )
)
  
server <- function(input, output) {
  output$p <- renderPlot({
    ggplot(mtcars) + geom_histogram(aes(!!input$var))
  })
}

shinyApp(ui, server)

除了这些 var select 输入之外，是否可以有一种方法将它们替换为可导航页面，如引导示例中所示。

Answer 1

您需要使用Bootstrap的导航组件（又名

navs

）。

在文档的帮助下，您可以看到所需的标记，并且该功能可以开箱即用，无需额外的

JavaScript

:

library(shiny)
library(ggplot2)
library(bslib)

ui <- page_sidebar(
  title = "Example dashboard",
  sidebar = sidebar(
    div(
      class = "nav flex-column nav-pills",
      id = "mynav-tab",
      role = "tablist",
      `aria-orientation` = "vertical",
      lapply(LETTERS[1:3], 
             \(x) tags$a(class = paste0("nav-link", ifelse(x == "A", " active", "")),
                         id = paste0(x, "-tab"),
                         `data-toggle` = "pill",
                         href = paste0("#", x, "-tab-content"),
                         role = "tab",
                         `aria-controls` = paste0(x, "-tab-content"),
                         `aria-selected` = x == "A",
                         x)
      )
    )
  ),
  div(
    class = "tab-content",
    id = "mynav-tab-content",
    lapply(LETTERS[1:3],
           \(x) div(class = paste0("tab-pane fade", ifelse(x == "A", " show active", "")),
                    id = paste0(x, "-tab-content"),
                    role = "tabpanel",
                    `aria-labelledby` = paste0(x, "-tab"),
                    card(full_Screen = T,
                         card_header(x))
           )
    )
  )
)

server <- function(input, output) {
}

shinyApp(ui, server)