如何减少 bslib 网格元素之间的间距？

Question

如何减少/消除 5 个操作框之间的空白，但保留 2 个操作框之间的空间？最好还显示如何在 Chrome 中“找到”解决方案？

library(shiny)
library(bslib)
library(tidyverse)


style <- "font-size:80%; padding-top: 0; padding-bottom: 0; text-align:left"

ui <- fluidPage(
  
  card(
    card_header(
      "Plot",
    ),
    plotOutput("plot"),
    card_footer(
      card_body(
        layout_column_wrap(
          actionButton("labels", "Labels", icon = icon("tag"), style = style),
          actionButton("axes", "Axes", icon = icon("lines-leaning"), style = style),
          actionButton("theme", "Theme", icon = icon("palette"), style = style),
          actionButton("options", "Options", icon = icon("sliders"), style = style),
          actionButton("sort", "Select & Sort", icon = icon("sort"), style = style)
        ))),
    card_body(
    layout_column_wrap(actionButton("a", "test"), actionButton("b", "test2"))
    )
  )
)

server <- function(input, output, session) {
  
  output$plot <- renderPlot({
    
    ggplot(iris, aes(x = Sepal.Length, y = Sepal.Width, color = Species)) +
      geom_point()
    
  })
  
}

shinyApp(ui, server)

Answer 1

bslib

网格中元素之间的空间，例如使用

layout_column_wrap

创建，可以通过调整

scss

变量

--bslib_spacer

来控制，默认为

1rem

。因此，可以使用另一个值设置主题，例如像这样：

page_fluid(
  theme = bs_theme("bslib_spacer" = "0rem"),
  ...
)

但是，这在全球范围内都有效，并且在您的设置中，您需要在不同的网格之间区分这一点。这可以通过将

gap

参数传递给

layout_column_wrap

来完成。来自

?layout_column_wrap

：

gap：定义元素之间间隙（即间距）的 CSS 长度单位 提供给....此参数仅适用于 fillable = TRUE

library(shiny)
library(bslib)

style <- "font-size:80%; padding-top: 0; padding-bottom: 0; text-align:left"

ui <- page_fluid(
  card(
    card_footer(
      card_body(
        layout_column_wrap(
          actionButton("labels", "Labels", icon = icon("tag"), style = style),
          actionButton("axes", "Axes", icon = icon("lines-leaning"), style = style),
          actionButton("theme", "Theme", icon = icon("palette"), style = style),
          actionButton("options", "Options", icon = icon("sliders"), style = style),
          actionButton("sort", "Select & Sort", icon = icon("sort"), style = style),
          gap = "0rem"
        ))),
    card_body(
      layout_column_wrap(actionButton("a", "test"), actionButton("b", "test2"))
    )
  )
)

shinyApp(ui, \(...){})