如何使用SubItem打开带有actionButton的菜单

Question

我正在开发我的第一个闪亮的应用程序，我想在mainPage上设置一些按钮，这些按钮可以重定向到我创建的菜单subItens。

我试着用菜单subItens链接来做这件事，但是没有起作用。因此，我复制了用于执行菜单subItens的代码，并将其放入actionButton代码中。它运行良好，但只是在第一次点击。我需要重新加载页面到按钮工作。

你们知道怎么修吗？

这里是menuSubItem代码

sidebarMenu( id = "tabs",
          menuItem("Conjuntura", tabName = "conjuntura", icon = icon("chart-bar"),
                   menuSubItem("Visão Geral",
                               tabName = "visao_geral"),
                   menuSubItem("Atividade Econômica",
                               tabName = "atividade_economica"),
dashboardBody(
        tabItems(
          # tab visão geral
          tabItem(
            tabName = "visao_geral",
            mod_conj_titulo_ui("titulo_ui_1")
          ),
          # tab conjuntura
          tabItem(
            tabName = "atividade_economica",
            mod_conj_atividade_economica_ui("atividade_economica_ui_1"),
            mod_conj_atividade_economica_es_ui("atividade_economica_es_ui_1")
            )

这里是按钮代码

actionButton(inputId = "atividade_economica", 
                 label = menuSubItem(HTML("<br>Atividade<br>Econômica"),
                                     tabName = "atividade_economica", 
                                     icon = icon("chart-line", class = "icon")),
                 class = "button"
                 )

我没有在服务器上放任何东西来运行按钮。我想这就是问题所在。

Answer 1

最简单的方法是依赖加载的bootstrap JavaScript库，为您处理切换。因此，您只需要在某个地方放置一个<a>标记，该标记具有适当的data-toggle和data-value属性。

一些额外的JavaScript可以正确突出显示菜单栏中选定的选项卡，从而使整个过程接近：

library(shinydashboard)
library(shiny)

js <- HTML(paste("$(() => $('.mimic-menu').on('click', function() {",
                 "   const menu_item = $(this).data('value');",
                 "   const $parent = $('.sidebar-menu [data-value=\"' + menu_item + '\"]').closest('li');",
                 "   $('.sidebar-menu li').removeClass('active');",
                 "   $parent.addClass('active');",
                 "}));", sep = "\n"))

header <- dashboardHeader()

sidebar <- dashboardSidebar(
   sidebarMenu(
      id = "tabs",
      menuItem("Dashboard", tabName = "dashboard", icon = icon("dashboard")),
      menuItem("Widgets", icon = icon("th"), tabName = "widgets", badgeLabel = "new",
               badgeColor = "green"),
      menuItem("Charts", icon = icon("bar-chart-o"),
               menuSubItem("Sub-item 1", tabName = "subitem1"),
               menuSubItem("Sub-item 2", tabName = "subitem2")
      )
   )
)
body <- dashboardBody(
   tags$head(tags$script(js)),
   tabItems(
      tabItem("dashboard",
              div(p("Dashboard tab content"))
      ),
      tabItem("widgets",
              "Widgets tab content",
              tags$a(href = "#shiny-tab-dashboard", `data-toggle` = "tab",
                     class = "btn btn-default mimic-menu",
                     `data-value` = "dashboard", "Click to go to dashboard")
      ),
      tabItem("subitem1",
              "Sub-item 1 tab content",
              tags$a(href = "#shiny-tab-dashboard", `data-toggle` = "tab",
                     class = "btn btn-default mimic-menu",
                     `data-value` = "dashboard", "Click to go to dashboard")
      ),
      tabItem("subitem2",
              "Sub-item 2 tab content",
              tags$a(href = "#shiny-tab-dashboard", `data-toggle` = "tab",
                     class = "btn btn-default mimic-menu",
                     `data-value` = "dashboard", "Click to go to dashboard")
      )
   )
)

shinyApp(
   ui = dashboardPage(header, sidebar, body),
   server = function(input, output) { }
)

解释

我们所需要做的就是使用一个属性标签，该标记设置属性data-value = <name of the tab we want to switch to>.

• Then，automagically.

• However，和data-toggle = "tab" data-toggle = "tab"，这将导致侧边栏中的最后一个选定菜单项被高亮显示的不干净状态，即使我们切换了选项卡。因此，我们添加了一些自定义的JavaScript，它对自创链接上的单击做出反应，从而在侧边栏菜单中选择合适的项目。

• 给该链接赋予按钮的外观和感觉，我们添加btn和btn-default类。mimic-menu类是功能性的，可以触发上述代码.

屏幕截图

​

​