Question

有没有办法可以禁用/启用点击信息中心侧边栏，以防止用户导航到闪亮的其他视图？

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

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

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

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

如果你想自定义光标和禁用按钮的样式一样，你需要先自定义.inactiveLink，然后修改.inactiveLink:active（这里建议： Add CSS cursor property when using "pointer-events: none"？ )

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"))
                )
   )

谢谢@SBista，你的第一个回答很有帮助。我希望它对@yeahman269 有所帮助。

禁用/启用在闪亮的仪表板侧边栏上单击

2 个答案: