R Shiny 侧边栏中的水平线 hr()

Question

在使用Shiny的fluidRow()创建UI元素时，通常可以使用hr()在下方添加水平分隔线，但是在文本下方使用sideBarPanel()无法这样做。那么我该如何在侧边栏中创建类似的水平分隔线或其他分隔文本和UI元素的东西?

- tsouchlarakis

---

按照这个答案的方法，可以使用tags$hr(style="border-color: black;")。 - Jim

Answer 1

一般来说，这条线是可见的，但与背景相比对比度非常低。

为了使线条更加清晰可见，您可以通过在UI部分包含以下内容来修改CSS代码：

  tags$head(
    tags$style(HTML("hr {border-top: 1px solid #000000;}"))
  ),

使用tags$style(HTML(...))，您可以在应用程序中包含CSS。该行的HTML标签为hr。其余参数指定线条选择、宽度、颜色等规格。

有关完整的工作示例，请参见下文：

library(shiny)
    
ui <- fluidPage(
  tags$head(
    tags$style(HTML("hr {border-top: 1px solid #000000;}"))
  ),
   sidebarLayout(
      sidebarPanel(
         "text",
         hr(),
         uiOutput("out")
      ),
      mainPanel(
         plotOutput("distPlot")
      )
   )
)

server <- function(input, output) {
  output$out <- renderUI({
    sliderInput("bins",
                "Number of bins:",
                min = 1,
                max = 50,
                value = 30)
  })
}


shinyApp(ui = ui, server = server)

2020年12月更新： 请查看评论区David Ranzolin的评论。

你也可以直接向hr()传递样式参数，例如：hr(style = "border-top: 1px solid #000000;")

- Tonio Liebrand

---

我看到了问题。hr()创建了一个非常浅的灰色规则，很难在侧边栏的灰色背景下看清楚。有没有办法改变它的颜色？ - tsouchlarakis

太棒了！非常感谢。 - tsouchlarakis

你可以直接向hr()传递一个style参数，例如：hr(style = "border-top: 1px solid #000000;")。 - David Ranzolin

非常好的观点，我已经将其添加到答案中。 - Tonio Liebrand