Question

我想为应用程序的标题面板（包括页边距）着色。
到目前为止，我可以为面板着色。
所以基本上我希望标题面板的所有边距都为彩色珊瑚。

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)

Answer 1

如果您使用浏览器的开发人员工具（例如Chrome中的ctrl+shift+i）查看网页，则会看到标题面板位于一个大的container-fluid div中，左右各有15px的空白。 / p>

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

但是，您可以将标题从流畅的页面中删除，以免受到填充的影响。这意味着您的标题将与页面的左边框齐平。您可能要引入一些左填充，例如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将标题放在主应用程序页面（填充15px）之前。
选项2将标题保留在主页内，但使其左右出血15px（页面填充的大小）。

现在，这使代码变得很丑陋。您还可以通过在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变为：

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")
    )
  )
)

更清洁，易于更改背景颜色。

R Shiny：如何为标题面板的页边空白着色？

1 个答案: