r - 控制流体的高度R发光的行

Question

我正在尝试为shiny应用程序构建布局。我一直在看应用程序layout guide并做了一些谷歌搜索，但看起来 Shiny 的布局系统有其局限性。

您可以创建如下内容:

fluidPage(
 fluidRow(
  column(6,"Topleft"),
  column(6,"Topright")),
 fluidRow(
  column(6,"Bottomleft"),
  column(6,"Bottomright"))
)

这将为您提供4个相同大小的对象。

现在可以给2个 Top-Objects和 Bottom-Objects不同的高度吗？

并且可以合并 Topright-Object和 Bottomright-Object吗？

Answer 1

行的高度是响应性的，并且由列的元素的高度确定。例如，我们在第一行中使用两个元素，分别具有200和100个像素的高度。该行采用其元素的最大高度。第二行分别具有高度为100和150像素的元素，并再次采用最大元素的高度。

library(shiny)
runApp(list(
  ui = fluidPage(
    fluidRow(
      column(6,div(style = "height:200px;background-color: yellow;", "Topleft")),
      column(6,div(style = "height:100px;background-color: blue;", "Topright"))),
    fluidRow(
      column(6,div(style = "height:100px;background-color: green;", "Bottomleft")),
      column(6,div(style = "height:150px;background-color: red;", "Bottomright")))
  ),
  server = function(input, output) {
  }
))

为了更好地控制，使用bootstrap之类的库的想法是用CSS设置元素的样式，例如，我们可以向每行添加一个类，并根据需要设置其高度和其他属性:

library(shiny)
runApp(list(
  ui = fluidPage(
    fluidRow(class = "myRow1", 
      column(6,div(style = "height:200px;background-color: yellow;", "Topleft")),
      column(6,div(style = "height:100px;background-color: blue;", "Topright"))),
    fluidRow(class = "myRow2",
      column(6,div(style = "height:100px;background-color: green;", "Bottomleft")),
      column(6,div(style = "height:150px;background-color: red;", "Bottomright")))
    , tags$head(tags$style("
      .myRow1{height:250px;}
      .myRow2{height:350px;background-color: pink;}"
      )
    )
  ),
  server = function(input, output) {
  }
))

我们在此处将样式标签传递给head元素以规定样式。有多种方式可以实现样式，请参见 http://shiny.rstudio.com/articles/css.html