從shinydashboard使用infoBox變成閃亮

Question

我使用shiny在我的辦公室建立一個應用程序，我想使用infoBox建立shinydashboard功能。

是否可以使用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 style故事，但我不能想出如何做到這一點。

這裏是怎麼看起來像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 style與框或信息框弗羅姆shinydashboard.css和adminLTE.css鏈接到我boostrap.css文件，它正常工作。我可以使用我自己的css風格和信息框功能。

Answer 1

你好，你還需要AdminLTE.css文件（你可以找到它在shinydashboard DIR）：

### 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)