控制流体中的高度R在R中闪亮

Question

我正在尝试为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可以通过多种方式实现样式化

Answer 2

合并右上和右下，关键是合并fluidRows和columns正确的方式。有一个官方的教程在这里（只需更换boxes用columns）。示例也在这里

如果您希望合并右上角和右下角，您可以使用包含两列的单行。第一（左）列再次包含两行，右列是组合的一大行：

ui <- shinyUI(fluidPage(
  fluidRow(
    column(width=6,
           fluidRow("Topleft", style = "height:200px; background-color: yellow;"),
           fluidRow("Bottomleft", style = "height:200px; background-color: green;")),
    column(width = 6,
           fluidRow("Topright and Bottomright", style = "height:400px; background-color: grey;")))
))
server <- function(input, output) {}
shinyApp(ui, server)