解决 bslib 中使用 nav_insert 后 CSS 类问题：使用 runjs 修改插入的导航标签样式

在 bslib 中修改 nav_insert 后添加导航标签 CSS 类

问题背景

使用 bslib 包中的 page_navbar 组件时，通过 nav_insert() 插入的选项卡标签不会应用与常规选项卡窗格相同的 CSS 类。这导致新插入的选项卡在样式上与现有选项卡不一致。

解决方案

为了解决这个问题，我们可以使用 runjs() 来在插入后向新选项卡标签添加所需的 CSS 类。runjs() 允许在 Shiny 应用程序的客户端执行任意 JavaScript 代码。

修改后的代码

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")),
             runjs = "$('#nav .html-fill-container')[1].classList.add('bslib-gap-spacing')")
}

shinyApp(ui, server)

使用 JavaScript runjs()

上面的 runjs 代码执行以下操作：

• $('#nav .html-fill-container')[1] 选择新插入的选项卡的容器元素。
• classList.add('bslib-gap-spacing') 向容器元素添加 bslib-gap-spacing CSS 类，该类定义了所需的间距和样式。

提示

• 也可以使用 insertUI() 传递 HTML 片段来添加 CSS 类，但 runjs() 允许更多灵活性。
• 对于更复杂的 JavaScript 操作，可以使用 runjs_shinyapp()。
• 有关 bslib 和 shiny 的更多信息，请参阅官方文档和 shiny wiki。

常见问题解答

1. 为什么新插入的选项卡没有与现有选项卡相同的 CSS 类？

   这是由于 nav_insert() 不会传递相同的 CSS 类。

2. 如何使用 runjs 添加 CSS 类？

   使用 runjs，我们可以执行 JavaScript 代码来选择元素并添加 CSS 类。

3. 是否有其他方法添加 CSS 类？

   是的，可以使用 insertUI()，但 runjs 提供了更大的灵活性。

4. 为什么使用 runjs 更灵活？

   runjs 允许执行任意 JavaScript 代码，而 insertUI() 仅限于插入 HTML 片段。

5. 我可以添加其他 CSS 类吗？

   是的，可以通过修改 runjs 代码来添加其他 CSS 类。

结论

使用 bslib 中的 runjs() 函数，我们可以修改 nav_insert 后插入的导航标签的 CSS 类和样式。这允许我们创建样式一致的选项卡式应用程序。