时间戳

首页 > 解决方案 > R Shiny：如何为标题面板的边距着色？

r - R Shiny：如何为标题面板的边距着色？

问题描述

我想为我的应用程序的标题面板着色，包括边距。
到目前为止，我能够为面板着色。
所以基本上我希望标题面板的所有边距都在珊瑚色中。 

ui <- fluidPage(

  titlePanel(h1("Hello Shiny!",style={'background-color:coral;'})
             )
  ,

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

    mainPanel(
      plotOutput(outputId = "distPlot")
    )
  )
)

server <- function(input, output) {

  output$distPlot <- renderPlot({

    x    <- faithful$waiting
    bins <- seq(min(x), max(x), length.out = input$bins + 1)

    hist(x, breaks = bins, col = "#75AADB", border = "white",
         xlab = "Waiting time to next eruption (in mins)",
         main = "Histogram of waiting times")
  })
}

shinyApp(ui, server)

标签： rshiny

解决方案

如果您使用浏览器的开发工具（例如ctrl+shift+i在 chrome 中）查看您的页面，您会看到您的标题面板位于一个container-fluid左右填充 15px 的大 div 中。

您不能仅在标题周围为该页面的填充着色。

但是，您可以将标题从流动页面中取出，这样它就不会受到填充的影响。这意味着您的标题将与页面的左边框齐平。您可能想要引入一些左侧填充，例如 15px。

ui <- tagList(
   titlePanel(h1("Hello Shiny!",
              style='background-color:coral;
                     padding-left: 15px')), 
   fluidPage( 
    sidebarLayout(
        sidebarPanel(
            sliderInput(inputId = "bins",
                        label = "Number of bins:",
                        min = 1,
                        max = 50,
                        value = 30)
        ),

        mainPanel(
            plotOutput(outputId = "distPlot")
        )
    )
))

在此处输入图像描述

或者，一个纯 CSS 解决方案是否定流动的页面边距，并用标题的内边距替换它，有效地将标题框左右扩展 15px 以补偿页面内边距。

ui <- fluidPage(  

  titlePanel(h1("Hello Shiny!",
                style={'background-color:coral;
                        margin-left: -15px;
                        margin-right: -15px;
                        padding-left: 15px;'})
  ),

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

    mainPanel(
      plotOutput(outputId = "distPlot")
    )
  )
)

具有不同底层页面结构的相同结果：

  • 选项 1 将标题放在主应用程序页面（具有 15 像素的填充）之前。
  • 选项 2 将标题保留在主页内，但使其左右溢出 15 像素（页面填充的大小）。

现在这会产生一些丑陋的代码。您还可以通过h1在titlePanel.

最好写自己的titlePanel。

原始代码是：

function (title, windowTitle = title) 
{
    tagList(tags$head(tags$title(windowTitle)), h2(title))
}

用。。。来代替：

myTitlePanel <- function (title, windowTitle = title, color = "coral") {
    css <- paste(paste0("background-color:", color),
                 "padding-left: 15px",
                 "margin-left: -15px",
                 "margin-right: -15px",
                 sep = ";")
    tagList(tags$head(tags$title(windowTitle)), 
            h1(title, style = css))
}

然后你的用户界面变成：

ui <- fluidPage(

  myTitlePanel("Hello Shiny!", color = "coral"),

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

    mainPanel(
      plotOutput(outputId = "distPlot")
    )
  )
)

更干净，更容易改变背景颜色。

推荐阅读