R语言 是否可以修改折叠侧边栏的箭头?

bqf10yzr  于 2023-09-27  发布在  其他
关注(0)|答案(2)|浏览(106)

我想移动小箭头,切换侧边栏的顶部或基本上只是使它更明显/更容易关闭。

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

w8ntj3qf1#

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

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

产量:

  • 垂直的较大容器(padding),
  • 集装箱向顶部移动得更多(margin-bottom),
  • 容器的黄色(background-color),
  • 箭头的红色(fill)。

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

jhdbpxl92#

”很好的回答,像往常一样。这是另一个可能的答案。您可以修改函数bslib:::collapse_icon

# bslib:::collapse_icon
function () 
{
  if (!is_installed("bsicons")) {
    icon <- "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\" class=\"bi bi-chevron-down collapse-icon\" style=\"fill:currentColor;\" aria-hidden=\"true\" role=\"img\" ><path fill-rule=\"evenodd\" d=\"M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z\"></path></svg>"
    return(HTML(icon))
  }
  bsicons::bs_icon("chevron-down", class = "collapse-icon", 
                   size = NULL)
}

因此,要么修改SVG路径,要么安装bsicons包并更改Bootstrap icon。由于该函数未导出,因此可以使用assignInNamespace修改它。这里我采用了第二种方式,将chevron-down图标替换为chevron-double-down图标,这样更容易看到。

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

assignInNamespace(
  "collapse_icon", 
  function() {
    bsicons::bs_icon(
      "chevron-double-down", class = "collapse-icon", size = NULL
    ) 
  },
  ns = "bslib"
)

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)

也许有一个更好的Bootstrap图标。否则使用其他方式:找到一个漂亮的SVG图标(例如填充三角形)并复制其代码。

相关问题