Html 如何使用bslb设置可导航页面侧边栏的样式

发布于03月12日

我试着用bslib设计我shiny 的应用程序页面，想让侧边栏类似于Bootstrap examples中的样子，但不知道如何使用bslib在shiny中实现类似的效果.

Question: 如何创建这样的 bootstrap 侧边栏，有没有像sidebar()这样的直接函数.在实现 bootstrap 工具条后，如何在主面板中点击打开不同的页面.

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)

除了这些变量 Select 输入之外，还可以有一种方法将它们替换为可导航页面，如Bootstrap示例所示.

推荐答案

你需要使用Bootstrap's navigation components(也就是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)