css – 使用shinydashboard的infoBox变成闪亮的

我正在使用闪亮来在我的办公室中构建一个应用程序,我想在shinydashboard中使用像infoBox build这样的功能.

是否可以将infoBox()用于navbarPage？

shinyUI(fluidPage(  
  navbarPage(title="my title",collapsible=T,tabPanel("Update",icon=icon("refresh","fa-2x",lib="font-awesome"),dashboardBody(
            fluidRow(infoBox("New Orders",10 * 2,icon = icon("credit-card"))
             )))

我知道这肯定只是一个css风格的故事,但我无法弄清楚如何做到这一点.

这是它在shinydashboard中的样子：

这是我的应用程序使用闪亮的样子：

这是infoBox()生成的HTML代码：

<div class="col-sm-4">
  <div class="info-Box bg-purple">
    <span class="info-Box-icon">
      <i class="fa fa-download"></i>
    </span>
    <div class="info-Box-content">
      <span class="info-Box-text">Progress</span>
      <span class="info-Box-number">25%</span>
    </div>
  </div>
</div>

我可以制作一个css文件,使我的闪亮输出看起来像shinydashboard输出？

##编辑：

感谢@Victorp和@MrFlick我将所有css样式复制/粘贴到Box或infoBox frome shinydashboard.css和adminLTE.css链接到我的boostrap.css文件中,它可以正常工作.我可以使用自己的CSS样式和信息框功能.

解决方法

您好,您还需要AdminLTE.css文件(您可以在shinydashboard目录中找到它)：

### ui
library("shiny")
fluidPage(
  tags$h1("Example of an infoBox with shiny"),# Add CSS files
  includeCSS(path = "AdminLTE.css"),includeCSS(path = "shinydashboard.css"),br(),fluidRow(
    infoBox("New Orders",icon = icon("credit-card"),fill = TRUE),infoBoxOutput("progressBox2"),infoBoxOutput("approvalBox2")
  ),fluidRow(
    # Clicking this will increment the progress amount
    Box(width = 4,actionButton("count","Increment progress"))
  )
)
### server
library("shiny")
function(input,output) {
  output$progressBox2 <- renderInfoBox({
    infoBox(
      "Progress",paste0(25 + input$count,"%"),icon = icon("list"),color = "purple",fill = TRUE
    )
  })
  output$approvalBox2 <- renderInfoBox({
    infoBox(
      "Approval","80%",icon = icon("thumbs-up",lib = "glyphicon"),color = "yellow",fill = TRUE
    )
  })
}

如果您复制应用目录中的文件,此应用程序将起作用,如果您不想这样做,您可以这样做：

# Function for adding dependencies
library("htmltools")
addDeps <- function(x) {
  if (getoption("shiny.minified",TRUE)) {
    adminLTE_js <- "app.min.js"
    adminLTE_css <- c("AdminLTE.min.css","_all-skins.min.css")
  } else {
    adminLTE_js <- "app.js"
    adminLTE_css <- c("AdminLTE.css","_all-skins.css")
  }

  dashboardDeps <- list(
    htmlDependency("AdminLTE","2.0.6",c(file = system.file("AdminLTE",package = "shinydashboard")),script = adminLTE_js,stylesheet = adminLTE_css
    ),htmlDependency("shinydashboard",as.character(utils::packageVersion("shinydashboard")),c(file = system.file(package = "shinydashboard")),script = "shinydashboard.js",stylesheet = "shinydashboard.css"
    )
  )

  shinydashboard:::appendDependencies(x,dashboardDeps)
}

library("shiny")
# ui 
ui <- fluidPage(
  tags$h1("Example of an infoBox with shiny"),"Increment progress"))
  )
)
# Attach dependencies
ui <- addDeps(
  tags$body(shiny::fluidPage(ui)
  )
)
# server
server <- function(input,fill = TRUE
    )
  })
}
# app
shinyApp(ui = ui,server = server)

原文地址：https://www.jb51.cc/css/215924.html