在Shiny中创建涉及行和列的非对称布局 [英] Creating asymmetric layouts involving rows and column in Shiny

问题描述

我已经在闪亮的ui中创建了多行，例如:

I have created multiple rows in a shiny ui as such:

shinyUI(fluidPage(

shinyUI(fluidPage(

fluidRow(    
  column(6,
        textOutput("text_col1_row_1")),
  column(6
        textOutput("text_col2_row_1"))),

fluidRow( 
  column(6,
       textOutput("text_col1_row_2")),
  column(6,
       textOutput("text_col2_row_2"))),
   ))

这将创建一个漂亮的4 X 4网格.

which creates a nice 4 X 4 grid.

Shiny似乎旨在允许用户将对象组织到列中.

It seems Shiny is geared towards allowing users to organize objects into columns.

我想看看是否可以将我的显示组织成两列，但在一列中却有两行-如果我举起一个简单的插图，可能会更清楚:

I would like to see if I can organize my display into something that has two columns, yet within a column, it has two rows -- it's probably clearer if I whip up a simple illustration:

(这只是一个一般性的想法，关于列/行的大小，目前还没有确定的东西，可以这么说，只是在寻找这种结构的基本模板.)

(This is just a general idea and there is nothing set in stone regarding column / row sizes at the moment -- just looking for the bare-bones template for this structure, so to speak.)

我在文档中进行了搜索，似乎找不到合理的解决方案.如果有人考虑过并解决了这个问题，或者有任何想法，我很想听听他们的意见.谢谢.

I have searched around the documentation and can't seem to find a reasonable solution. If anyone has thought about and solved this or has any ideas, I'd love to hear them. Thanks.

推荐答案

看看 http://getbootstrap.com /2.3.2/scaffolding.html .有光泽的功能fluidRow和column是分别创建div(class = "row-fluid, ...)和div(class = "spanx", ...)的便捷功能:

Have a look at http://getbootstrap.com/2.3.2/scaffolding.html . The shiny functions fluidRow and column are convenience function to create div(class = "row-fluid, ...) and div(class = "spanx", ...) respectively:

library(shiny)
runApp(list(
  ui = fluidPage(
    fluidRow(
      column(6
             , fluidRow(
               column(6, style = "background-color:yellow;", div(style = "height:300px;"))
               , column(6, style = "background-color:green", div(style = "height:300px;"))
             )
             , fluidRow(
               column(12, style = "background-color:red;", div(style = "height:300px;"))
               )
      )
      , column(6, style = "background-color:blue;", div(style = "height:600px;"))
    )
  ),
  server = function(input, output) {
  }
))

这篇关于在Shiny中创建涉及行和列的非对称布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！