R 块、行和标题的闪亮布局

Question

我正在完成我的 R Shiny 应用程序，我正在为块和标题的布局而苦苦挣扎。因为我有很多块，所以我单独构建了我的布局，并使用fluidRow 和column 的组合在我的Shiny 应用程序的ui 中对其进行了编码。通常我的每个块都有一个标题，形式为 p(...)，然后是相同形式下的一些信息。

由于我喜欢拥有“控件”侧边栏面板的想法，因此我的应用左侧的块用于控制我在应用上使用的不同输入。当用户做事时，左侧的块是受影响和修改的块。

我有一个属于同一“类别”的完整行块。它是一个动态 UI，可以有 1 到 8 个块，具体取决于用户可以使用的滑块输入。我想要实现的是在块上方有一个标题行（段落或标题，无关紧要），然后有块，同时在“控制面板”上只保留一个单元左侧。

几张图让大家看得更清楚：

https://i.imgur.com/Htt4oIK.jpg 是我目前大部分街区所拥有的。标题一行（蓝色），内容一行（绿色）。深绿色是一般的“行”，红色是“块”。此布局的代码如下：

fluidRow(
    column(4, wellPanel()),
    column(2, mainPanel(
        p("blue"),
        p("green")
    )),
    column(2, mainPanel()),
    column(2, mainPanel()),
    column(2, mainPanel())
)

现在，那个：

https://i.imgur.com/i728blL.jpg 是我想要达到的目标，但我还没有达到那个结果。我尝试了几件事：

1) 对标题和内容使用不同的fluidRow。问题在于格式，因为左侧的控制框是第一行的一部分，它限制了行本身的高度，这意味着标题将远高于内容。看起来像这样：https://i.imgur.com/sU0AEds.jpg，我想减少无用的空间。

语法是：

fluidRow(
    column(4, wellPanel()),
    column(8, mainPanel(
        p("blue")
    ))
),
fluidRow(
    column(4, mainPanel()),
    column(2, mainPanel(
        p("green")
    )),
    column(2, mainPanel()),
    column(2, mainPanel()),
    column(2, mainPanel())
)

2) 将子块嵌套在更大的列中。代码如下：

fluidRow(
    column(4, wellPanel()),
    column(8, mainPanel(
        p("blue"),
        column(2, mainPanel(
            p("green")
        )),
        column(2, mainPanel()),
        column(2, mainPanel()),
        column(2, mainPanel())
    ))
)

问题在于，不知何故，列中的列似乎表现不正常。不是让宽度为 2 的列占据我宽度为 8 列的整个空间，而是它们最终具有奇怪的宽度并相互重叠。

想法？可能有一个简单的 HMTL 解决方案，但我真的不是这方面的专家。 谢谢！

Answer 1

您可以将第二列拆分为宽度为 3 的四列。将这些列放在 fluidRow 中也会使它们与上面的标题元素对齐。

---

编辑

动态生成的列和框。将框的宽度设置为ceiling(12 / number of boxes)。当宽度之和超过 12 时，框会溢出第二行。我们必须使用ceiling 或floor 之类的东西，因为引导系统中不允许使用分数，并且当width 为例如1.5 时，框会继承父列的宽度。一个选项是将最大框宽度设置为 3，并在用户选择 > 4 个框时具有两行布局。

---

代码：

library(shiny)

wp <- tagList(wellPanel(
  h3("Title"),
  p(
    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
  )
))

ui <- fluidPage(fluidRow(
  column(
    width = 4,
    wp,
    sliderInput(
      "n_boxes",
      label = "Number of boxes",
      min = 1,
      max = 8,
      value = 2,
      step = 1
    )
  ),
  column(width = 8,
         wellPanel(h2("T I T L E")),
         uiOutput("blocks"))
))

server <- function(input, output) {
  make_boxes <- reactive({
    box_width <- ceiling(12 / input$n_boxes)
    message(box_width)

    x <-
      lapply(1:input$n_boxes, function(x)
        column(width = box_width, wp))
    x
  })

  output$blocks <- renderUI({
    fluidRow(make_boxes())
  })
}

shinyApp(ui, server)

有关允许列的 with 超过 12 并使用水平滚动条的潜在替代方法，请查看此线程：R shiny Dashboard : Exceed the bootstrap width = 12 and add an horizontal scrollbar