R发光 - 侧边栏面板背景

时间:2015-11-24 10:38:06

标签: css r user-interface server shiny

让我们说,我有一个简单的闪亮应用程序,我想更改侧边栏面板背景。我曾尝试使用CSS,但我只是改变了整个背景。你能救我吗?

我的ui.R:

    library(shiny)

    shinyUI(fluidPage(
      includeCSS("www/moj_styl.css"),

      titlePanel("Hello Shiny!"),

      sidebarLayout(
       sidebarPanel(
          sliderInput("bins",
                      "Number of bins:",
                      min = 1,
                      max = 50,
                      value = 30)
        ),

        mainPanel(
          plotOutput("distPlot")
        )
      )
    ))

和我的服务器.R:

    library(shiny)

    shinyServer(function(input, output) {

      output$distPlot <- renderPlot({
        x    <- faithful[, 2]  # Old Faithful Geyser data
        bins <- seq(min(x), max(x), length.out = input$bins + 1)

        hist(x, breaks = bins, col = 'darkgray', border = 'white')
      })

    })

和moj_styl.css:

    body {
        background-color: #dec4de;
    }

    body, label, input, button, select { 
      font-family: 'Arial';
    }

2 个答案:

答案 0 :(得分:10)

试试这个:

library(shiny)

ui <- shinyUI(fluidPage(
  tags$head(tags$style(
    HTML('
         #sidebar {
            background-color: #dec4de;
        }

        body, label, input, button, select { 
          font-family: "Arial";
        }')
  )),
  titlePanel("Hello Shiny!"),

  sidebarLayout(
    sidebarPanel(id="sidebar",
      sliderInput("bins",
                  "Number of bins:",
                  min = 1,
                  max = 50,
                  value = 30)
    ),

    mainPanel(
      plotOutput("distPlot")
    )
  )
))

server <- shinyServer(function(input, output) {

  output$distPlot <- renderPlot({
    x    <- faithful[, 2]  # Old Faithful Geyser data
    bins <- seq(min(x), max(x), length.out = input$bins + 1)

    hist(x, breaks = bins, col = 'darkgray', border = 'white')
  })

})

shinyApp(ui=ui,server=server)

边栏没有任何其他属性,而不是&#39; col-sm-4&#39;初始化时你可以使用jQuery和一些逻辑来确定哪个是要着色的propper列(这样我们只设置侧边栏的背景),或者你可以给嵌套在列中的表单赋一个id并着色这种形式的背景。

答案 1 :(得分:9)

如果我能找到它,这在某个地方有答案。 (我知道,因为当我想改变侧边栏的背景颜色时,我找到了答案)。您可以使用tags$style()函数来获取所需内容。我无法准确地记住你是想要为身体或井做颜色,(显然我都是这两种颜色),但你可以稍微玩一下,直到你得到你的结果。

sidebarPanel(
  tags$style(".well {background-color:[your_color];}"),
  ...)

原来你想改变.well