bslib嵌套Card边框移除与切换实现及组件ID复用疑问

一、移除Card边框的方法 #

bslib的card()组件提供了border参数，设置为FALSE即可移除边框。针对你代码中两类需要移除边框的card，修改方式如下：

1. 外层card（id为"A"和"B"的card）：直接在card()中添加border = FALSE，若要彻底去掉卡片的视觉边框感，可搭配shadow = "none"（可选）。
2. 包含两个子card的内层card：同样在该card()中设置border = FALSE。

修改后的UI关键代码片段：

ui <- page_fillable(
  useShinyjs(),
  layout_sidebar(
    sidebar = sidebar(
      pickerInput("a", label = "Select", choices = c("A", "B"), options = list(size = 10)),
    ), 
    # 外层card A：移除边框
    card(id = "A", border = FALSE, shadow = "none",
         layout_columns(
           col_widths = c(12, 12, 12),
           row_heights = c(1, 2, 1),
           # 包含两个子card的内层card：移除边框
           card(border = FALSE,
                card_body(
                  layout_column_wrap(
                    width = 1/2,
                    card("A"),
                    card("A")
                  )
                )
           ),
           card(card_header, "A"),
           card("A")
         )
    ),
    # 外层card B：移除边框
    card(id = "B", border = FALSE, shadow = "none",
         layout_columns(
           col_widths = c(12, 12, 12),
           row_heights = c(1, 2, 1),
           # 包含两个子card的内层card：移除边框
           card(border = FALSE,
                card_body(
                  layout_column_wrap(
                    width = 1/2,
                    card("B"),
                    card("B")
                  )
                )
           ),
           card(card_header, "B"),
           card("B")
         )
    )
  )
)

二、重复使用带相同ID的card_header的问题 #

你代码里存在两个需要注意的点：

1. 错误的嵌套调用：你写了card(card_header(card_header), "A")，这是把card_header作为参数传入card_header()，会生成嵌套表头，正确写法应为card(card_header, "A")。
2. 重复相同ID的风险：你定义的card_header包含ID为choose_letter的pickerInput，当在card A和card B中重复使用这个card_header时，页面会出现两个ID完全相同的pickerInput元素。HTML规范要求页面元素ID必须唯一，这会导致：
   • updatePickerInput可能无法正确更新所有对应组件，仅作用于第一个加载的组件；
   • 潜在的JS交互冲突，导致组件行为异常。

解决方法 #

如果需要在多个地方复用类似的表头组件，建议用Shiny模块封装以生成唯一ID，或手动为每个pickerInput指定不同ID，示例如下：

# 封装成函数，动态生成唯一ID
make_card_header <- function(input_id) {
  card_header(
    "Setting",
    popover(
      bsicons::bs_icon("gear"),
      pickerInput(
        input_id, "letter", inline = TRUE,
        choices = letters
      )
    )
  )
}

# 在UI中分别调用生成不同ID的表头
card(id = "A", ...,
     card(make_card_header("choose_letter_A"), "A"),
     ...)
card(id = "B", ...,
     card(make_card_header("choose_letter_B"), "B"),
     ...)

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