如何在R Shiny中显示隐藏对象时条件渲染环绕框？

解决方案：CSS自定义样式 + shinyjs控制显隐 #

要实现显示时带边框/阴影的效果，CSS是最直接的方案，给需要美化的输出元素添加自定义样式，结合shinyjs的显隐状态触发样式生效即可。

以下是修改后的完整代码：

library(shiny)
library(shinyjs)

toggleView <- function(input, output_name){
  observeEvent(input$show, {show(output_name)})
  observeEvent(input$hide, {hide(output_name)})
}

ui <- fluidPage(
  useShinyjs(),
  # 添加自定义CSS样式
  tags$style(
    HTML("
      /* 针对文本和表格输出的样式，仅当元素未隐藏时生效 */
      .output-container:not(.hidden) {
        border: 2px solid #ccc;
        border-radius: 8px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        padding: 10px;
        margin-top: 10px;
        background-color: #fff;
      }
    ")
  ),
  br(),
  actionButton("hide","Hide!"),
  actionButton("show","Show!"),
  br(),
  fluidRow(
    column(2, h5(div(class = "output-container", hidden(textOutput("text"))))),   
    column(6, div(class = "output-container", hidden(tableOutput("table"))))
  )
)

server <- function(input, output, session) {
  output$table <- renderTable(iris[1:5,1:3])
  output$text <- renderText("Test show/hide in JS")
  toggleView(input, "text")
  toggleView(input, "table")
}

shinyApp(ui, server)

关键说明 #

• 给文本和表格输出包裹带output-container类的div，方便统一控制样式
• CSS中使用:not(.hidden)选择器，确保只有元素未被shinyjs隐藏时，才会应用边框、阴影、内边距等样式
• 可按需调整CSS属性：
  • 修改border的颜色、粗细调整边框样式
  • 调整box-shadow参数改变阴影效果（模糊度、颜色等）
  • 修改border-radius设置圆角大小
  • 调整padding和margin控制内边距、外边距

如果想要更简洁的实现，也可以直接针对输出元素的ID写样式，无需额外包裹div：

#text:not(.hidden), #table:not(.hidden) {
  border: 2px solid #ccc;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  padding: 10px;
  margin-top: 10px;
}

内容的提问来源于stack exchange，提问作者Village.Idyot