控制R中fluidRow的高度
我正在尝试为一个闪亮的应用程序构建一个布局。我一直在看这个应用程序,并在谷歌上做了一些搜索,但似乎shiny中的布局系统有其局限性 您可以创建如下内容:控制R中fluidRow的高度,r,layout,shiny,R,Layout,Shiny,我正在尝试为一个闪亮的应用程序构建一个布局。我一直在看这个应用程序,并在谷歌上做了一些搜索,但似乎shiny中的布局系统有其局限性 您可以创建如下内容: fluidPage( fluidRow( column(6,"Topleft"), column(6,"Topright")), fluidRow( column(6,"Bottomleft"), column(6,"Bottomright")) ) 这将为您提供4个大小相同的对象 现在是否可以为2个顶部对象指定与底部对象
fluidPage(
fluidRow(
column(6,"Topleft"),
column(6,"Topright")),
fluidRow(
column(6,"Bottomleft"),
column(6,"Bottomright"))
)
这将为您提供4个大小相同的对象
现在是否可以为2个顶部对象指定与底部对象不同的高度
是否可以合并
右上角对象
和右下角对象
?行的高度是响应的,由列元素的高度决定。例如,我们在第一行中使用高度分别为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元素传递了一个样式标签,以规定我们的样式。有许多方法可以实现样式化。请参见要合并右上角和右下角,关键是要以正确的方式组合
fluidRows
和列。有一个官方教程(只需将框
替换为列
)。例子也
如果您希望合并右上角和右下角,可以使用一行,其中包含两列。第一(左)列再次包含两行,右列为组合的一大行:
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)
ui之前,我认为我必须只在ui文件中确定应用程序的布局。多亏了你的回答,我意识到我也必须使用显示的对象。所以在我的例子中,我可以通过操纵plotOutput中的高度(…,width,height)来更改行的高度。看起来“bottomleft”和“bottomright”仍然位于顶部,这也是我遇到的一个问题。想法?你也能消除左上角和右上角之间的空白吗?