Блестящий макет: создайте блестящую страницу с прокручиваемой панелью и панелью, которая остается неподвижной - PullRequest
Новая
       6

Блестящий макет: создайте блестящую страницу с прокручиваемой панелью и панелью, которая остается неподвижной

0 голосов
/ 15 марта 2020

Я хотел бы создать панель со следующим :

На желтой панели отображаются графики, которые можно прокручивать, если несколько участков создаются и не могут быть просмотрены на странице. Зеленая панель почти должна быть похожа на нижний колонтитул на странице и зафиксирована даже при прокрутке желтой панели.

example of what I want

Пока это мой код. Мне удалось получить синюю, желтую и зеленую панели, но я не уверен, как сделать вещи прокручиваемыми и исправленными. 

data <- mtcars

ui <- fluidPage(
  tags$head(
    tags$style(HTML("body, pre { height: 100%}")),
    tags$style("#panel1 {background: green; height: 100%; position: fixed}"),
  ),

  fluidRow(id='row1',
    column(2,id='panel1',
      selectizeInput(inputId= "obs", label= "Obs", 
                     choices= names(mtcars), 
                     selected= names(mtcars)[1],
                     multiple=F),
      selectizeInput(inputId= "sublevel", label= "Sublevel", 
                     choices= sort(unique(mtcars$cyl)), 
                     selected= sort(unique(mtcars$cyl))[1],
                     multiple=F)
    ),
    column(10, id='panel2',offset = 2,
           fluidRow(tableOutput("tab")),
           fluidRow(textOutput("hi"))
    )
  )
)

server <- function(input, output){
  sorted <- reactive({data %>% arrange_(input$obs) %>% filter(cyl == input$sublevel)})
  output$tab= renderTable(sorted())
  output$hi<-renderPrint(paste0("hello"))
}

shinyApp(ui = ui, server = server)

Any help is very much appreciated.

1 Ответ

1 голос
/ 17 марта 2020

Здесь вы go.

Ключевые моменты:

  • используйте absolutePanel для настройки положения слева, справа, сверху, снизу;
  • используйте height и width для ограничения поля;
  • В css используйте overflow: auto; для желтого поля для прокрутки расширенных элементов 
data <- mtcars

ui <- fluidPage(
    tags$head(
        tags$style("html, body { height: 100%; width: 100%}"),
        tags$style("#panel1 {background: #ADD8E6; height: 100px; position: fixed}"),
        tags$style("#panel2 {
            overflow: auto;
            background: orange;
            margin-left: 5px;
        }"),
        tags$style("#panel3 {background: green}")
    ),
    absolutePanel(id = "panel1",
                  height = "100%", width = "20%", right = "80%",
                  selectizeInput(inputId= "obs", label= "Obs", 
                                 choices= names(mtcars), 
                                 selected= names(mtcars)[1],
                                 multiple=F),
                  selectizeInput(inputId= "sublevel", label= "Sublevel", 
                                 choices= sort(unique(mtcars$cyl)), 
                                 selected= sort(unique(mtcars$cyl))[1],
                                 multiple=F)
    ), 
    absolutePanel(id = "panel2", 
                  top = "0%", left = "20%", height = "80%", width = "80%", right = "0%",bottom = "20%",
                  fluidRow(tableOutput("tab")),
                  HTML("<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
                         <br><br><br><br><p>sdsdsd</p>"),
                  fluidRow(textOutput("hi"))

    ),
    absolutePanel(id = "panel3",
                  top = "80%", left = "20%", height = "20%", width = "80%", right = "0%",bottom = "0",
                  p("haha")
    )
)

server <- function(input, output){
    sorted <- reactive({data %>% arrange_(input$obs) %>% filter(cyl == input$sublevel)})
    output$tab= renderTable(sorted())
    output$hi<-renderPrint(paste0("hello"))
}

shinyApp(ui = ui, server = server)
...