css - 不同地方的多个通知 Shiny 的应用程序

标签 css r notifications shiny

我做了一个简单的例子来说明我的问题,就是:

  • 如何在不同的位置设置相互独立的通知(假设我希望每个通知分别显示在右上角和左上角)

```

library(shiny)

  ui <- fluidPage(

    # tags$head(
    #   tags$style(
    #     HTML(".shiny-notification {
    #          position: fixed;
    #          top: 800px;
    #          left: 40px;
    #          width: 15em;
    #          opacity: 1;
    #          }
    #          "
    #     )
    #   )
    # )

    actionButton("showme", "Show Notification:")

  )

  server <- function(input, output, session) {

    observe({

      showNotification(
        id = "welcome_notif",
        "Blablablablabla .... blablablabla.",
        duration = 20, 
        closeButton = TRUE,
        type = "message")

    })

    observeEvent(input$showme,{

      showNotification( 
        id = "showme_notif",
        "Hihihi", # put text in notification
        duration = 30, 
        closeButton = TRUE,
        type = "message")

    })

  }

  shinyApp(ui = ui, server = server)

```

我看到 Shiny 的代码中有一个用于通知的特殊 CSS ( https://github.com/rstudio/shiny/blob/master/inst/www/shared/shiny.css )。

如果我更改 CSS 类(如注释代码所示),我只能设法更改所有通知的显示位置(但不是独立的)。

编辑:

我尝试将 addClass 与 shinyjs 一起使用:

library(shiny)
library(shinyjs)

  ui <- fluidPage(

    useShinyjs(),
    inlineCSS(list(.customclass = "position: fixed; top: 200px;")),

    actionButton("showme", "Show Notification:")

  )

  server <- function(input, output, session) {

    observe({

      showNotification(
        id = "welcome_notif",
        "Blablablablabla .... blablablabla.",
        duration = 20, 
        closeButton = TRUE,
        type = "message")

    })

    observeEvent(input$showme,{

      showNotification( 
        id = "showme_notif",
        "Hihihi", # put text in notification
        duration = 30, 
        closeButton = TRUE,
        type = "message")

    })

    observe({
      addClass(id = "showme_notif", class = "customclass")
    })

  }

  shinyApp(ui = ui, server = server)

正如 Florian 所建议的(见下文),但似乎我只能处理在 UI 中生成的元素,而不是像通知那样在服务器中生成的元素。

例如这个有效:

if (interactive()) {
    shinyApp(
      ui = fluidPage(
        useShinyjs(),
        inlineCSS(list(.customclass = "position: fixed; top: 200px;")),
        p(id = "element", "Watch what happens to me")
      ),
      server = function(input, output) {
        observe({
          addClass(id = "element", class = "customclass")
        })
      }
    )
  }

最佳答案

我能够修改元素的 CSS,因为通知获得了 id:shiny-notifaction-xxx 其中 xxx 是您的通知名称。但是所有通知都放在另一个容器中,我无法修改 CSS 以使其执行您想要的操作。

library(shiny)

ui <- fluidPage(

  tags$style("#shiny-notification-showme_notif {margin:20px;}"),

  actionButton("showme", "Show Notification:")

)

server <- function(input, output, session) {

  observe({

    showNotification(
      id = "welcome_notif",
      "Blablablablabla .... blablablabla.",
      duration = 200, 
      closeButton = TRUE,
      type = "message")

  })

  observeEvent(input$showme,{

    showNotification( 
      id = "showme_notif",
      "Hihihi", # put text in notification
      duration = 300, 
      closeButton = TRUE,
      type = "message")

  })

}

shinyApp(ui = ui, server = server)

关于css - 不同地方的多个通知 Shiny 的应用程序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45311732/

相关文章:

android - Android 中的通知构建检查

ios - 通知仅限于一个地理区域

html - 根据父级的宽度,让 n 个子级具有相等的宽度

css - 未获取@font-face 中使用的字体文件

r - 改变 R 中 split() 的输出格式

r - 每小时在 R 中保存一个文件

r - 简单的 R 3d 插值/曲面图

android - Flutter oneSignal 通知图标未设置

jquery - 选中复选框时将类添加到表

html - CSS位置相对强制元素的高度