Создание макета в строках и столбцах с помощью 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 позаботится о размерах элементов в любом используемом вами окне браузера.

На следующем снимке экрана показан вывод предыдущего кода:
1.PNG

Изменение размера окна приводит к плавному изменению размеров всех элементов, как показано на следующем снимке экрана:
2.PNG

Чтобы просмотреть вложенные столбцы, используйте 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, как показано на следующем снимке экрана:
3.PNG

загрузочная страница ()

Функция bootstrapPage() не делает ничего, кроме загрузки фреймворка Bootstrap. После загрузки фреймворка wellPanel бесполезно перекрывает правую часть экрана; однако он по-прежнему изменяет размер.
4.PNG

Добавление контейнера 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)

Когда вы посмотрите на окончательное приложение, вы увидите, что был добавлен зазор, который достигается с помощью команды смещения (Здесь команда смещения была добавлена ​​в качестве аргумента столбца):
5.PNG

Вы также можете видеть, что, несмотря на автоматическое изменение размера, как и в случае с плавающей строкой, изменение размера занимает место с небольшими скачками, как в примере с фиксированной строкой.

Если эта статья показалась вам интересной, вы можете изучить книгу Криса Били. Практическая разработка приборной панели с Shiny постепенно изучать разработку пользовательского интерфейса с помощью Shiny на практических примерах. Практическая разработка приборной панели с Shiny поможет вам понять принципы, лежащие в основе компоновки в приложениях Shiny.

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *