Блог

Главная - Вопросы по программированию - Как минимизировать sidebarLayout в блестящем приложении?

Как минимизировать sidebarLayout в блестящем приложении?

#shiny #shinyjs

#блестящий #shinyjs

Вопрос:

Я создаю блестящее приложение и использую два sidebarLayout. Я ищу способ минимизировать их. Я попытался поместить каждый sidebarLayout в поле.

Пример кода:

 library(shiny)
library(shinyjs)

ui <- fluidPage(
  useShinyjs(),
  headerPanel("Here goes the heder"),
  box(sidebarLayout(
          sidebarPanel(textOutput("someinputs")),
          
          mainPanel(textOutput("someoutputs"))),
          
          width = 12,
          title = "BB",
          collapsible = T,
          collapsed = F
    
  )
)

server <- function(input, output) {
  
  output$someinputs <- renderText({
    "Here will go the inputs"
  })
  
  output$someoutputs <- renderText({
    "Here will go the outputs"
  })
  
  }

shinyApp(ui, server)

Вывод:Результат
Когда я нажимаю кнопку сворачивания, макет не сворачивается. Почему это происходит? Что мне делать? Есть ли другой способ сделать это?

Ответ №1:

Потому что вы не использовали shinydashboard . Коробка поставляется из shinydashboard пакета. Вам нужно использовать shinydashboard::dashboardPage вместо fluidPage . dashboardPage Загружает необходимые javascripts и CSS-файлы для переключения кнопки.

 library(shiny)
ui <- shinydashboard::dashboardPage(
    shinydashboard::dashboardHeader(),
    shinydashboard::dashboardSidebar(),
    shinydashboard::dashboardBody(
        headerPanel("Here goes the heder"),
        shinydashboard::box(
            width = 12,
            title = "BB",
            collapsible = TRUE,
            collapsed = FALSE,
            sidebarLayout(
                sidebarPanel(textOutput("someinputs")),
                mainPanel(textOutput("someoutputs")))
        ) 
    )
)

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

 library(magrittr)
library(shiny)
ui <- fluidPage(
    headerPanel("Here goes the heder"),
    shinydashboard::box(
        width = 12,
        title = "BB",
        collapsible = TRUE,
        collapsed = FALSE,
        sidebarLayout(
            sidebarPanel(textOutput("someinputs")),
            mainPanel(textOutput("someoutputs")))
    )%>% {.$attribs[['id']] <- 'example-box'; .},
    tags$head(tags$script(
        "$(document).ready(function(){
          $('#example-box button').attr({
            'data-toggle':'collapse', 
            'data-target':'#example-box .box-body', 
            'aria-expanded':false
          })
        })"
    ))
)

Я использовал хак, чтобы назначить идентификатор для окна %>% {.$attribs[['id']] <- 'example-box'; .} и использовать некоторый jquery для управления кнопкой. Убедитесь, что идентификатор в скрипте соответствует идентификатору, который вы назначаете в пользовательском интерфейсе, example-box в данном случае. В javascript вы добавляете # для поиска идентификаторов, поэтому #example-box .

Я бы не рекомендовал вам использовать второй способ. Вы можете видеть в своем пользовательском интерфейсе, что на самом деле это не коробка. У него нет границы, и кнопка находится не в нужном месте. Если вы используете dashboardPage , вы можете увидеть разницу. окно