R Shiny：制作可折叠的 tabsetPanel

Posted 2023-03-24

【中文标题】R Shiny：制作可折叠的 tabsetPanel

【英文标题】：R Shiny: Make collapsible tabsetPanel

【发布时间】：2021-10-27 09:00:54

【问题描述】：

您好，我觉得这应该很简单，但我在任何地方都找不到解决方案。

在下面的代码中，我使导航栏页面可折叠，但找不到为 tabsetpanel 实现相同功能的方法，因此应用程序最终看起来很混乱，例如移动设备。

library(shiny)


# Define UI 
ui <- fluidPage(
    navbarPage("Hello",
        collapsible=T,
        tabPanel("a",
            tabsetPanel(type = "tabs",
                tabPanel("1"),
                tabPanel("2"),
                tabPanel("3"),
                tabPanel("4"),
                tabPanel("5"))),
        tabPanel("b"),
        tabPanel("c"),
        tabPanel("d"),
        tabPanel("e")
        )
    )

server <- function(session,input, output) 


shinyApp(ui = ui, server = server)

感谢您的帮助！

【参考方案1】：

您可以使用bootstrap-tabcollapse 库。下载the js file并将其放在www子文件夹中。

library(shiny)

js <- "$(document).ready(function()$('#tabset').tabCollapse(););"

ui <- fluidPage(
  tags$head(
    tags$style(
      html(
        "a.js-tabcollapse-panel-heading 
           display: block;
           text-align: center;
        "
      )
    ),
    tags$script(src = "bootstrap-tabcollapse.js"),
    tags$script(HTML(js))
  ),
  navbarPage("Hello",
             collapsible=T,
             tabPanel("a",
                      tabsetPanel(type = "tabs",
                                  tabPanel("1", tags$p("hello")),
                                  tabPanel("2", tags$p("hi")),
                                  tabPanel("3"),
                                  tabPanel("4"),
                                  tabPanel("5"),
                                  id = "tabset")),
             tabPanel("b"),
             tabPanel("c"),
             tabPanel("d"),
             tabPanel("e")
  )
)

server <- function(session,input, output) 


shinyApp(ui = ui, server = server)

【讨论】：

谢谢你的剪辑看起来正是我想要的。不幸的是，当我将它添加到我的应用程序时，没有任何变化，而且我对 javascript 等了解不足，无法弄清楚原因。感谢您的帮助！

@person 您是否将 JavaScript 文件放在应用的 www 子文件夹中？那应该可以了。

是的，我把它放在那里并保存为 bootstrap-tabcollapse.js。我还有其他功能正常的 HTML 标签，也许它们会干扰，问题是应用程序运行良好并且没有给出错误消息，它只是没有做它应该做的事情。 （如果没有其他答案我当然会给你积分）

@person 如果您发布了一个能够重现该问题的最小应用程序，我可以尝试提供帮助。

你能检查你的浏览器是否真的加载了js文件吗？您还可以在 JS 代码顶部包含 console.log("HELLO SO"); 并使用浏览器中的检查 -> 控制台选项卡检查其是否处于活动状态