如何改善R闪亮的丑陋布局

Question

我想使用 R 中的包

shiny

以类似于 java gridLayout 的方式显示按钮列表：

所需的布局

经过一番尝试和错误后，我可以产生这个结果。不幸的是，按钮不是方形的，行之间有一些空间，我想避免这种情况。

您能建议如何改进此布局吗？

我的 R 代码如下：

library(shiny)

buttons <- list()

for (r in 1:3){
  for (c in 1:4){
    index <- c + r * 4 - 4
    
    buttons[[index]] <- absolutePanel(
      style='background-color:skyblue;',
      actionButton(style='background-color:#FFFFA0;',
                    paste0("but", as.character(index)),
                    index, width = 60, height = 60),
      top = 60 * r , left = 60 * c, width = 60, height = 60)
  }
}

# user interface
ui <- fixedPage(absolutePanel(buttons))

# server function
server <- function(input, output, session) {}

shinyApp(ui = ui, server = server)

Answer 1

精确执行您想要的操作的一个选项是使用

css

。为此，我向按钮添加了一个类并添加 CSS 代码以实现所需的输出。

library(shiny)

buttons <- list()

for (r in 1:3){
  for (c in 1:4){
    index <- c + r * 4 - 4
    
    buttons[[index]] <- absolutePanel(
      style='background-color:skyblue;',
      actionButton(class="square-button",
                   paste0("but", as.character(index)),
                   index, width = 80, height = 0),
      top = 80 * r , left = 80 * c, width = 80, height = 0)
  }
}

# user interface
ui <- fixedPage(
  tags$link(rel = "stylesheet", href = "https://fonts.googleapis.com/css2?family=Comic+Neue&display=swap"),
  tags$style(
    HTML(
      ".square-button {
          margin: 0;
          padding: 0;
          width: 60px;
          height: 80px;
          line-height: 60px;
          text-align: center;
          font-size: 25px;
          font-weight: bold;
          display: inline-block;
          border: 1px; 
          border-style: solid;
          border-color: #969CA3;
          border-radius: 0px;
          background-color: skyblue;
          background-image: linear-gradient(white, #BFD4E9);
          font-family: 'Comic Neue', cursive; /* Apply comic font */
        }")),
  absolutePanel(buttons))

# server function
server <- function(input, output, session) {}

shinyApp(ui = ui, server = server)