禁用/启用点击闪亮的仪表板侧边栏

Question

有没有办法可以禁用/启用仪表板侧边栏上的单击，以防止用户导航到闪亮的不同视图？。

我遇到了这个解决方案“从服务器端禁用/启用侧边栏”，但它所做的只是折叠/取消折叠侧边栏。

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

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

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)

通过单击“启用（启用小部件）”和“禁用（禁用小部件）”按钮，您可以启用和禁用菜单项小部件。

编辑：

为了确保应用程序加载时

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)

Answer 2

关于@yeahman269的评论：

非常感谢@SBista的回答。有没有一种简单的方法可以用常见的“禁止”图标修改光标？或者做一些直观地向用户显示该选项卡（此处为“小部件”）已禁用的操作？因为我们无法通过视觉区分它的状态。

如果您想自定义光标并具有相同样式的禁用按钮，则需要先自定义

.inactiveLink

，然后修改

.inactiveLink:active

（如下建议： 使用“pointer-events: none”时添加 CSS 光标属性？ )

dashboardSidebar(
    useShinyjs(),
    sidebarMenu(id = "sidebar",
                tags$head(tags$style(".inactiveLink {
                                     cursor: not-allowed;
                                     }
                                     .inactiveLink:active {
                                     pointer-events: none;
                                     }")),
     menuItem("Dashboard", tabName = "dashboard", icon = icon("dashboard")),
     menuItem("Widgets", tabName = "widgets", icon = icon("th"))
                )
   )