我可以编写一个简洁的基于行的闪亮 UI 吗？答案

【问题标题】：Can I program a concise row-based shiny UI?我可以编写一个简洁的基于行的闪亮 UI 吗？
【发布时间】：2019-04-16 21:52:48
【问题描述】：

尝试编写一个闪亮的应用程序布局，包括输入的行和列。内置函数最适合简单的列格式。到目前为止，设法嵌套了 fluidRows 的负载，以获取下面示例代码中的输出。

嵌套fluidRow: R Shiny - how to generate this layout with nested rows in column 2

shiny 4 small textInput boxes side-by-side

这是我的代码的一个子集：

ui <- fluidPage(
  h1("XXX"), #Main page title
  fluidRow(
    column(3,
           wellPanel(
             sliderInput(inputId = "time.step",
                         label = "Time",
                         value = 100, min = 0, max = 1000),
             numericInput(inputId = "no_",
                          label = "choose number",
                          value = 8, min = 1, max = 10),
             checkboxGroupInput(inputId = "chr_vec",
                                label = "characters",
                                choices = c("a", "b", "c", "d", "e", "f",
                                            "g", "h", "i", "j", "k"),
                                selected = c("a", "b")
             ), #close checkboxGroupInput
             actionButton("runbutton", "Run")
           ) #close wellPanel
    ), #close column
    #### Parameters ####
    column(8,
           fluidRow(

             conditionalPanel(
               condition = "input.chr_vec.indexOf('a') !== -1",

                    column(12,
           splitLayout("Parameters",
                     numericInput(inputId = "1.numeric.flip.time",
                                  label = "1",
                                  value = 50, min = 0, max = 1000),

                     numericInput(inputId = "2.numeric.start.val",
                                  label = "2",
                                  value = 99, min = 0, max = 1000),

                     numericInput(inputId = "3.numeric.end.val",
                                  label = "3",
                                  value = 100, min = 0, max = 1000),

                     numericInput(inputId = "sd.numeric.stdev",
                                  label = "SD",
                                  value = 0, min = 0, max = 1000)
           ) #close splitLayout
                    ) #close column
             ) #close conditionslPanel
           ), #close fluidRow


           fluidRow(
             conditionalPanel(
               condition = "input.chr_vec.indexOf('b') !== -1",
             column(12,
                    splitLayout("Parameters2",
                                numericInput(inputId = "5.numeric.flip.time",
                                             label = "5",
                                             value = 50, min = 0, max = 1000),

                                numericInput(inputId = "6.numeric.start.val",
                                             label = "6",
                                             value = 99, min = 0, max = 1000)

                    ) #close splitLayout
             ) #cose column
             ) #close conditionalPanel
           ) # close fluidRow

    ) #close column
  )
)
shinyApp(ui, server = function(input, output) { })

我正在尝试解决的问题：

1) 标题“参数”像输入字段一样奇怪地浮动。

2）在实际代码中，大约有十几行参数（左侧每个复选框一行），事情变得非常混乱，尤其是当行数超出检查输入列时（针对像图像这样的东西下面）。

3) 缩放和对齐 - 如果我可以将参数行的字体和输入字段向下缩放一点并且理想情况下将输入字段向左对齐而不是居中对齐，那么它们会很好地排列（到目前为止尝试过） :Control the height in fluidRow in R shiny)。

使用我不熟悉的语言 (CSS) 寻找一些潜在的解决方案，因此非常感谢您提供一些解释 :) 提前致谢！

【问题讨论】：

标签： r layout shiny

【解决方案1】：

CSS 是通往这里的路，你可以在几行 CSS 中做很多事情。有关在 R 中集成 CSS 的更多信息，请参阅 https://shiny.rstudio.com/articles/css.html。

在写这个答案的过程中，我发现我可以简化你的一些 R 代码。在层次结构方面，我现在只使用一个包装流体行的条件面板。我还必须编写一个简单的 for 循环来生成足够的行来检查 2) 的溢出问题。此处更新了 R 代码：

library(shiny)

choices <- c("a", "b", "c", "d", "e", "f",
             "g", "h", "i", "j", "k")


rows <- list(8)
for (choice in choices) {
  print(choice)
  row <- conditionalPanel(
    condition = paste0("input.chr_vec.indexOf('", choice, "') !== -1"),
    fluidRow(
      span(paste0("Parameters (", choice, ")")),
      numericInput(
        inputId = "1.numeric.flip.time",
        label = "1",
        value = 50,
        min = 0,
        max = 1000
      ),

      numericInput(
        inputId = "2.numeric.start.val",
        label = "2",
        value = 99,
        min = 0,
        max = 1000
      ),

      numericInput(
        inputId = "3.numeric.end.val",
        label = "3",
        value = 100,
        min = 0,
        max = 1000
      ),

      numericInput(
        inputId = "sd.numeric.stdev",
        label = "SD",
        value = 0,
        min = 0,
        max = 1000
      )
    )
  )
  rows <- append(rows, list(row))
}

ui <- fluidPage(theme = "custom.css",
                h1("XXX"), #Main page title
                fluidRow(
                  column(
                    3,
                    wellPanel(
                      sliderInput(
                        inputId = "time.step",
                        label = "Time",
                        value = 100,
                        min = 0,
                        max = 1000
                      ),
                      numericInput(
                        inputId = "no_",
                        label = "choose number",
                        value = 8,
                        min = 1,
                        max = 10
                      ),
                      checkboxGroupInput(
                        inputId = "chr_vec",
                        label = "characters",
                        choices = choices,
                        selected = c("a", "b")
                      ),
                      #close checkboxGroupInput
                      actionButton("runbutton", "Run")
                    ) #close wellPanel
                  ),
                  #close column
                  #### Parameters ####
                  do.call(column, rows)
                ))
shinyApp(
  ui,
  server = function(input, output) {

  }
)

我在您的流体页面调用中添加了theme = "custom.css"，并使用以下内容创建了 www/custom.css：

.col-sm-8 .row .form-group,.form-control {
  display: inline-block;
  width: 100px;
}

.col-sm-8 .row span {
  width: 150px;
  display: inline-block;
}

.col-sm-8 .row .form-group,.form-control 是一个 CSS 选择器，用于选择您的数字输入，即在宽度为 8 的列中的输入。您可以通过右键单击正在运行的应用程序版本并进行检查来找到这些类名/HTML 结构。花括号 {} 的内容定义了所选元素的样式。将 display 设置为 inline-block 将导致块水平流动。将宽度设置为 100 像素会显着缩小数字输入的大小（默认为 300 像素）。将.form-group,.form-control 选择器替换为span 将选择行标题。我将其设置为 150px，因为这为字符串“Parameters (a)”提供了足够的空间。

我已将其部署到 https://nyou045.shinyapps.io/test/，以便您观看现场演示

希望有帮助！

【讨论】：