Question 180212 in CSS Question posted in
Some basic documentation can be found here.

How can I add a large, colored icon to the center of a shiny CSS modal?

I want to create a shiny modal that looks like a scary warning.

Here is what I have so far:

library(shiny)


ui = basicPage(
  actionButton("show", "Show modal dialog")
)

server = function(input, output) {
  observeEvent(input$show, {
    showModal(modalDialog(
      title = icon("bomb"),
      "This is an important message!"
    ))
  })
}

shinyApp(ui, server)

which produces this

enter image description here

How can I make the icon way bigger, centered, and a warning color like orange or red? I’m using bslib for theming so ideally the warning color would be tied to the theme.

Tags:

2

Answers


  1. 0

    This is based on FontAwesome, which allows sizing, see https://fontawesome.com/docs/web/style/size.

    Demo:

    shiny::icon("bomb")
shiny::icon("bomb", class="fa-2xl")
shiny::icon("bomb", class="fa-10x", style="color: Tomato;")

    Respectively:

    normal

    fa-2xl

    fa-10x, color Tomato

    As for centering it, if you’re not afraid to center all <h4> elements on the page, this works:

    library(shiny)
ui = basicPage(
  tags$style(HTML("h4 { text-align: center; }")),
  actionButton("show", "Show modal dialog")
)
server = function(input, output) {
  observeEvent(input$show, {
    showModal(modalDialog(
      title = icon("bomb", class="fa-10x", style="color: Tomato;"),
      "This is an important message!"
    ))
  })
}
shinyApp(ui, server)

    big, red, centered bomb

    Login or Signup to reply.
  2. 0

    You can use a sweet alert, but you’ll have only four choices for the icon.

    library(shiny)
library(shinyWidgets)

ui <- fluidPage(
  actionButton(
    inputId = "btn",
    label = "Launch a warning sweet alert",
    icon = icon("check")
  )
)

server <- function(input, output, session) {
  
  observeEvent(input$btn, {
    show_alert(
      title = "Important !!",
      text = "Read this message...",
      type = "warning"
    )
  })
  
}

shinyApp(ui, server)

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search