javascript - 禁用/启用点击 Shiny 的仪表板侧边栏

Question

有没有一种方法可以禁用/启用点击仪表板侧边栏，以防止用户导航到 Shiny 的不同 View ？

我遇到了这个解决方案“disabling/enabling sidebar from server side”，但它所做的只是折叠/取消折叠边栏。

但我正在寻找一些解决方案，通过它我可以启用/禁用点击它，以便更好地控制何时允许访问用户以导航到不同的 View 。

一个用例是:如果我希望用户先填写第一页上的所有输入，然后他/她才能导航到不同的部分。

Answer 1

您可以使用 shinyjs 包和一些自定义 css 来完成此操作。这是一个最小的例子:

library(shinydashboard)
library(shinyjs)

ui <- dashboardPage(
  dashboardHeader(title = "Basic dashboard"),
  dashboardSidebar(
    useShinyjs(),
    sidebarMenu(id = "sidebar",
      tags$head(tags$style(".inactiveLink {
                            pointer-events: none;
                           cursor: default;
                           }")),
     menuItem("Dashboard", tabName = "dashboard", icon = icon("dashboard")),
     menuItem("Widgets", tabName = "widgets", icon = icon("th"))
    )
    
  ),
  dashboardBody(
    tabItems(
      # First tab content
      tabItem(tabName = "dashboard",
              actionButton("Disable", "Disable Widgets"),
              actionButton("Enable", "Enable Widgets")
      ),
      
      # Second tab content
      tabItem(tabName = "widgets",
              h2("Widgets tab content")
      )
    )
    )
  )



server <- function(input, output){
  
  
  observeEvent(input$Disable, {
     addCssClass(selector = "a[data-value='widgets']", class = "inactiveLink")
    
  })
  observeEvent(input$Enable, {
    removeCssClass(selector = "a[data-value='widgets']", class = "inactiveLink")
  })
  
}
shinyApp(ui, server)

通过点击按钮“Enable(Enable Widgets)”和“Disable(Disable Widgets)”，您可以启用和禁用 menuitem widgets。

编辑:

要确保在应用程序加载时禁用 menuItems，您只需在服务器中添加 addCssClass 函数，以便在您的应用程序加载时执行它。

所以代码看起来像这样:

library(shinydashboard)
library(shinyjs)

ui <- dashboardPage(
  dashboardHeader(title = "Basic dashboard"),
  dashboardSidebar(
    useShinyjs(),
    sidebarMenu(id = "sidebar",
      tags$head(tags$style(".inactiveLink {
                            pointer-events: none;
                           cursor: default;
                           }")),
     menuItem("Dashboard", tabName = "dashboard", icon = icon("dashboard")),
     menuItem("Widgets", tabName = "widgets", icon = icon("th"))
    )
    
  ),
  dashboardBody(
    tabItems(
      # First tab content
      tabItem(tabName = "dashboard",
              actionButton("Disable", "Disable Widgets"),
              actionButton("Enable", "Enable Widgets")
      ),
      
      # Second tab content
      tabItem(tabName = "widgets",
              h2("Widgets tab content")
      )
    )
    )
  )



server <- function(input, output){
  
  #Disable menuitem when the app loads
  addCssClass(selector = "a[data-value='widgets']", class = "inactiveLink")
  
  observeEvent(input$Disable, {
     addCssClass(selector = "a[data-value='widgets']", class = "inactiveLink")
    
  })
  observeEvent(input$Enable, {
    removeCssClass(selector = "a[data-value='widgets']", class = "inactiveLink")
  })
  
}
shinyApp(ui, server)