【问题标题】:R Shiny - Automatically hide the sidebar when you navigate into tab itemsR Shiny - 导航到选项卡项时自动隐藏侧边栏
【发布时间】:2018-05-29 13:23:48
【问题描述】:

我有一个 Shiny 应用程序 - 此处为简化示例 - 我希望在导航到选项卡项时动态隐藏侧边栏。事实上,用户将主要通过他们的手机连接到该应用程序。

在帖子Hide sidebar in default in shinydashboard的帮助下,我知道如何在您到达应用程序时默认隐藏侧边栏,但在侧边栏始终显示之后。

这是我的实际代码:

### Load librairies
library(shiny) ; library(shinydashboard) ; library(shinyjs)
library(dplyr)

### Load data
Weather <- c("cold", "rain", "snow","heat","sun")
Answer <- c("Take a coat","Take an umbrella","Take gloves","Take a swimsuit","Take solair cream")
Mydata <- data.frame( Weather, Answer, stringsAsFactors = FALSE)

remove(Weather, Answer)

### Shiny
Entete <- dashboardHeader(title = "My app")

BarreLaterale <- dashboardSidebar(
  sidebarMenu(menuItem(text = "Home", tabName = "MyHome", icon = icon("home"))),
  sidebarMenu(menuItem(text = "My search", tabName = "Search", icon = icon("search")))
  )

Corps <- dashboardBody(

  useShinyjs(),

  tabItems(

    tabItem(tabName = "MyHome",
            fluidPage("Hello, welcome to the home page")
    ),        

    tabItem(tabName = "Search",
            fluidRow(
              box(title = "Weather choice",  width = 6, solidHeader = TRUE, status = "danger",
                  selectInput(inputId = "WeatherChoice", label = NULL, choices = unique(Mydata$Weather))),
              box(title = "Answer", width = 6, solidHeader = TRUE, status = "danger",
                  textOutput("ReturnAnswer"))
            )
    )

  )  
)

Interface <- dashboardPage(Entete, BarreLaterale, Corps, skin = "red")

### Server R
Serveur <- function(input, output, session) {

  output$ReturnAnswer <- renderText({
    as.character(Mydata %>% filter(Weather == input$WeatherChoice) %>% select(Answer))
  })

  addClass(selector = "body", class = "sidebar-collapse")

}

### Application
shinyApp(Interface, Serveur)

【问题讨论】:

    标签: r shiny shinydashboard shinyjs


    【解决方案1】:

    我在您的sidebarmenu 中添加了一个id(注意:您只需要一个带有多个menuItemssidebarmenu)和一个observeEvent 来监听所选标签中的更改,使用id

    ### Load librairies
    library(shiny) ; library(shinydashboard) ; library(shinyjs)
    library(dplyr)
    
    ### Load data
    Weather <- c("cold", "rain", "snow","heat","sun")
    Answer <- c("Take a coat","Take an umbrella","Take gloves","Take a swimsuit","Take solair cream")
    Mydata <- data.frame( Weather, Answer, stringsAsFactors = FALSE)
    
    remove(Weather, Answer)
    
    ### Shiny
    Entete <- dashboardHeader(title = "My app")
    
    BarreLaterale <- dashboardSidebar(
      sidebarMenu(id="mysidebar",
                    menuItem(text = "Home", tabName = "MyHome", icon = icon("home")),
                  menuItem(text = "My search", tabName = "Search", icon = icon("search")))
    )
    
    Corps <- dashboardBody(
    
      useShinyjs(),
    
      tabItems(
    
        tabItem(tabName = "MyHome",
                fluidPage("Hello, welcome to the home page")
        ),        
    
        tabItem(tabName = "Search",
                fluidRow(
                  box(title = "Weather choice",  width = 6, solidHeader = TRUE, status = "danger",
                      selectInput(inputId = "WeatherChoice", label = NULL, choices = unique(Mydata$Weather))),
                  box(title = "Answer", width = 6, solidHeader = TRUE, status = "danger",
                      textOutput("ReturnAnswer"))
                )
        )
    
      )  
    )
    
    Interface <- dashboardPage(Entete, BarreLaterale, Corps, skin = "red")
    
    ### Server R
    Serveur <- function(input, output, session) {
    
      output$ReturnAnswer <- renderText({
        as.character(Mydata %>% filter(Weather == input$WeatherChoice) %>% select(Answer))
      })
    
      # this line is now actually obsolete.
      addClass(selector = "body", class = "sidebar-collapse")
    
      observeEvent(input$mysidebar,
                   {
                     # for desktop browsers
                     addClass(selector = "body", class = "sidebar-collapse")
                     # for mobile browsers
                     removeClass(selector = "body", class = "sidebar-open")
                   })
    
    ### Application
    shinyApp(Interface, Serveur)
    

    现在,每当您从一个选项卡切换到另一个选项卡时,侧边栏都会再次隐藏。

    希望这会有所帮助!

    【讨论】:

    • 附加评论:发布我的应用程序后,当我使用 PC 上的浏览​​器时行为良好,但当我使用手机上的浏览器时效果不佳。任何想法 ? salsapedia.shinyapps.io/TestApp
    • 我在移动浏览器上检查了页面,似乎使用的类取决于浏览器的宽度。所以我添加了removeClass(selector = "body", class = "sidebar-open")这一行来处理小宽度浏览器,希望这能解决你的问题。
    猜你喜欢
    • 1970-01-01
    • 2017-03-17
    • 1970-01-01
    • 2016-03-28
    • 1970-01-01
    • 2018-11-15
    • 2020-06-30
    • 2017-11-03
    • 1970-01-01
    相关资源
    最近更新 更多