闪亮的动态布局:自动将固定宽度的元素换行到下一行

Shiny dynamic layout: Automatically wrap fixed width elements to the next row

我知道闪亮的 fluidPage()fixedPage() 布局。在我的例子中,虽然元素有另一种行为会很好(plots/input fields/shinydashboard 框)。

元素应具有固定的宽度(和高度),并在显示宽度发生变化时自动移动到下一行。

图例:

[...] <- Element
| <- Right browser window border

示例:

1. Big screen case
[...] [..] [.....] [...] [...]        |

2. Small screen case
[...] [..] [.....] [...] |
[...]                    |

3. Even smaller screen case
[...] [..]  |
[.....]     |
[...] [...] |

shiny/shinydashboard 可以实现这样的布局吗?

感谢@SimonLarsen,我找到了解决方案。 Shiny 提供 flowLayout() 支持这种布局。不幸的是,shinydashboard 框不能在此框架内使用,因为它们需要 bootstrap 网格框架内的宽度值。您将不得不更改 shinydashbaord::box() 的实现以使用像素宽度值,这会导致各种其他问题。

我选择了以下解决方案:

shiny::fluidRow(
  shinydashboard::box(
    width = 12,
    shiny::div(
      style = "overflow-x: scroll",
      shiny::flowLayout(
        cellArgs = list(
          style = "
          min-width: 300px; 
          width: auto; 
          height: auto; 
          border: 1px solid darkgray; 
          padding: 10px;
          margin: 10px;
        "),
        plotly::plotlyOutput(
          width = "500px",
          ns("plot1")
        ),
        plotly::plotlyOutput(
          width = "500px",
          ns("plot1")
        ),
        plotly::plotlyOutput(
          width = "1045px",
          ns("plot2")
        )
      )
    )
  )
)

我构建了自己的固定高度的盒子,并为每个 plot/content 元素单独定义了宽度。