[英]Use infoBox from shinydashboard into shiny
I'm using shiny
to build an App in my office, and I would like to use features like infoBox
build in shinydashboard
. 我正在使用shiny
来在我的办公室中构建一个应用程序,我想在shinydashboard
使用像infoBox
build这样的shinydashboard
。
is it possible to use infoBox()
into a navbarPage
? 是否可以将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"))
)))
I know it's certainly just a story of css style
but i cant figured out how to do it. 我知道这肯定只是一个css style
的故事,但我无法弄清楚如何做到这一点。
here is how it look like in shinydashboard
: 这是它在shinydashboard
中的shinydashboard
:
here is how it look like in my App using shiny
: 这是我的应用程序使用shiny
样子:
And here is the html
code made by infoBox()
: 这是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>
can I make a css file to make my shiny
output look like the shinydashboard
output ? 我可以制作一个css文件,使我的shiny
输出看起来像shinydashboard
输出?
## EDIT : ##编辑:
Thank's to @Victorp and @MrFlick i have copy/paste all css style
in link with box or infobox frome shinydashboard.css
and adminLTE.css into my boostrap.css
file and it work correctly. 感谢@Victorp和@MrFlick我将所有css style
复制/粘贴到box或infobox shinydashboard.css
和adminLTE.css链接到我的boostrap.css
文件中,它可以正常工作。 I can use my own css style and the infobox feature. 我可以使用自己的CSS样式和信息框功能。
Hello you also need the AdminLTE.css
file (you can find it in the shinydashboard
dir) : 您好,您还需要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
)
})
}
This app will work if you copy the files in your app directory, if you don't want to do that you can do : 如果您复制应用目录中的文件,此应用程序将起作用,如果您不想这样做,您可以这样做:
# 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)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.