如何将一个大的、带颜色的图标添加到闪亮模态框的中央

huangapple
go评论99阅读模式
英文:

How to add a large, colored icon to the center of a shiny modal

问题

我想创建一个看起来像可怕警告的闪亮模态框。

以下是我目前的进展：

  1. library(shiny)
  3. ui = basicPage(
  4.   actionButton("show", "显示模态对话框")
  5. )
  7. server = function(input, output) {
  8.   observeEvent(input$show, {
  9.     showModal(modalDialog(
  10.       title = icon("bomb", lib = "glyphicon"),
  11.       "这是一条重要消息!"
  12.     ))
  13.   })
  14. }
  16. shinyApp(ui, server)

如何使图标变得更大、居中，并且是橙色或红色的警告颜色？我正在使用bslib进行主题设置，所以理想情况下警告颜色应该与主题相关。

英文:

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

Here is what I have so far:

  1. library(shiny)
  4. ui = basicPage(
  5.   actionButton("show", "Show modal dialog")
  6. )
  8. server = function(input, output) {
  9.   observeEvent(input$show, {
  10.     showModal(modalDialog(
  11.       title = icon("bomb"),
  12.       "This is an important message!"
  13.     ))
  14.   })
  15. }
  17. 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。

演示：

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

分别是：

如何将一个大的、带颜色的图标添加到闪亮模态框的中央

如何将一个大的、带颜色的图标添加到闪亮模态框的中央

如何将一个大的、带颜色的图标添加到闪亮模态框的中央

至于居中，如果您不怕将页面上所有的<h4>元素都居中，可以使用以下方法：

  1. library(shiny)
  2. ui = basicPage(
  3.   tags$style(HTML("h4 { text-align: center; }")),
  4.   actionButton("show", "Show modal dialog")
  5. )
  6. server = function(input, output) {
  7.   observeEvent(input$show, {
  8.     showModal(modalDialog(
  9.       title = icon("bomb", class="fa-10x", style="color: Tomato;"),
  10.       "这是一条重要消息！"
  11.     ))
  12.   })
  13. }
  14. shinyApp(ui, server)

如何将一个大的、带颜色的图标添加到闪亮模态框的中央

英文:

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

Demo:

  1. shiny::icon(&quot;bomb&quot;)
  2. shiny::icon(&quot;bomb&quot;, class=&quot;fa-2xl&quot;)
  3. shiny::icon(&quot;bomb&quot;, class=&quot;fa-10x&quot;, style=&quot;color: Tomato;&quot;)

Respectively:

如何将一个大的、带颜色的图标添加到闪亮模态框的中央

如何将一个大的、带颜色的图标添加到闪亮模态框的中央

如何将一个大的、带颜色的图标添加到闪亮模态框的中央

As for centering it, if you're not afraid to center all &lt;h4&gt; elements on the page, this works:

  1. library(shiny)
  2. ui = basicPage(
  3.   tags$style(HTML(&quot;h4 { text-align: center; }&quot;)),
  4.   actionButton(&quot;show&quot;, &quot;Show modal dialog&quot;)
  5. )
  6. server = function(input, output) {
  7.   observeEvent(input$show, {
  8.     showModal(modalDialog(
  9.       title = icon(&quot;bomb&quot;, class=&quot;fa-10x&quot;, style=&quot;color: Tomato;&quot;),
  10.       &quot;This is an important message!&quot;
  11.     ))
  12.   })
  13. }
  14. shinyApp(ui, server)

如何将一个大的、带颜色的图标添加到闪亮模态框的中央

答案2

得分: 1

你可以使用一个Sweet Alert，但你只有四种图标可供选择。

  1. library(shiny)
  2. library(shinyWidgets)
  4. ui <- fluidPage(
  5.   actionButton(
  6.     inputId = "btn",
  7.     label = "启动警告 Sweet Alert",
  8.     icon = icon("check")
  9.   )
  10. )
  12. server <- function(input, output, session) {
  13.   
  14.   observeEvent(input$btn, {
  15.     show_alert(
  16.       title = "重要！！",
  17.       text = "阅读此消息...",
  18.       type = "warning"
  19.     )
  20.   })
  21.   
  22. }
  24. shinyApp(ui, server)
英文:

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

  1. library(shiny)
  2. library(shinyWidgets)
  4. ui &lt;- fluidPage(
  5.   actionButton(
  6.     inputId = &quot;btn&quot;,
  7.     label = &quot;Launch a warning sweet alert&quot;,
  8.     icon = icon(&quot;check&quot;)
  9.   )
  10. )
  12. server &lt;- function(input, output, session) {
  13.   
  14.   observeEvent(input$btn, {
  15.     show_alert(
  16.       title = &quot;Important !!&quot;,
  17.       text = &quot;Read this message...&quot;,
  18.       type = &quot;warning&quot;
  19.     )
  20.   })
  21.   
  22. }
  24. shinyApp(ui, server)

如何将一个大的、带颜色的图标添加到闪亮模态框的中央

huangapple
  • 本文由 发表于 2023年6月2日 02:01:04
  • 转载请务必保留本文链接：https://go.coder-hub.com/76384548.html
  • css
  • r
  • shiny
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定