navbarpage - Controla la altura en fluidRow en R brillante.

shiny r examples

Question

Estoy tratando de construir un diseño para una aplicación shiny . He estado buscando en la guía de diseño de la aplicación e hice algunas búsquedas en Google, pero parece que el sistema de diseño en brillante tiene sus límites.

Puedes crear algo como esto:

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

Esto te da 4 objetos del mismo tamaño.

¿Es posible ahora dar a los 2 Top-Objects una altura diferente a los Bottom-Objects ?

¿Y es posible fusionar el Topright-Object Bottomright-Object ?

Answer 1

La altura de las filas responde y está determinada por la altura de los elementos de las columnas. Como ejemplo, usamos dos elementos en la primera fila con alturas de 200 y 100 píxeles respectivamente. La fila toma la altura máxima de sus elementos. La segunda fila tiene elementos con alturas de 100 y 150 píxeles respectivamente y toma de nuevo la altura del elemento más grande.

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) {
  }
))

Para un mayor control, la idea con bibliotecas como bootstrap es que estilice sus elementos con CSS, por ejemplo, podemos agregar una clase a cada fila y establecer su altura y otros atributos como nos plazca:

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) {
  }
))

Pasamos una etiqueta de estilo al elemento principal aquí para estipular nuestro estilo. Hay una serie de formas en que se puede lograr el estilo, vea http://shiny.rstudio.com/articles/css.html

Answer 2

Para fusionar la parte superior e inferior derecha, la clave es combinar fluidRows y columns la manera correcta. Aquí hay un tutorial oficial (solo reemplaza las boxes por columns ). Ejemplo también here

Si desea combinar la parte superior derecha e inferior derecha, puede usar una sola fila que contenga dos columnas. La primera columna (izquierda) nuevamente contiene dos filas, la columna derecha una fila grande para la combinación:

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)