Question

假设您从valueBox()包中获得了一个简单的shinydashboard：

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中的位置

1 个答案: