设置小部件与其标题（文本）之间的距离，以闪亮的方式

Question

我有一个简单的闪亮应用程序，可以显示三个colourInput()按钮。我会减少每个按钮与其标题之间的空格，以使其更接近它。

 #ui.r
     library(shiny)
    library(shinydashboard)
    shinyUI( dashboardPage(
      dashboardHeader(
      title="Styling Download Button"
      ),
        dashboardSidebar(

          div(style="display: inline-block;vertical-align:top; width: 115px;",colourInput("rightcolor",h5("Left"), value = "#00B2EE")),
          div(style="display: inline-block;vertical-align:top; width: 115px;",colourInput("overlapcolor",h5("Overlap"), value = "#7CCD7C")),
          div(style="display: inline-block;vertical-align:top; width: 115px;",colourInput("leftcolor",h5("Right"), value = "#FFFACD")),


        ),
        dashboardBody()

    ))
    #server.r
    shinyServer(function(input, output) {

    })

Answer 1

您必须更改显示标题的div元素。一种实现方法是将style参数添加到h5函数中。如果通过添加margin将style='margin: 0px'减小到0像素，则会得到所需的结果（也可以使用：margin-top，margin-bottom等）。

如果要改编其他Shiny小部件，可以始终将它们包装在div中，并使用style自变量进行改编（例如：div(style='margin: 0px; padding: 15px;', selectInput(...))）。可以在here中找到有关其他div自变量的信息。

您的示例

library(shiny)
library(shinydashboard)
library(colourpicker)

# Create ui
ui <- shinyUI( dashboardPage(
  dashboardHeader(
    title="Styling Download Button"),
  dashboardSidebar(
    div(style="display: inline-block;vertical-align:top; width: 115px;",colourInput("rightcolor",h5("Left", style='margin: 0px;'), value = "#00B2EE")),
    div(style="display: inline-block;vertical-align:top; width: 115px;",colourInput("overlapcolor",h5("Overlap", style='margin: 0px;'), value = "#7CCD7C")),
    div(style="display: inline-block;vertical-align:top; width: 115px;",colourInput("leftcolor",h5("Right", style='margin: 0px;'), value = "#FFFACD"))),
  dashboardBody()
))

# Create Server
server <- shinyServer(function(input, output) {})

# Run app
shinyApp(ui, server)