shinydashboard infobox 렌더링 shinydashboard 없음

Question

표준 레이아웃 (fluidpage(), 나는 변경할 수 없음)을 기반으로하는 Shiny 응용 프로그램에서 작업하고 어떤 반응 KPI를 사용자에게 표시해야합니까? 색상, 아이콘 및 텍스트은 일부 계산 결과에 따라 다릅니다.

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

: 나는 fluidpage이 코드를 삽입 할 때

물론

는, 그것의 스타일을 푼다 : 이런 종류의 정보에 대한 이상적인 형식은 shinydashboard에서 바로이 같은 infoBox() 같은 객체가 될 것입니다 내가 뭘하려

:

• 내 Fluidage 응용 프로그램 내부에 대시 보드 페이지를 추가하면 작동하지만 메뉴, 머리글 및 기타 주변 장치를 제거 할 수 없습니다. 아주 좋은하지 않습니다 사용자 정의 textoutput에

• 시도는 :

• 나는 멋지게 glyphicon를 추가하는 방법을 알고하지 않았다.

달성 할 해결책이 있습니까? 고마워,

Answer 1

AdminLTE에서 CSS를 복사하고 새 CSS 파일을 만들 수 있습니다. 정보 상자 구성 요소의 내용과 bg-yellow 클래스의 내용을 복사했습니다. 다른 색상을 사용하려면 해당 클래스도 복사하거나 고유 한 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)