渲染一个 shinydashboard 信息框......没有 shinydashboard
render a shinydashboard infobox... without shinydashboard
我正在开发一个基于标准布局(fluidpage()
,我无法更改)的 Shiny 应用程序,我需要向用户显示一些反应性 KPI,color , icon 和 text 取决于一些计算的结果。此类信息的理想格式是 object,就像 shinydashboard 中的 infoBox()
一样:
当然,当我将此代码放入流畅的页面时,它会失去其样式:
infoBox("Accuracy", "50%", icon = icon("ok", lib = "glyphicon"), color = "yellow")
我尝试了什么:
在我的 fluidpage 应用程序中添加一个仪表板页面,它可以工作,但我无法删除菜单、header 和它周围的其他内容。
尝试自定义不太好的文本输出:
- 我不知道如何很好地添加字形。
你有什么解决方案可以实现吗?
谢谢,
您可以从 AdminLTE 复制 CSS 并创建一个新的 css 文件。我复制了信息框组件的内容,以及 bg-yellow
class。请注意,为了使用其他颜色,您还必须复制相应的 class,或者使用您自己的 css 为您的元素提供自定义颜色。
为了制作一个工作示例,我包含了 CSS 内联。当然,更简洁的解决方案是创建一个单独的 CSS 文件。如果您不熟悉如何操作,可以找到说明 here。希望对您有所帮助!
library(shiny)
library(shinydashboard)
ui <- shinyUI(fluidPage(
tags$head(
tags$style(HTML("/*
* Component: Info Box
* -------------------
*/
.info-box {
display: block;
min-height: 90px;
background: #fff;
width: 100%;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
border-radius: 2px;
margin-bottom: 15px;
}
.info-box small {
font-size: 14px;
}
.info-box .progress {
background: rgba(0, 0, 0, 0.2);
margin: 5px -10px 5px -10px;
height: 2px;
}
.info-box .progress,
.info-box .progress .progress-bar {
border-radius: 0;
}
.info-box .progress .progress-bar {
background: #fff;
}
.info-box-icon {
border-top-left-radius: 2px;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: 2px;
display: block;
float: left;
height: 90px;
width: 90px;
text-align: center;
font-size: 45px;
line-height: 90px;
background: rgba(0, 0, 0, 0.2);
}
.info-box-icon > img {
max-width: 100%;
}
.info-box-content {
padding: 5px 10px;
margin-left: 90px;
}
.info-box-number {
display: block;
font-weight: bold;
font-size: 18px;
}
.progress-description,
.info-box-text {
display: block;
font-size: 14px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.info-box-text {
text-transform: uppercase;
}
.info-box-more {
display: block;
}
.progress-description {
margin: 0;
}
.bg-yellow,
.callout.callout-warning,
.alert-warning,
.label-warning,
.modal-warning .modal-body {
background-color: #f39c12 !important;
}
"))
),
headerPanel("New Application"),
sidebarPanel(),
mainPanel(
infoBox("Accuracy", "50%", icon = icon("ok", lib = "glyphicon"), color = "yellow")
)
)
)
server <- function(input,output,session)
{}
shinyApp(ui,server)
我正在开发一个基于标准布局(fluidpage()
,我无法更改)的 Shiny 应用程序,我需要向用户显示一些反应性 KPI,color , icon 和 text 取决于一些计算的结果。此类信息的理想格式是 object,就像 shinydashboard 中的 infoBox()
一样:
当然,当我将此代码放入流畅的页面时,它会失去其样式:
infoBox("Accuracy", "50%", icon = icon("ok", lib = "glyphicon"), color = "yellow")
我尝试了什么:
在我的 fluidpage 应用程序中添加一个仪表板页面,它可以工作,但我无法删除菜单、header 和它周围的其他内容。
尝试自定义不太好的文本输出:
- 我不知道如何很好地添加字形。
你有什么解决方案可以实现吗? 谢谢,
您可以从 AdminLTE 复制 CSS 并创建一个新的 css 文件。我复制了信息框组件的内容,以及 bg-yellow
class。请注意,为了使用其他颜色,您还必须复制相应的 class,或者使用您自己的 css 为您的元素提供自定义颜色。
为了制作一个工作示例,我包含了 CSS 内联。当然,更简洁的解决方案是创建一个单独的 CSS 文件。如果您不熟悉如何操作,可以找到说明 here。希望对您有所帮助!
library(shiny)
library(shinydashboard)
ui <- shinyUI(fluidPage(
tags$head(
tags$style(HTML("/*
* Component: Info Box
* -------------------
*/
.info-box {
display: block;
min-height: 90px;
background: #fff;
width: 100%;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
border-radius: 2px;
margin-bottom: 15px;
}
.info-box small {
font-size: 14px;
}
.info-box .progress {
background: rgba(0, 0, 0, 0.2);
margin: 5px -10px 5px -10px;
height: 2px;
}
.info-box .progress,
.info-box .progress .progress-bar {
border-radius: 0;
}
.info-box .progress .progress-bar {
background: #fff;
}
.info-box-icon {
border-top-left-radius: 2px;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: 2px;
display: block;
float: left;
height: 90px;
width: 90px;
text-align: center;
font-size: 45px;
line-height: 90px;
background: rgba(0, 0, 0, 0.2);
}
.info-box-icon > img {
max-width: 100%;
}
.info-box-content {
padding: 5px 10px;
margin-left: 90px;
}
.info-box-number {
display: block;
font-weight: bold;
font-size: 18px;
}
.progress-description,
.info-box-text {
display: block;
font-size: 14px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.info-box-text {
text-transform: uppercase;
}
.info-box-more {
display: block;
}
.progress-description {
margin: 0;
}
.bg-yellow,
.callout.callout-warning,
.alert-warning,
.label-warning,
.modal-warning .modal-body {
background-color: #f39c12 !important;
}
"))
),
headerPanel("New Application"),
sidebarPanel(),
mainPanel(
infoBox("Accuracy", "50%", icon = icon("ok", lib = "glyphicon"), color = "yellow")
)
)
)
server <- function(input,output,session)
{}
shinyApp(ui,server)