1

假设你有一个简单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图标对齐到框的右上角？

4

1 回答 1

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)
于 2019-12-11T16:33:28.290 回答