Сортируемые изменения в списке желаемого Shiny (ширина и отступы)

Вопрос или проблема

## Пример приложения shiny с списком задач

library(shiny)
library(sortable)

ui <- fluidPage(
  tags$head(
    tags$style(HTML(".bucket-list-container {min-height: 350px;}"))
  ),
  fluidRow(
    column(
      tags$b("Упражнение"),
      width = 12,
      bucket_list(
        header = "Перетаскивайте элементы в любой желаемый список",
        group_name = "bucket_list_group",
        orientation = "horizontal",
        add_rank_list(
          text = "Перетаскивать отсюда",
          labels = list(
            "один",
            "два",
            "три",
            htmltools::tags$div(
              htmltools::em("Сложный"), " html тег без имени"
            ),
            "пять" = htmltools::tags$div(
              htmltools::em("Сложный"), " html тег с именем: 'пять'"
            )
          ),
          input_id = "rank_list_1"
        ),
        add_rank_list(
          text = "вот сюда",
          labels = NULL,
          input_id = "rank_list_2"
        )
      )
    )
  ),
  fluidRow(
    column(
      width = 12,
      tags$b("Результат"),
      column(
        width = 12,

        tags$p("input$rank_list_1"),
        verbatimTextOutput("results_1"),

        tags$p("input$rank_list_2"),
        verbatimTextOutput("results_2"),

        tags$p("input$bucket_list_group"),
        verbatimTextOutput("results_3")
      )
    )
  )
)

server <- function(input, output, session) {
  output$results_1 <-
    renderPrint(
      input$rank_list_1 # Это соответствует input_id первого списка задач
    )
  output$results_2 <-
    renderPrint(
      input$rank_list_2 # Это соответствует input_id второго списка задач
    )
  output$results_3 <-
    renderPrint(
      input$bucket_list_group # Соответствует group_name списка задач
    )

}

shinyApp(ui, server)

Ответ или решение

Корректировка ширины и промежутков между списками "bucket list" в Shiny

Введение

Создание веб-приложений на основе R с использованием Shiny и пакета sortable позволяет создавать интерактивные и динамичные интерфейсы. Одной из популярных фич является использование так называемых "bucket lists", что представляет собой интерактивные списки с возможностью перетаскивания элементов. Однако иногда требуется настроить визуальное представление, добавляя определенные пропорции между шириной списков и регулируя промежуток между ними. В следующей статье мы рассмотрим, как выполнить эти корректировки.

Настройка ширины списков

В вашем Shiny приложении, чтобы определить соотношение ширины между двумя "bucket lists", необходимо использовать CSS. В частности, вы можете задать фиксированные размеры для каждого из списков или использовать относительные проценты, чтобы обеспечить гибкость при изменении размеров окна браузера.

Вот пример изменения ширины списков с использованием встроенного стиля CSS:

ui <- fluidPage(
  tags$head(
    tags$style(HTML("
      .bucket-list-container {
        min-height: 350px;
        width: 45%; /* Задаем ширину для первого списка */
        float: left; /* Расположение списка слева */
      }
      .bucket-list-container:nth-child(2) {
        width: 45%; /* Задаем ширину для второго списка */
        margin-left: 5%; /* Установка промежутка между списками */
        float: left; /* Расположение списка справа */
      }
    "))
  ),
  ...
)

В данном примере оба списка занимают 45% ширины контейнера страницы, а промежуток между ними составляет 5%. Использование float: left позволяет расположить списки горизонтально в один ряд.

Регулировка промежутков между списками

Для регулировки промежутков между "bucket lists" можно использовать свойство CSS margin. В приведенном выше примере мы задали дополнительный margin-left для второго списка, чтобы создать пространство между двумя элементами.

Если вам необходимо больше контроля над промежутками, вы можете использовать дополнительные свойства, такие как padding или просто добавить больше отступов через CSS:

.tags$style(HTML("
  .bucket-list-container {
    min-height: 350px;
    width: 45%;
    float: left;
    margin-right: 2%; /* Установка промежутка между первым и вторым списком */
  }
"))

Заключение

Корректировка ширины и промежутков между списками в Shiny приложения с использованием sortable является важным аспектом UX-дизайна. При помощи CSS вы можете задать необходимые параметры, которые позволят создать удобный и эстетичный интерфейс. Понимание основ дизайна и использования CSS позволяет значительно улучшить взаимодействие пользователя с вашим приложением.

Теперь, имея возможность регулировать ширину и промежутки между вашими "bucket lists", вы можете максимально адаптировать интерфейс для пользователей. Не забывайте проверять отображение вашего приложения на различных устройствах, чтобы обеспечить его адаптивность и легкость использования.