css - 使用来自 shinydashboard 的 infoBox 进入 shiny

Question

我正在使用 shiny 在我的办公室构建一个应用程序，我想使用像 infoBox 构建在 shinydashboard 中的功能。

是否可以在 navbarPage 中使用 infoBox() ？

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 中的样子:

这是我的应用程序使用 shiny 时的样子:

这是 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 文件使我的 shiny 输出看起来像 shinydashboard 输出吗？

## 编辑:

感谢@Victorp 和@MrFlick 我已经将所有 css 样式 与框或信息框的链接从 shinydashboard.css 和 adminLTE.css 复制/粘贴到我的 boostrap.css 文件，它可以正常工作。我可以使用自己的 css 样式和信息框功能。

Answer 1

您好，您还需要 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", 10 * 2, 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"),
  br(),
  fluidRow(
    infoBox("New Orders", 10 * 2, 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"))
  )
)
# Attach dependencies
ui <- addDeps(
  tags$body(shiny::fluidPage(ui)
  )
)
# server
server <- 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
    )
  })
}
# app
shinyApp(ui = ui, server = server)