在R Shiny中自定义按钮位置并添加箭头展示地理层级

一、优化按钮布局 #

利用bslib::layout_columns()的col_widths参数精准控制层级容器的宽度占比，强化高低层级的视觉区分：

• 高层级卡片设置为全宽（col_widths = 12），突出其核心层级地位
• 低层级两组卡片各占6列宽度（col_widths = c(6,6)），左右对齐在高层级下方
• 给按钮容器添加统一的内边距、间距和居中对齐，让按钮排布更规整

二、用CSS添加层级连接箭头 #

通过CSS伪元素绘制箭头，定位在高低层级卡片之间，实现视觉上的层级关联：

1. 给高层级卡片添加parent-card类，低层级卡片按需添加child-card-left/child-card-right类
2. 利用相对+绝对定位固定箭头位置
3. 通过边框属性绘制三角形箭头，调整偏移量适配布局

三、完整示例代码 #

library(shiny)
library(bslib)

ui <- page_sidebar(
  title = "地理层级关系演示",
  sidebar = sidebar("操作说明"),
  tags$style(HTML("
    /* 高层级卡片样式，预留箭头空间 */
    .parent-card {
      position: relative;
      margin-bottom: 45px;
    }
    /* 指向左侧低层级的箭头 */
    .parent-card::after {
      content: '';
      position: absolute;
      bottom: -30px;
      left: 22%;
      width: 0;
      height: 0;
      border-top: 18px solid #6c757d;
      border-left: 12px solid transparent;
      border-right: 12px solid transparent;
    }
    /* 指向右侧低层级的箭头 */
    .parent-card::before {
      content: '';
      position: absolute;
      bottom: -30px;
      right: 22%;
      width: 0;
      height: 0;
      border-top: 18px solid #6c757d;
      border-left: 12px solid transparent;
      border-right: 12px solid transparent;
    }
    /* 按钮容器布局优化 */
    .btn-group {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      justify-content: center;
      padding: 12px 0;
    }
  ")),
  layout_columns(
    # 高层级地理卡片
    card(
      class = "parent-card",
      card_header("高层级地理边界（如省级）"),
      div(class = "btn-group",
          actionButton("prov1", "省份A"),
          actionButton("prov2", "省份B")
      )
    ),
    # 左侧低层级地理卡片
    card(
      class = "child-card-left",
      card_header("低层级地理组1（如市级）"),
      div(class = "btn-group",
          actionButton("city1", "城市A1"),
          actionButton("city2", "城市A2"),
          actionButton("city3", "城市A3")
      )
    ),
    # 右侧低层级地理卡片
    card(
      class = "child-card-right",
      card_header("低层级地理组2（如县级）"),
      div(class = "btn-group",
          actionButton("county1", "县B1"),
          actionButton("county2", "县B2")
      )
    ),
    col_widths = c(12, 6, 6)
  )
)

server <- function(input, output) {
  # 此处可添加按钮点击高亮对应地图区域的逻辑
}

shinyApp(ui, server)

四、自定义调整说明 #

• 修改CSS中的left/right值可调整箭头的横向位置，适配不同按钮数量的布局
• 更改border-top的颜色可匹配应用主题色
• 若需要带连线的箭头，可额外添加伪元素绘制水平线连接箭头与卡片
• 按钮对齐方式可通过.btn-group的justify-content属性调整（如flex-start左对齐、flex-end右对齐）

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