css shinydashboard中框中的背景色

prdp8dxp  于 2022-12-30  发布在  其他
关注(0)|答案(1)|浏览(260)

我想在shinydashboard中为框使用自定义颜色。下面的css可以做到这一点,但当我有collapsible = TRUE时,它看起来不一致:

library(shiny)
library(shinydashboard)
library(shinydashboardPlus)

shinyApp(
  ui = dashboardPage(
    dashboardHeader(),
    dashboardSidebar(),
    dashboardBody(
      tags$style(HTML("

                    .box.box-solid.box-success>.box-header {
                    color:#2071B5;
                    background:#ABD7E9
                    }

                    .box.box-solid.box-success{
                    border-bottom-color:#ABD7E9;
                    border-left-color:#ABD7E9;
                    border-right-color:#ABD7E9;
                    border-top-color:#ABD7E9;
                    background:#ABD7E9

                    }

                    ")),

      box(
        title = "Shiny Box",
        status = "success",
        solidHeader = TRUE,
        collapsible = TRUE,
        collapsed = TRUE,
        tags$head(tags$style(HTML("div#inline label { width: 52%; }
                               div#inline input { display: inline-block; width: 68%;}"))),
        tags$head(
          tags$style(type="text/css", "#inline label{ display: table-cell; text-align: left; vertical-align: middle; }
                                   #inline .form-group { display: table-row;}")),
        div(id="inline",  style="width:35vw;",
            div(HTML("<b>TEST </b>")),
            br(),
            numericInputIcon("A", h5("test1"), value = 20, icon = icon("percent")) ,
            numericInputIcon("B", h5("test2"), value = 40, icon = icon("percent")) ,
            numericInputIcon("C", h5("test3"), value = 60, icon = icon("percent")) ,
            currencyInput("X", "Total", value = 0.3, format = "percentageUS2dec")
            
        )
      )
    )
  ),
  server = function(input, output) { }
)

添加以下CSS也没有帮助:

.box.box-solid.box-success>.box-header>.box-tools.pull-right {
     color:#2071B5;
     background:#ABD7E9
     }

我想有所有的背景色为#ABD7E9包括numericinput的背景!

fkaflof6

fkaflof61#

由于父div(类box)的bg颜色为#ABD7E9,我们可以简单地将类form-control和类input-group-addon的元素的bg颜色设置为transparent,以获得整个框一致的bg颜色。

library(shiny)
library(shinydashboard)
library(shinydashboardPlus)
library(shinyWidgets)

shinyApp(
  ui = dashboardPage(
    dashboardHeader(),
    dashboardSidebar(),
    dashboardBody(
      tags$style(
        HTML(
          "
          .box.box-solid.box-success>.box-header {
          color: #2071B5;
          background:#ABD7E9;
          }

          .box.box-solid.box-success {
          border-bottom-color:#ABD7E9;
          border-left-color:#ABD7E9;
          border-right-color:#ABD7E9;
          border-top-color:#ABD7E9;
          background: #ABD7E9;

          }
          
          .box .btn-success {
          background: #ABD7E9;
          }
          
          .box .form-control,
          .box .input-group-addon {
          background-color: transparent;
          border: transparent;
          }

          "
        )
      ),
      
      box(
        title = "Shiny Box",
        status = "success",
        solidHeader = TRUE,
        collapsible = TRUE,
        collapsed = TRUE,
        tags$head(tags$style(
          HTML(
            "div#inline label { width: 52%; }
                               div#inline input { display: inline-block; width: 68%;}"
          )
        )),
        tags$head(
          tags$style(
            type = "text/css",
            "#inline label{ display: table-cell; text-align: left; vertical-align: middle; }
                                   #inline .form-group { display: table-row;}"
          )
        ),
        div(
          id = "inline",
          style = "width:35vw;",
          div(HTML("<b>TEST </b>")),
          br(),
          numericInputIcon(
            "A",
            h5("test1"),
            value = 20,
            icon = icon("percent")
          ) ,
          numericInputIcon(
            "B",
            h5("test2"),
            value = 40,
            icon = icon("percent")
          ) ,
          numericInputIcon(
            "C",
            h5("test3"),
            value = 60,
            icon = icon("percent")
          ) ,
          currencyInput("X", "Total", value = 0.3, format = "percentageUS2dec")
          
        )
      )
    )
  ),
  server = function(input, output) {
    
  }
)

相关问题