R Блестящий макет блоков, строк и заголовков - PullRequest
Новая
       7

R Блестящий макет блоков, строк и заголовков

0 голосов
/ 06 октября 2019

Я завершаю работу над приложением R Shiny и борюсь с разметкой блоков и заголовков. Поскольку у меня много блоков, я построил свой макет отдельно и закодировал его в пользовательском интерфейсе моего приложения Shiny, используя комбинацию FluidRow и столбца. Обычно каждый из моих блоков имеет заголовок в форме p (...), за которым следует некоторая информация в той же форме.

Так как мне нравится идея иметь боковую панель «управления»блоки на левой стороне моего приложения используются для управления различными входами, которые я использую в приложении. Когда пользователь делает вещи, блоки с левой стороны - это те, которые подвергаются воздействию и изменяются.

У меня есть блоки полной строки, которые принадлежат к той же "категории". Это динамический пользовательский интерфейс, который может иметь от 1 до 8 блоков, в зависимости от ввода слайдера, с которым пользователь может играть. Я пытаюсь добиться, чтобы одна строка заголовка (или параграф, или заголовок, не имеет значения) была линией над блоками, а затем имела блоки, сохраняя при этом только одну единицу на «панели управления» на панели управления. левая сторона.

Несколько изображений, чтобы прояснить это:

https://i.imgur.com/Htt4oIK.jpg - это то, что у меня сейчас есть для большинства моих блоков. Одна строка для заголовка (синяя), одна строка для контента (зеленая). Темно-зеленый - это общий «ряд», а красный - «блоки». Код для этого макета следующий: 

fluidRow(
    column(4, wellPanel()),
    column(2, mainPanel(
        p("blue"),
        p("green")
    )),
    column(2, mainPanel()),
    column(2, mainPanel()),
    column(2, mainPanel())
)

Теперь, что:

https://i.imgur.com/i728blL.jpg - это то, чего я пытаюсь достичь, и я не смог достичьэтого результата пока нет. Я попробовал пару вещей:

1) Использование другого FluidRow для заголовка и для содержимого. Проблема с этим заключается в форматировании, так как поле управления слева является частью первой строки, оно ограничивает высоту самой строки, то есть заголовок будет намного выше содержимого. Это выглядит так: https://i.imgur.com/sU0AEds.jpg,, и я хочу сократить бесполезное пространство.

Синтаксис для этого будет: 

fluidRow(
    column(4, wellPanel()),
    column(8, mainPanel(
        p("blue")
    ))
),
fluidRow(
    column(4, mainPanel()),
    column(2, mainPanel(
        p("green")
    )),
    column(2, mainPanel()),
    column(2, mainPanel()),
    column(2, mainPanel())
)

2) Расположить подблоки внутрибольший столбец. Код для этого будет выглядеть следующим образом: 

fluidRow(
    column(4, wellPanel()),
    column(8, mainPanel(
        p("blue"),
        column(2, mainPanel(
            p("green")
        )),
        column(2, mainPanel()),
        column(2, mainPanel()),
        column(2, mainPanel())
    ))
)

И проблема в том, что столбцы внутри столбцов, похоже, не работают должным образом. Вместо того, чтобы столбцы шириной 2 занимали все пространство моих столбцов шириной 8, они оказывались странной ширины и перекрывали друг друга.

Идеи? Там может быть простое решение HMTL, но я действительно не эксперт в этом. Спасибо!

1 Ответ

0 голосов
/ 06 октября 2019

Вы можете разбить второй столбец на четыре столбца шириной 3. Размещение этих столбцов внутри fluidRow также выровняет их по элементу заголовка выше.

РЕДАКТИРОВАТЬ

Динамически генерируемые столбцы и поля. Установите ширину коробки как ceiling(12 / number of boxes). Когда сумма ширин превышает 12, блоки переполняются во втором ряду. Мы должны использовать что-то вроде ceiling или floor, потому что дробные части не разрешены в системе начальной загрузки, и когда width равен, например, 1,5, блоки наследуют ширину родительского столбца. Один из вариантов - установить максимальную ширину ящика на 3 и иметь двухстрочный макет, когда пользователь выбирает> 4 ящика.

enter image description here

Код: 

library(shiny)

wp <- tagList(wellPanel(
  h3("Title"),
  p(
    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
  )
))

ui <- fluidPage(fluidRow(
  column(
    width = 4,
    wp,
    sliderInput(
      "n_boxes",
      label = "Number of boxes",
      min = 1,
      max = 8,
      value = 2,
      step = 1
    )
  ),
  column(width = 8,
         wellPanel(h2("T I T L E")),
         uiOutput("blocks"))
))

server <- function(input, output) {
  make_boxes <- reactive({
    box_width <- ceiling(12 / input$n_boxes)
    message(box_width)

    x <-
      lapply(1:input$n_boxes, function(x)
        column(width = box_width, wp))
    x
  })

  output$blocks <- renderUI({
    fluidRow(make_boxes())
  })
}

shinyApp(ui, server)

Для возможного альтернативного подхода, который позволяет с колонки превышать 12 и использует горизонтальную полосу прокрутки, взгляните на эту тему: R блестящая панель инструментов: Превышение ширины начальной загрузки =12 и добавить горизонтальную полосу прокрутки

...