更改图标在 valueBox 中的位置

Question

假设您有一个来自 shinydashboard 包的简单 valueBox()：

library(shiny)
library(shinydashboard)
library(shinyWidgets)

ui <- dashboardPage(
  dashboardHeader(title = "Basic dashboard"),
  dashboardSidebar(),
  dashboardBody(
    fluidRow(width = 12, 
             valueBoxOutput("box")
    )
  )
)
)

server <- function(input, output) {

  output$box<-renderValueBox(     

    valueBox(
      value = "ValueBox Title",
      subtitle = tagList("Some information about the box.",
                         p(""),
                         "Some more information about the box.",
                         p(""),
                         "Even more information about the box.",
                         shinyWidgets::progressBar(id = "test", value = 10, total = 10, display_pct = FALSE, striped = FALSE, status = "danger")
      ),
      icon = icon("user-check"),
      color = "green"
    ))

}

app<-shinyApp(ui = ui, server = server)
runApp(app, host="0.0.0.0",port=5050, launch.browser = TRUE)

我在 valueBox() 中添加了一些额外的信息，例如一些额外的字幕和进度条。但是，您会注意到 valueBox 图标与框的 右下角 对齐，这意味着进度条（或其他内容）可能会妨碍的图标。有没有一种简单的方法可以将 valueBox 图标与框的 右上角 对齐？

Answer 1

这可以通过 CSS 完成。

将 tags$head(tags$style(HTML('.small-box .icon-large {top: 5px;}'))) 添加到正文中，您应该可以开始了。

完整代码：

library(shiny)
library(shinydashboard)
library(shinyWidgets)

ui <- dashboardPage(
  dashboardHeader(title = "Basic dashboard"),
  dashboardSidebar(),
  dashboardBody(

    tags$head(tags$style(HTML('.small-box .icon-large {top: 5px;}'))),

    fluidRow(width = 12, 
             valueBoxOutput("box")
    )
  )
)
)

server <- function(input, output) {

  output$box<-renderValueBox(     

    valueBox(
      value = "ValueBox Title",
      subtitle = tagList("Some information about the box.",
                         p(""),
                         "Some more information about the box.",
                         p(""),
                         "Even more information about the box.",
                         shinyWidgets::progressBar(id = "test", value = 10, total = 10, display_pct = FALSE, striped = FALSE, status = "danger")
      ),
      icon = icon("user-check"),
      color = "green"
    ))

}

app<-shinyApp(ui = ui, server = server)
runApp(app, host="0.0.0.0",port=5050, launch.browser = TRUE)

更改图标在 valueBox 中的位置

Change position of icon in valueBox

shiny

shinydashboard

shinywidgets