Question

我做了一个简单的例子来展示我的问题，即：

如何在彼此独立的地方设置通知（假设我希望每个通知分别显示在右上角和左上方）

```

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)

```

我看到闪亮的代码（https://github.com/rstudio/shiny/blob/master/inst/www/shared/shiny.css）中有一个特殊的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")
        })
      }
    )
  }

Answer 1

我可以修改元素的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)

Answer 2

据弗洛里安说，答案可能是：

library(shiny)

  ui <- fluidPage(

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

    tags$style("#shiny-notification-welcome_notif {position: fixed; top: 800px; right: 40px; width: 15em; opacity: 1;}"),

    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)

并可根据需要进行修改。

不同地方的多个通知闪亮应用

2 个答案: