R闪亮 - 侧边栏面板背景 [英] R shiny - background of sidebar panel

问题描述

假设我有一个简单的闪亮应用程序，我想更改侧边栏面板背景。我试过css，但我管理只改变整个背景。你能帮我吗？

我的ui.R：

  （shiny）
 
 shinyUI（fluidPage（
 includeCSS（www / moj_styl.css），
 
 titlePanel（Hello Shiny！），
 
 sidebarLayout（
 sidebarPanel（
 sliderInput（bins，
Number of bins：，
 min = 1，
 max = 
 value = 30）
），
 
 mainPanel（
 plotOutput（distPlot）
）
）
） 
  

和我的伺服器R：

  library（shiny）
 
 shinyServer（function（input，output）{
 
输出$ distPlot<  -  renderPlot bx < - 忠实的[，2]＃旧忠实的Geyser数据
 bins < -  seq（min（x），max（x），length.out = input $ bins + 1）
 
 hist（x，breaks = bins，col ='darkgray'，border ='white'）
}）
 
}）
  / pre> 
 
 
和moj_styl.css：
  body {
 background-color：＃dec4de; 
} 
 
 body，label，input，button，select {
 font-family：'Arial'; 
} 
  
 
 
解决方案
 > 
 
 
  library（shiny）
 
 ui<  -  shinyUI（fluidPage（
 tags $ head $ 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]旧忠实间歇泉数据
 bins<  -  seq（min（x），max（x），length.out = input $ bins + 1）
 
 hist col ='darkgray'，border ='white'）
}）
 
}）
 
 shinyApp（ui = ui，server = server）
  
边栏在初始化时没有'col-sm-4'的任何其他属性，因此您可以使用jQuery和一些逻辑来确定哪些是propper列的颜色（所以我们只设置侧边栏的背景），或者你可以给一个id嵌套在列中的颜色和背景这种形式的颜色。
 
Let's say, I've got a simple shiny application and I would like to change sidebar panel background. I've tried with css, but I've managed only to change the whole background. Can you help me?

My 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")
        )
      )
    ))
and my server.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')
      })

    })
and moj_styl.css:
    body {
        background-color: #dec4de;
    }

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

解决方案
Try this:
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)
The sidebar doesn't have any other attributs than 'col-sm-4' when initialized so you can either use jQuery and some logic to figure out which is the propper column to color (so that we only set the background of the sidebar), or you can give a id to the form nested in the column and color the background of this form.

                        
这篇关于R闪亮 - 侧边栏面板背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！