如何将bslib::card()中full_screen=TRUE的展开按钮移至右上角？

要把bslib::card()的全屏按钮从右下角移到右上角或左上角，只需添加自定义CSS覆盖默认的定位样式即可：

方案1：移至右上角 #

在UI中加入以下CSS样式，通过修改按钮的绝对定位属性，将其从右下角调整到右上角：

.card-full-screen-button {
  bottom: auto !important;  /* 取消默认底部定位 */
  top: 1rem;                /* 距离顶部1rem */
  right: 1rem;              /* 距离右侧1rem */
}

方案2：移至左上角 #

如果要移到左上角，修改CSS为：

.card-full-screen-button {
  bottom: auto !important;  /* 取消默认底部定位 */
  top: 1rem;                /* 距离顶部1rem */
  right: auto !important;   /* 取消默认右侧定位 */
  left: 1rem;               /* 距离左侧1rem */
}

完整可运行代码 #

以下是加入了右上角按钮样式的完整代码：

library(shiny)
library(bslib)

# Define UI
ui <- fluidPage(
  theme = bs_theme(bootswatch = "minty"),
  titlePanel("Table in a card()"),
  
  # 添加自定义CSS调整全屏按钮位置
  tags$style(HTML("
    .card-full-screen-button {
      bottom: auto !important;
      top: 1rem;
      right: 1rem;
    }
  ")),
  
  sidebarLayout(
    sidebarPanel(
      textInput("filter_name", "Filter by Name", ""),
    ),
    
    mainPanel(
      card(
        title = "Data Table",
        full_screen = TRUE,
        tableOutput("mytable")
      )
    )
  )
)

# Define server logic
server <- function(input, output) {
  # Generate sample data
  data <- data.frame(
    Name = c("John", "Jane", "Alice", "Bob", "Charlie", "David"),
    Age = c(25, 30, 35, 40, 45, 50),
    Score = c(80, 75, 90, 85, 88, 92)
  )
  
  # Render table
  output$mytable <- renderTable({
    filtered_data <- data
    if (!is.null(input$filter_name) && input$filter_name != "") {
      filtered_data <- data[data$Name == input$filter_name, ]
    }
    filtered_data
  })
}

# Run application
shinyApp(ui = ui, server = server)

说明 #

• .card-full-screen-button是bslib为全屏按钮自动添加的类名，用!important强制覆盖默认样式，确保修改生效。
• 可以根据需求调整top/right/left的数值，自定义按钮的具体位置。

内容的提问来源于stack exchange，提问作者cinnamon662