Можно ли запрограммировать краткий блестящий пользовательский интерфейс на основе строк? - PullRequest
0 голосов
/ 17 апреля 2019

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

Вложенность fluidRow: R Shiny - как создать этот макет с вложенными строками в столбце 2

блестящие 4 маленьких текстовых поля ввода рядом друг с другом

Вот подмножество моего кода:

ui <- fluidPage(
  h1("XXX"), #Main page title
  fluidRow(
    column(3,
           wellPanel(
             sliderInput(inputId = "time.step",
                         label = "Time",
                         value = 100, min = 0, max = 1000),
             numericInput(inputId = "no_",
                          label = "choose number",
                          value = 8, min = 1, max = 10),
             checkboxGroupInput(inputId = "chr_vec",
                                label = "characters",
                                choices = c("a", "b", "c", "d", "e", "f",
                                            "g", "h", "i", "j", "k"),
                                selected = c("a", "b")
             ), #close checkboxGroupInput
             actionButton("runbutton", "Run")
           ) #close wellPanel
    ), #close column
    #### Parameters ####
    column(8,
           fluidRow(

             conditionalPanel(
               condition = "input.chr_vec.indexOf('a') !== -1",

                    column(12,
           splitLayout("Parameters",
                     numericInput(inputId = "1.numeric.flip.time",
                                  label = "1",
                                  value = 50, min = 0, max = 1000),

                     numericInput(inputId = "2.numeric.start.val",
                                  label = "2",
                                  value = 99, min = 0, max = 1000),

                     numericInput(inputId = "3.numeric.end.val",
                                  label = "3",
                                  value = 100, min = 0, max = 1000),

                     numericInput(inputId = "sd.numeric.stdev",
                                  label = "SD",
                                  value = 0, min = 0, max = 1000)
           ) #close splitLayout
                    ) #close column
             ) #close conditionslPanel
           ), #close fluidRow


           fluidRow(
             conditionalPanel(
               condition = "input.chr_vec.indexOf('b') !== -1",
             column(12,
                    splitLayout("Parameters2",
                                numericInput(inputId = "5.numeric.flip.time",
                                             label = "5",
                                             value = 50, min = 0, max = 1000),

                                numericInput(inputId = "6.numeric.start.val",
                                             label = "6",
                                             value = 99, min = 0, max = 1000)

                    ) #close splitLayout
             ) #cose column
             ) #close conditionalPanel
           ) # close fluidRow

    ) #close column
  )
)
shinyApp(ui, server = function(input, output) { })

Вещи IПытаюсь решить:

1) Заголовок «параметры» странно всплывает, как поле ввода, занимающее место.

2) в реальном коде есть примерно дюжина строк параметров(одна строка на флажок слева), вещи становятся очень грязными, особенно когда количество строк выходит за пределы столбца ввода проверки (нацеливаясь на что-то вроде изображения ниже).

3) масштаб и обоснование - поможетмного, если бы я мог немного уменьшить шрифт и поля ввода строк параметров и в идеале выровнять поля ввода слева, а не по центру, чтобы они выстроились в ряд (пробовал это до сих пор: Управление высотой в liquidRow в Rблестящий ).

Desired layout

Поиск некоторых потенциальных решений с использованием языков, с которыми я не знаком (CSS), поэтому небольшое объяснение будет очень цениться :) Заранее спасибо!

1 Ответ

1 голос
/ 27 мая 2019

CSS - это путь, вы можете многое сделать за несколько строк CSS.См. https://shiny.rstudio.com/articles/css.html для получения дополнительной информации об интеграции CSS в R.

В процессе написания этого ответа я обнаружил, что могу упростить некоторые из ваших R-кодов.Иерархически, теперь я просто использую условную панель, обертывающую жидкостный ряд.Мне также пришлось написать простой цикл for для генерации достаточного количества строк, чтобы проверить проблему переполнения для 2).Обновленный код R здесь:

library(shiny)

choices <- c("a", "b", "c", "d", "e", "f",
             "g", "h", "i", "j", "k")


rows <- list(8)
for (choice in choices) {
  print(choice)
  row <- conditionalPanel(
    condition = paste0("input.chr_vec.indexOf('", choice, "') !== -1"),
    fluidRow(
      span(paste0("Parameters (", choice, ")")),
      numericInput(
        inputId = "1.numeric.flip.time",
        label = "1",
        value = 50,
        min = 0,
        max = 1000
      ),

      numericInput(
        inputId = "2.numeric.start.val",
        label = "2",
        value = 99,
        min = 0,
        max = 1000
      ),

      numericInput(
        inputId = "3.numeric.end.val",
        label = "3",
        value = 100,
        min = 0,
        max = 1000
      ),

      numericInput(
        inputId = "sd.numeric.stdev",
        label = "SD",
        value = 0,
        min = 0,
        max = 1000
      )
    )
  )
  rows <- append(rows, list(row))
}

ui <- fluidPage(theme = "custom.css",
                h1("XXX"), #Main page title
                fluidRow(
                  column(
                    3,
                    wellPanel(
                      sliderInput(
                        inputId = "time.step",
                        label = "Time",
                        value = 100,
                        min = 0,
                        max = 1000
                      ),
                      numericInput(
                        inputId = "no_",
                        label = "choose number",
                        value = 8,
                        min = 1,
                        max = 10
                      ),
                      checkboxGroupInput(
                        inputId = "chr_vec",
                        label = "characters",
                        choices = choices,
                        selected = c("a", "b")
                      ),
                      #close checkboxGroupInput
                      actionButton("runbutton", "Run")
                    ) #close wellPanel
                  ),
                  #close column
                  #### Parameters ####
                  do.call(column, rows)
                ))
shinyApp(
  ui,
  server = function(input, output) {

  }
)

Я добавил theme = "custom.css" к вашему вызову FluidPage и создал www / custom.css со следующим содержанием:

.col-sm-8 .row .form-group,.form-control {
  display: inline-block;
  width: 100px;
}

.col-sm-8 .row span {
  width: 150px;
  display: inline-block;
}

.col-sm-8 .row .form-group,.form-control isСелектор CSS, который выбирает ваши числовые входы, те, которые находятся в столбце ширины 8. Вы можете найти эти имена классов / структуру HTML, щелкнув правой кнопкой мыши на работающей версии вашего приложения и выбрав Inspect.Содержимое фигурных скобок {} определяет стиль выбранных элементов.Установка индикации на inline-block приведет к горизонтальному течению блоков.Установка ширины в 100px значительно уменьшает размер ваших числовых входов (по умолчанию 300px).Переключение селекторов .form-group,.form-control на span приведет к выбору заголовка строки.Я установил это значение на 150px, так как это дает достаточно места для строки «Параметры (a)».

Я развернул это на https://nyou045.shinyapps.io/test/, чтобы вы могли увидеть живую демонстрацию

Надеюсь, это поможет!

...