bslib嵌套card组件全屏设置能否仅展示内部卡片？

可以实现仅让内部卡片进入全屏状态，问题根源是点击内部卡片全屏按钮时，事件会向上冒泡到外层卡片，导致外层被误触发全屏逻辑。通过添加自定义JavaScript阻止事件冒泡即可解决。

修改后的代码 #

library(shiny)
library(bslib)

ui = page(
  card(
    full_screen = FALSE,
    card_header("Main card"),
    card(
      id = "inner-card",  # 为内部卡片设置唯一ID
      full_screen = TRUE,
      card_header("Plot card"),
      plotOutput("plot"),
      # 阻止全屏按钮的事件冒泡
      tags$script(HTML("
        document.querySelector('#inner-card .btn-full-screen').addEventListener('click', function(e) {
          e.stopPropagation();
        });
      "))
    )
  )
)

server = function(input, output) {
  output$plot = renderPlot(hist(rnorm(100)))
}

shinyApp(ui, server)

代码说明 #

• 给内部卡片添加唯一IDinner-card，方便JavaScript精准定位元素
• 通过document.querySelector选中内部卡片的全屏按钮（bslib默认给全屏按钮加了.btn-full-screen类）
• 给按钮添加点击事件监听，调用e.stopPropagation()阻止事件向上传递，这样外层卡片不会响应这次点击，只有内部卡片进入全屏状态

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