css - 是否可以修改折叠侧边栏的箭头？

Question

我想将用于切换侧边栏的小箭头移至顶部，或者基本上只是使其更明显/更易于关闭。

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

Answer 1

您可以将箭头移至顶部，还可以使用 css 应用更多样式选项。箭头所在的容器可以通过 .bslib-sidebar-layout > .collapse-toggle 访问，如果你想修改图标本身，你可以添加 > .collapse-之后图标。这是一个例子。包括

.bslib-sidebar-layout > .collapse-toggle {
    padding: 100px 0;
    margin-bottom: 350px;
    background-color: yellow;
}
        
.bslib-sidebar-layout > .collapse-toggle > .collapse-icon {
    fill: red !important;
}

产量:

• 一个垂直的较大容器(填充)，
• 容器更多地向顶部移动(margin-bottom)，
• 容器的黄色(background-color)，
• 箭头的红色(填充)。

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


ui <- page_sidebar(
    tags$head(tags$style(HTML(
        "
        .bslib-sidebar-layout > .collapse-toggle {
            padding: 100px 0;
            margin-bottom: 350px;
            background-color: yellow;
        }
        
        .bslib-sidebar-layout > .collapse-toggle > .collapse-icon {
            fill: red !important;
        }        
        "
    ))),
    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)
}