有没有一种方法可以禁用/启用点击仪表板侧边栏，以防止用户导航到闪亮的不同视图？
我遇到了这个解决方案“disabling/enabling sidebar from server side”，但它所做的只是折叠/取消折叠侧边栏。
但我正在寻找一些解决方案，通过它我可以启用/禁用点击它，以便更好地控制何时允许访问用户导航到不同的视图。
一个用例是：如果我希望用户先填写第一页上的所有输入，然后他/她才能导航到不同的部分。
【问题讨论】：
标签： javascript r shiny
您可以使用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)
通过单击“启用（启用小部件）”和“禁用（禁用小部件）”按钮，您可以启用和禁用 menuitem 小部件。
编辑：
为确保在应用加载时 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)
【讨论】：
.inactiveLink 似乎不存在，但即便如此我仍然能够导航到“小部件”部分。如何确保应用程序首次加载时，用户无法导航到其他部分？
tags$head 更改为以下内容：tags$head(tags$style(".inactiveLink { pointer-events: visible; cursor: not-allowed; }"))
关于@yeahman269的评论：
非常感谢@SBista for your answer。有没有一种简单的方法可以使用常见的“禁止”图标修改光标？或者做一些直观地向用户显示选项卡（此处为“小部件”）已禁用的操作？因为我们无法从视觉上区分它的状态。
如果你想自定义光标并有相同样式的禁用按钮，你需要先自定义.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"))
)
)
【讨论】：