html - 如何更改 Shiny 应用程序中复选框和单选按钮的大小和间距？

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