闪亮的仪表板框中的中心标题

Question

我正在为应用程序使用闪亮的仪表板，但找不到使标题居中的方法：

box(title = "Labels"
, status = "primary", solidHeader = T...

“标签标题位于框的左角，希望它位于中间，有什么想法吗？

Answer 1

为您提供一些选择...

library(shiny)
library(shinydashboard)

ui <- shinyUI(dashboardPage(

  dashboardHeader(title = "Test App"),

  dashboardSidebar(

    selectInput("dt","Data", choices = list("cars","mtcars","pressure")  )

  ),

  ## BODY

  dashboardBody(
    fluidRow(
      column(
        width = 10, 

        box(title = h1("My Title with h1 ", align="center"),
            solidHeader = T,
            width = 5, height = 500,
            collapsible = T,
            plotOutput("plot1", height=350)
            ),
        box(title = h6("My Title with h6 ", align="center"),
            solidHeader = T,
            width = 5, height = 500,
            collapsible = T,
            plotOutput("plot2")
        ))), br(), br(),
    fluidRow(
      column(width = 8, align="center",
             box(title = div("My Title with div, red color and font-size 22 ", style='color:red; font-size:22px;'),
                 solidHeader = T,
                 width = 8, height = 500,
                 collapsible = T,
                 plotOutput("plot3")
             ) )
    )
      
  
  )))

server <- shinyServer(function(input, output) {
  
  output$plot1 <- renderPlot({
    req(input$dt)
    plot(get(input$dt))
  })

  output$plot2 <- renderPlot({plot(mtcars)})

  output$plot3 <- renderPlot({plot(pressure)})
})

shinyApp(ui = ui, server = server)

Answer 2

您可以应用一些 CSS 使文本在框中居中。

.box.box-solid.box-primary { 文本对齐：居中； }

ui <- dashboardPage(
 dashboardHeader(title = "Centered Title Box Example"),
 dashboardSidebar(),
 dashboardBody(
  tags$head(
   tags$style(HTML("
   .box.box-solid.box-primary {
    text-align: center;
    }"))
  ),
  fluidRow(
   box(
    title ="Centered Title Box", 
    status = "primary",
    solidHeader = TRUE,
    collapsible = TRUE,
    width = 6,
    height = 200,
    plotOutput("plot")
   )
  )
 )
)