Создание макета в строках и столбцах с помощью Shiny
Узнайте, как создать макет в строках и столбцах с помощью Shiny, из этой статьи Криса Били, который работает полный рабочий день, разрабатывая программное обеспечение для хранения, сопоставления и представления данных анкеты с использованием открытых технологий (MySQL, PHP, R и Shiny).
Shiny использует сетку Bootstrap для размещения контента. Есть несколько способов сделать это, но всегда задействованы встроенные функции Shiny. Различия между функциями незначительны, а основная идея у всех одна и та же. В этой статье будут рассмотрены этапы установки на сервер следующих функций:
• жидкая страница()
• начальная страница()
• фиксированная страница()
жидкая страница ()
Самый стандартный способ использования макета сетки в Shiny — использовать функциюfluidPage(). Следующий фрагмент кода иллюстрирует функцию FluidPage():
server = function(input, output){
# server code
}
ui = fluidPage(
fluidRow(
column(2, wellPanel(p("Column width 2"))),
column(10, wellPanel(p("Column width 10")))),
fluidRow(
column(4, wellPanel(p("Column width 4"))),
column(4, wellPanel(p("Column width 4"))),
column(4, wellPanel(p("Column width 4"))))
)
shinyApp(ui = ui, server = server)
Из предыдущего кода содержимое этой функции организовано по строкам, в которых функцияfluidPage()оборачивает весь интерфейс и добавляет столько изменчивых строк, сколько необходимо. В этом случае код показывает, что весь интерфейс состоит из двух строк.
Строки состоят из столбцов, и, как видно из следующего вывода, первая строка состоит из двух столбцов. Одна имеет ширину 2 единицы, а другая — 10 единиц. Сумма единиц всегда должна составлять 12. Следующая строка состоит из трех столбцов, каждая из которых имеет ширину в четыре единицы.
Внутри столбцов есть панели, поэтому вы можете видеть, из чего они сделаны, и внутри них обычно помещаются такие объекты, как элементы управления, графики, таблицы и т. Д. Если вы настроите файл кода с этими панелями, платформа Bootstrap позаботится о размерах элементов в любом используемом вами окне браузера.
На следующем снимке экрана показан вывод предыдущего кода:
Изменение размера окна приводит к плавному изменению размеров всех элементов, как показано на следующем снимке экрана:
Чтобы просмотреть вложенные столбцы, используйте FluidPage(), как показано в следующем фрагменте кода:
server = function(input, output){
# server code
}
ui = fluidPage(
fluidRow(
column(2, wellPanel(p("Column width 2"))),
column(10, wellPanel(p("Column width 10")))),
fluidRow(
column(2, wellPanel(p("Column width 2"))),
column(10, wellPanel(p("Column width 10")),
fluidRow(
column(6, wellPanel(p("Column width 6"))),
column(6, wellPanel(p("Column width 6")))
)
)
)
)
shinyApp(ui = ui, server = server)
Строки могут быть вложены в столбцы для размещения содержимого под отдельными элементами. В предыдущем коде последний столбец имеет вложенную строку, состоящую из двух столбцов.
Столбцы в этой новой строке имеют ширину, которая в сумме составляет 12, хотя они предназначены только для подмножества ширины страницы. Колонки всегда в сумме составляют 12, независимо от ширины экрана, на которую они назначены. Этот код создаст два блока одинаковой ширины под столбцом шириной 10, как показано на следующем снимке экрана:
загрузочная страница ()
Функция bootstrapPage() не делает ничего, кроме загрузки фреймворка Bootstrap. После загрузки фреймворка wellPanel бесполезно перекрывает правую часть экрана; однако он по-прежнему изменяет размер.
Добавление контейнера div для жидкости вокруг кода делает пользовательский интерфейс и даже создаваемый HTML точно такими же, как в предыдущем примере с FluidPage():
server = function(input, output){
# server code
}
ui = bootstrapPage(
div(class = "container-fluid",
fluidRow(
column(2, wellPanel(p("Column width 2"))),
column(10, wellPanel(p("Column width 10")))),
fluidRow(
column(2, wellPanel(p("Column width 2"))),
column(10, wellPanel(p("Column width 10")),
fluidRow(
column(6, wellPanel(p("Column width 6"))),
column(6, wellPanel(p("Column width 6")))
)
)
)
)
)
shinyApp(ui = ui, server = server)
Вывод этого приложения выглядит так же, как вложенные столбцы, созданные с помощью FluidPage(). Сгенерированный HTML также одинаков.
фиксированная страница ()
Использование функции fixedPage() дает другие результаты по сравнению с функциями FluidPage() и bootstrapPage().
fixedPage() следует использовать с фиксированными строками, как показано в следующем фрагменте кода:
server = function(input, output){
# server code
}
ui = fixedPage(
fixedRow(
column(2, wellPanel(p("Column width 2"))),
column(8, wellPanel(p("Column width 8")), offset = 2))
)
shinyApp(ui = ui, server = server)
Когда вы посмотрите на окончательное приложение, вы увидите, что был добавлен зазор, который достигается с помощью команды смещения (Здесь команда смещения была добавлена в качестве аргумента столбца):
Вы также можете видеть, что, несмотря на автоматическое изменение размера, как и в случае с плавающей строкой, изменение размера занимает место с небольшими скачками, как в примере с фиксированной строкой.
Если эта статья показалась вам интересной, вы можете изучить книгу Криса Били. Практическая разработка приборной панели с Shiny постепенно изучать разработку пользовательского интерфейса с помощью Shiny на практических примерах. Практическая разработка приборной панели с Shiny поможет вам понять принципы, лежащие в основе компоновки в приложениях Shiny.
