时间戳

首页 > 解决方案 > 你如何改变 R Shiny 中 div 的样式？

css - 你如何改变 R Shiny 中 div 的样式？

问题描述

我正在尝试更改加载屏幕的 z-index，它告诉用户程序正在加载并阻止他们单击任何会使过程更长的内容（加载完成后，所有单击的区域都会一次单击）。

我目前有以下代码：

loadingState <- function(bool){
  if(bool){
    print("front")
    tags$style(HTML(".loadingDiv {z-index: 1000;}"))
  }
  else{
    print("behind")
    tags$style(HTML(".loadingDiv {z-index: -1000;}"))
  }
}

这个想法是我可以使用这个函数来显示和隐藏 div。这是 CSS 样式表：

.loadingDiv {
  position: fixed;
  z-index: 1000;
  background-color: black; //so I can see if the div is visible or not. Will be transparent
  opacity: .2;
  width:100%;
  height:100%;
  cursor:wait;
}

注意：它从 1000 开始，因为在程序第一次启动时会开始一些计算

我将在其中使用它的功能是这样的：

laggyFunc <- function(){
  loadingState(TRUE)
  -
  - laggy code
  -
  loadingState(FALSE)
}

通过一些 print() 调试，我发现 loadingState() 在正确的时间运行，但是 tags$style(HTML(".loadingDiv {z-index: 1000;}")) 部分没有做任何可见的事情到 div （所有加载完成后它就呆在那里）

总之，我想知道如何改变 loadingDiv 的风格。我知道 JavaScript 可以在 HTML 中做到这一点，但我不熟悉 JS 如何在 r shiny 中工作（所以任何教程链接也将是一个很好的帮助：D）

感谢您的阅读，我希望您度过愉快的一天 :)

标签： cssrshiny

解决方案

前言：SmokeyShakers 为我指出了这个答案的确切方向，我只是不知道 Shinyjs 必须通过在 ui 中声明它来初始化，useShinyjs() 而不是尝试更改 div 的 z-index，我使用了这些命令： shinyjs::show('loadingDiv') shinyjs::hide('loadingDiv') 那里也是一个 shinyjs::toggle() 将 div 从隐藏更改为显示或显示更改为隐藏（切换可见性），以防你在某个时候想要你

重要说明：当试图显示和隐藏一个 div 时，引用它的 id，而不是类。useShinyjs()在您的 ui 中 声明代码可以正常工作：ui <- tagList(useShinyjs(),includeCSS("www/stylesheet.css"), HTML("<div id='loadingDiv'></div>"), navbarPage(...))

这是我在这里的第一个问题和答案，所以如果 Smoky 应该被选为答案，那么他们可以对此提出相同的答案，我会选择它。同时我会选择这个。感谢所有的帮助！

推荐阅读