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

Question

你怎么:

1. 改变Shiny中复选框和单选按钮的大小？

2. 更改框/按钮之间的垂直间距？

我对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标记.查看下面的结构可以深入了解我为什么需要在上面的代码中设置某些元素的样式.