Changing the font size of valueBoxes

问题

I would like to change the font size of the value and the subtitle for valueBoxes.

Below is my attempt, but would be grateful of any suggestions on how to change it in a way that looks similar to the default look. Below is my reporducible example.

require(shinydashboard)

valueBox2 <- function (value,header_val=4, subtitle, icon = NULL, color = "aqua", width = 4, 
                       href = NULL) {
  shinydashboard:::validateColor(color)
  if (!is.null(icon)) 
    shinydashboard:::tagAssert(icon, type = "i")
  boxContent <- div(class = paste0("small-box bg-", color), 
                    div(class = "inner", eval(parse(text=paste0('h',header_val,'(',shQuote(value),')'))), p(subtitle)), if (!is.null(icon)) 
                      div(class = "icon-large", icon))
  if (!is.null(href)) 
    boxContent <- a(href = href, boxContent)
  div(class = if (!is.null(width)) 
    paste0("col-sm-", width), boxContent)
}

ui = dashboardPage(title='hello',
  dashboardHeader(title='hello2'),
  dashboardSidebar(
    sliderInput('hval',label='header value',min=1,max=6,value=3)
  ),
  dashboardBody(
    valueBoxOutput('tmp')
  )
)

server = function(input, output) {
  output$tmp <- renderValueBox({
    valueBox2(value='90k',header_val = input$hval, subtitle='some long descritptive text',icon=icon("car"))
    })
}

shinyApp(ui=ui,server=server)

回答1:

Hi you can change font size directly in valueBox with a p tag without rewriting valueBox function (if you want you can, just wrap value and subtitle args in tags$p), try :

library("shiny")
library("shinydashboard")

# header
header <- dashboardHeader(title = "Changing the font size of valueBoxes", titleWidth = 450)

# sidebar
sidebar <- dashboardSidebar(disable = TRUE)

# body
body <- dashboardBody(
  valueBox(
    value = "90k",
    subtitle = "some long descritptive text",
    icon = icon("car")
  ),
  valueBox(
    value = tags$p("90k", style = "font-size: 150%;"),
    subtitle = tags$p("some long descritptive text", style = "font-size: 150%;"),
    icon = icon("car fa-lg")
  ),
  valueBox(
    value = tags$p("90k", style = "font-size: 200%;"),
    subtitle = tags$p("some long descritptive text", style = "font-size: 200%;"),
    icon = icon("car fa-2x")
  ),
  valueBoxOutput(outputId = "mybigbox")
)

# server
server <- function(input, output) {
  output$mybigbox <- renderValueBox({
    valueBox(
      value = tags$p("90k", style = "font-size: 300%;"),
      subtitle = tags$p("some long descritptive text", style = "font-size: 300%;"),
      icon = icon("car fa-3x")
    )
  })
}
shinyApp(ui = dashboardPage(header, sidebar, body), server = server)

来源：https://stackoverflow.com/questions/38441732/changing-the-font-size-of-valueboxes

标签

Shiny

shinydashboard