Контролируйте высоту в жидкости Row в R shiny

Я пытаюсь создать макет для приложения shiny. Я смотрел приложение руководство по размещению и сделал некоторые поисковые запросы Google, но, похоже, у системы макета в блестящем есть свои пределы.

Вы можете создать что-то вроде этого:

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?

Ответы

Ответ 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) {
  }
))

enter image description here

Для большего контроля идея с библиотеками, такими как 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) {
  }
))

enter image description here

Мы передали тег стиля в элемент головы здесь, чтобы оформить наш стиль. Существует несколько способов укладки стиля: http://shiny.rstudio.com/articles/css.html

Ответ 2

Это легко с перемешиванием fluidRows и columns. Вы можете посмотреть, например. здесь (просто замените boxes на columns). Пример также здесь

Трюк - это все смешивание жидкостиРостов и columns правильный путь. Если вы хотите объединить верхний правый и нижний правый, поместите их в один столбец рядом с столбцом, который содержит две строки:

ui <- shinyUI(fluidPage(
  fluidRow(
    column(width=6,fluidRow("Topleft"),
                   fluidRow("Bottomleft")),
    column(6,"Topright and Bottomright"))
))

введите описание изображения здесь