如何修改bslib卡片全屏展开与关闭按钮的文本内容

方法1：通过JavaScript动态替换默认文本 #

bslib的全屏按钮文本是硬编码的，我们可以在UI中嵌入一段JavaScript，动态替换展开和关闭按钮的文本。以下是修改后的完整代码（以中文“全屏”和“退出全屏”为例）：

library(shiny)
library(bslib)

ui <- fluidPage(
  theme = bs_theme(bootswatch = "minty"),
  titlePanel("Table in a card()"),
  # 添加自定义JS替换按钮文本
  tags$script(HTML("
    // 监听页面元素变化，确保按钮加载后再修改
    const observer = new MutationObserver(() => {
      // 替换全屏展开按钮文本
      const fullscreenBtn = document.querySelector('.card-header .btn-full-screen');
      if (fullscreenBtn && fullscreenBtn.textContent.trim() === 'Full screen') {
        fullscreenBtn.textContent = '全屏';
      }
      // 替换全屏关闭按钮文本
      const exitFullscreenBtn = document.querySelector('.modal-header .btn-full-screen');
      if (exitFullscreenBtn && exitFullscreenBtn.textContent.trim() === 'Exit full screen') {
        exitFullscreenBtn.textContent = '退出全屏';
      }
    });
    observer.observe(document.body, { childList: true, subtree: true });
  ")),
  
  mainPanel(
    card(
      title = "Data Table",
      full_screen = TRUE,
      tableOutput("mytable")
    )
  )
)

server <- function(input, output) {
  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)
  )
  
  output$mytable <- renderTable({
    data
  })
}

shinyApp(ui = ui, server = server)

方法2：自定义全屏按钮（完全可控） #

如果需要更灵活的控制，可以放弃full_screen = TRUE参数，手动在卡片标题栏添加自定义按钮，自己实现全屏逻辑：

library(shiny)
library(bslib)
library(shinyjs)

ui <- fluidPage(
  theme = bs_theme(bootswatch = "minty"),
  useShinyjs(),
  titlePanel("Table in a card()"),
  
  mainPanel(
    card(
      title = tagList(
        "Data Table",
        actionButton(
          "toggle_fullscreen", 
          "全屏", 
          class = "btn btn-sm btn-full-screen ms-auto"
        )
      ),
      id = "my_card",
      tableOutput("mytable")
    )
  )
)

server <- function(input, output) {
  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)
  )
  
  output$mytable <- renderTable({
    data
  })
  
  # 控制全屏逻辑
  observeEvent(input$toggle_fullscreen, {
    runjs("
      const card = document.getElementById('my_card');
      const btn = document.getElementById('toggle_fullscreen');
      if (card.classList.contains('full-screen')) {
        card.classList.remove('full-screen');
        btn.textContent = '全屏';
      } else {
        card.classList.add('full-screen');
        btn.textContent = '退出全屏';
      }
    ")
  })
}

shinyApp(ui = ui, server = server)

两种方法的区别：

• 方法1更简单，基于原有的全屏逻辑修改文本，适合快速翻译需求；
• 方法2自由度更高，可自定义按钮样式、文本和触发逻辑。

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