Question

你好：

更改Shiny中的复选框和单选按钮的大小？
更改框/按钮之间的垂直间距？

我是Shiny（第1天）的新手，所以如果这看起来很明显，我很抱歉。

跟进：学习格式词典有哪些好的资源？

我的代码到目前为止：

ui <- fluidPage(

  sidebarPanel(width = 3,

    fluidRow(
      column(6,offset=0,
        div(style = "font-size: 8px;",      
          selectInput(inputId = "size",
            label = "Tree Size",
            choices = c("All","Canopy","Subcanopy","Small"),
            selected = "All"),
        )
      ),

      column(6,offset=0,
        div(style = "font-size: 8px;padding:0px;",
          checkboxGroupInput(inputId = "labels",
             label = "Labels",
             choices = c("SPEC","Plot-End","Plot-Start"),
             selected = c("SPEC","Plot-End","Plot-Start")
          )    
        )
      )
    ),

    fluidRow(
      column(6,offset=0,
        div(style = "font-size: 8px;",      
          radioButtons(inputId = "data",
          label = "Data",
          choices = c("PSP Only","PSP + MAP"),
          selected = "PSP + MAP")
        )    
      ),

      column(2,offset=0,
        div(style = "font-size: 8px;padding:0px;",  
          radioButtons(inputId = "freq",
            label = "Frequency",
            choices = c(0.025,0.05),
            selected = 0.05)
        )
      )
    )
  )

  mainPanel(
    plotOutput(outputId = "plot")
  )
)

server <- function(input, output) {

  output$nms <- renderPlot({
    plot(runif(99),runif(99))

  })

}

shinyApp(ui = ui, server = server)

（同样，我刚刚开始学习这些东西，所以我的代码可能是废话 - 对不起！）。

Answer 1

我很惊讶没有答案;这是一个很好的问题。如果您对自定义样式感兴趣，您可能想学习一些基本的CSS。通常对于Shiny，我会为CSS样式文档创建一个单独的/外部文件，但为了简单起见，我将它包含在R脚本中。不幸的是，如果您不熟悉CSS并且可能因浏览器而异，那么样式单选按钮和复选框并不是最简单的任务，但此处的示例代码至少在Chrome中运行良好。单选按钮应该类似，但不完全相同。将-webkit-transform: scale(1.5);添加到.checkbox也是webkit浏览器的一个选项。您可以将以下代码添加到fluidPage（）内作为第一项（在sidebarPanel之前）：

  tags$style("
      .checkbox { /* checkbox is a div class*/
        line-height: 30px;
        margin-bottom: 40px; /*set the margin, so boxes don't overlap*/
      }
      input[type='checkbox']{ /* style for checkboxes */
        width: 30px; /*Desired width*/
        height: 30px; /*Desired height*/
        line-height: 30px; 
      }
      span { 
          margin-left: 15px;  /*set the margin, so boxes don't overlap labels*/
          line-height: 30px; 
      }
  "),

要确保为正确的组件设置样式，您需要在构建页面时检查HTML标记。查看下面的结构可以深入了解我为什么需要在上面的代码中设置某些元素的样式。

如何在Shiny app中更改复选框和单选按钮的大小和间距？

1 个答案: