英文:
How to add a large, colored icon to the center of a shiny modal
问题
我想创建一个看起来像可怕警告的闪亮模态框。
以下是我目前的进展：
library(shiny)
ui = basicPage(
actionButton("show", "显示模态对话框")
)
server = function(input, output) {
observeEvent(input$show, {
showModal(modalDialog(
title = icon("bomb", lib = "glyphicon"),
"这是一条重要消息!"
))
})
}
shinyApp(ui, server)
如何使图标变得更大、居中，并且是橙色或红色的警告颜色？我正在使用bslib进行主题设置，所以理想情况下警告颜色应该与主题相关。
英文:
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
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.
答案1
得分: 1
这基于FontAwesome，允许调整大小，详见https://fontawesome.com/docs/web/style/size。
演示：
shiny::icon("bomb")
shiny::icon("bomb", class="fa-2xl")
shiny::icon("bomb", class="fa-10x", style="color: Tomato;")
分别是：
至于居中，如果您不怕将页面上所有的<h4>元素都居中，可以使用以下方法：
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;"),
"这是一条重要消息！"
))
})
}
shinyApp(ui, server)
英文:
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:
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)
答案2
得分: 1
你可以使用一个Sweet Alert，但你只有四种图标可供选择。
library(shiny)
library(shinyWidgets)
ui <- fluidPage(
actionButton(
inputId = "btn",
label = "启动警告 Sweet Alert",
icon = icon("check")
)
)
server <- function(input, output, session) {
observeEvent(input$btn, {
show_alert(
title = "重要！！",
text = "阅读此消息...",
type = "warning"
)
})
}
shinyApp(ui, server)
英文:
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)
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论