如何在bslib的nav_insert操作后修改导航标签的CSS类与样式？

使用bslib的nav_insert()函数向page_navbar动态插入标签页时，新标签页的内容容器会缺失原生标签页默认拥有的html-fill-item html-fill-container bslib-gap-spacing CSS类，导致样式不一致。这个问题已在bslib的Issue #952中记录。

用户提供的可复现代码：

library(shiny)
library(bslib)

ui <- page_navbar(
  id = 'nav',
  nav_panel('Page 1',
            card("Content 1")))

server <- function(input, output, session) {
  nav_insert(id = "nav",
             nav = nav_panel('Page 2',
                             card("Content 2")))
}

shinyApp(ui, server)

可行解决方法 #

之前尝试用runjs($('[data-value=Page 1]').addClass('html-fill-item'))失败，是因为选择器定位的是标签页的导航按钮，而非内容容器（tab-pane元素）。正确的做法是定位到新插入标签页对应的tab-pane，再添加缺失的类：

完整修改代码

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

ui <- page_navbar(
  id = 'nav',
  useShinyjs(), # 启用shinyjs功能
  nav_panel('Page 1',
            card("Content 1")))

server <- function(input, output, session) {
  # 插入新标签页
  nav_insert(id = "nav",
             nav = nav_panel('Page 2',
                             card("Content 2")))
  
  # 为新标签页的内容容器添加缺失CSS类
  runjs(
    '$("#nav [data-value=\"Page 2\"]").next(".tab-pane")
      .addClass("html-fill-item html-fill-container bslib-gap-spacing");'
  )
}

shinyApp(ui, server)

说明 #

• 选择器$("#nav [data-value=\"Page 2\"]").next(".tab-pane")的逻辑：先找到id为nav的导航栏中，data-value匹配"Page 2"的导航按钮，再定位其紧邻的tab-pane内容容器，最后为该容器补全缺失的样式类。
• 必须提前加载shinyjs包并在ui中加入useShinyjs()，才能使用runjs()执行前端DOM操作。

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