渲染一个 shinydashboard 信息框......没有 shinydashboard

Question

我正在开发一个基于标准布局（fluidpage()，我无法更改）的 Shiny 应用程序，我需要向用户显示一些反应性 KPI，color , icon 和 text 取决于一些计算的结果。此类信息的理想格式是 object，就像 shinydashboard 中的 infoBox() 一样：

当然，当我将此代码放入流畅的页面时，它会失去其样式：

infoBox("Accuracy",  "50%",  icon = icon("ok", lib = "glyphicon"), color = "yellow")

我尝试了什么：

在我的 fluidpage 应用程序中添加一个仪表板页面，它可以工作，但我无法删除菜单、header 和它周围的其他内容。
尝试自定义不太好的文本输出：
我不知道如何很好地添加字形。

你有什么解决方案可以实现吗？谢谢，

Answer 1

您可以从 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)

渲染一个 shinydashboard 信息框......没有 shinydashboard

render a shinydashboard infobox... without shinydashboard

r

shiny

shinydashboard

infobox