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 に答える