使 ShinyApp 的一部分变灰

Question

我有一个应用程序，我希望将用户未处理的任何部分显示为灰色。当特定部分变灰时，用户应该无法修改该部分中的任何内容。我想知道是否可以将“灰色”元素添加到闪亮的应用程序中？

这是一个 MWE：

用户界面：

library(shiny)
library(shinyjs)

ui <- fluidPage(
  useShinyjs(),
  navbarPage(title = "Grey out", 
             tabPanel(title = "test", 
               column(width = 6, 
                      actionButton(inputId = "go", label = "GO")
               ), 
               column(width = 6, 
                      actionButton(inputId = "back", label = "BACK")
               )
             )
  )
)

服务器：

server <- function (session, input, output) {
  disable(id = "back")
  
  observe({
    if (input$go > 0) {
      enable(id = "back")
      disable(id = "go")
    }
  })
  
  observe({
    if (input$back > 0) {
      enable(id = "go")
      disable(id = "back")
    }
  })
}

shinyApp(ui = ui, server = server)

在MWE中，只有两个actionButton，“go”和“back”。最初，包含“back”actionButton 的列应该是灰色的。当用户单击“go”时，包含“go”的列应显示为灰色，而另一列变为可访问。目前我只能启用和禁用actionButton。

Answer 1

library(shiny)
library(shinyjs)

ui <- fluidPage(
    useShinyjs(),
    tags$head(tags$style(
    '
    .grey-out {
        background-color: #eee;
        opacity: 0.2;
    }
    '
    )),
    navbarPage(title = "Grey out",
               tabPanel(title = "test",
                        column(width = 6, id ="left",
                               actionButton(inputId = "go", label = "GO"),
                               p("some text ...."),
                               p("some text ...."),
                               p("some text ...."),
                               p("some text ...."),
                               p("some text ...."),
                               p("some text ....")
                        ),
                        column(width = 6, id ="right",
                               actionButton(inputId = "back", label = "BACK"),
                               p("some text ...."),
                               p("some text ...."),
                               p("some text ...."),
                               p("some text ...."),
                               p("some text ...."),
                               p("some text ....")
                        ),
                        tags$script(
                        '
                        $("#go").click(function(){
                            $("#left").addClass("grey-out");
                            $("#right").removeClass("grey-out");
                        });
                        $("#back").click(function(){
                            $("#right").addClass("grey-out");
                            $("#left").removeClass("grey-out");
                        });
                        '
                        )
               )
    )
)

server <- function (session, input, output) {
    disable(id = "back")
    observe({
        req(input$go)
        enable(id = "right")
        disable(id = "left")
    })

    observe({
        req(input$back)
        enable(id = "left")
        disable(id = "right")
    })
}

shinyApp(ui = ui, server = server)

1. 我们为左右列提供了一些 ID，以便稍后我们可以轻松选择它们。
2. 我添加了一些p标签来伪造标签上的一些内容。
3. 添加tags$head(tags$style( 标记以添加我们的grey-out 类，以便稍后我们可以轻松更改CSS。在这个类中，我们将背景颜色更改为灰色并降低不透明度。
4. 从 UI 添加一些 js 代码，所以当您单击这两个按钮时，添加 grey-out 类以更改对面列的 CSS。我可以从 UI 端用 js 编写整个东西，不需要 shinyjs 包，但是由于你已经使用了一些，而且我假设你对纯 js 了解不多，所以我保留了你的 shinyjs 代码，不会给你学习曲线太长。
5. 我们选择列 ID 并禁用整个列，而不是从服务器禁用按钮。因此，如果您选择父标签，shinyjs 将为您禁用所有子元素。
6. 还可以用更闪亮的方式重写您的观察者。