web-dev-qa-db-fra.com

Contrôlez la hauteur dans fluidRow in R shiny

J'essaie de créer une mise en page pour une application shiny. J'ai regardé l'application guide de mise en page et j'ai fait une recherche google mais il semble que le système de mise en page en brillant ait ses limites.

Vous pouvez créer quelque chose comme ceci:

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

Cela vous donne 4 objets de même taille.

Est-il possible maintenant de donner les 2 Top-Objects une hauteur différente de la Bottom-Objects?

Et est-il possible de fusionner le Topright-Object et le Bottomright-Object?

rlayoutshiny
26
skypriority

La hauteur des lignes est sensible et est déterminée par la hauteur des éléments des colonnes. À titre d'exemple, nous utilisons deux éléments dans la première ligne avec des hauteurs de 200 et 100 pixels respectivement. La ligne prend la hauteur maximale de ses éléments. La deuxième ligne a des éléments avec des hauteurs de 100 et 150 pixels respectivement et reprend la hauteur du plus grand élément.

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

enter image description here

Pour un meilleur contrôle, l'idée avec des bibliothèques comme bootstrap est que vous stylisez vos éléments avec CSS, par exemple, nous pouvons ajouter une classe à chaque ligne et définir sa hauteur et d'autres attributs à notre guise:

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

enter image description here

Nous avons passé une balise de style à l'élément head ici pour stipuler notre style. Il existe un certain nombre de façons de réaliser le style, voir http://shiny.rstudio.com/articles/css.html

32
jdharrison

Pour fusionner le haut et le bas à droite, la clé est de combiner fluidRows et columns dans le bon sens. Il y a un tutoriel officiel ici (il suffit de remplacer boxes par columns). Exemple aussi ici

Si vous souhaitez combiner en haut à droite et en bas à droite, vous pouvez utiliser une seule ligne contenant deux colonnes. La première colonne (gauche) contient à nouveau deux lignes, la colonne de droite une grande ligne pour la combinaison:

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)

enter image description here

2
shosaco