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的宽度，而是彼此重叠。它们没有让宽度2的宽度占据我宽度8的宽度。

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

Answer 1

您可以将第二列分成四个宽度为3的列。将这些列放在fluidRow内还将使它们与上面的title元素对齐。

编辑

动态生成的列和框。将框的宽度设置为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

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

1 个答案: