Поместите элементы в «блестящее» приложение, чтобы они изменяли размеры для мобильных и настольных мониторов.

Question

У меня блестящее приложение с заголовком , одним сюжетом , некоторым описанием и actionButton .Я хочу, чтобы элементы были выровнены следующим образом:

1. title on top ;
2. description и actionButton внизу ;
3. сюжет между изменениями размера в соответствии с разрешением монитора.

My app.R выглядит следующим образом:

library(shiny)

text <- list(
  "one",
  "one\ntwo",
  "one\ntwo\nthree",
  "one\ntwo\nthree\nfour"
)

ui <- fluidPage(
   titlePanel("title"),
   fluidRow(plotOutput("plot")),
   fluidRow(style = "position:absolute;bottom:20px;left:20px", 
            verbatimTextOutput("text"),
            actionButton("next_el", ">>")
   )
)

server <- function(input, output) {
   output$plot <- renderPlot({
      x    <- faithful[, 2] 
      bins <- seq(min(x), max(x), length.out = input$next_el + 1)
      hist(x, breaks = bins, col = 'darkgray', border = 'white')
   })
   output$text <- renderText(text[[input$next_el + 1]])
   observeEvent(input$next_el, {})
}

# Run the application 
shinyApp(ui = ui, server = server)

Что у меня есть на данный момент: title , description и actionButton размещены нормально на рабочем столе и на мобильных экранах. описание также изменяет размер в зависимости от количества текста.

Однако размер графика не изменяется должным образом: на мобильных устройствах описание размещается над участок .С другой стороны, на настольных устройствах график использует только половину экрана.

Я попытался изменить размер графика с помощью plotOutput("plot", height = "50%") и plotOutput("plot", height = "auto"), но затем график исчезает.

Что я могу сделать, чтобы мой сюжет изменил размер вверх , если места достаточно, и изменил размер вниз , если места недостаточно?

Answer 1

Один из способов подойти к этому без дополнительного кода CSS / HTML - это динамически установить высоту графика с помощью объекта session$clientData.Высота графика устанавливается по умолчанию, но вы можете установить динамическое значение высоты на основе ширины графика, которая зависит от размера окна браузера.

Обновленный код сервера будет выглядеть следующим образом:

server <- function(input, output, session) {
  output$plot <- renderPlot({
    x    <- faithful[, 2] 
    bins <- seq(min(x), max(x), length.out = input$next_el + 1)
    hist(x, breaks = bins, col = 'darkgray', border = 'white')
  }, height = function() {
    if (session$clientData$output_plot_width <= 1000) {
      (session$clientData$output_plot_width)*(3/4)
    } else { (session$clientData$output_plot_width)*(7/16) }
  })
  output$text <- renderText(text[[input$next_el + 1]])
  observeEvent(input$next_el, {})
}

, где "plot" в output_plot_width соответствует id вашего графика.

Вы заметитечто код устанавливает высоту графика как функцию ширины.Вы можете изменить соотношение сторон, изменив доли в функции.Я также использую два разных соотношения сторон, одно для случаев, когда ширина графика меньше 1000 пикселей (телефоны, планшеты и т. Д.), И другое, когда пользователь более склонен к экрану настольного компьютера или ноутбука.

Если честно, я на самом деле не проверял это на своем телефоне - я просто протестировал его, используя разные ширины окна и пропорции в моем браузере.