代码之家  ›  专栏  ›  技术社区  ›  SNT

为R shinny应用程序切换图标操作按钮

  •  0
  • SNT  · 技术社区  · 7 年前

    我在一个闪亮的应用程序中有一个侧边栏面板,里面有一些我不需要一直显示的菜单项。所以我想要一个按钮来展开和折叠侧栏面板。现在我可以用两个不同的按钮来完成。是否有可能只显示一个按钮,它在折叠时将其图标切换为右箭头,在展开时切换为左箭头。

    library(shiny)
    library(shinyjs)
    
    ui <- fluidPage(
      useShinyjs(),
      navbarPage("",
                 tabPanel("tab",
                          div( id ="Sidebar",sidebarPanel(div(
                            id = "tab1-scrollspy",
                            class = "potential-scrollspy",
                            tags$ul(
                              class = "nav nav-pills nav-stacked",
    
                              tags$li(tags$a(href = "#section1-1", "Apple")),
                              tags$li(tags$a(href = "#section1-2", "Bananas")),
                              tags$li(tags$a(href = "#section1-3", "Oranges")),
                              tags$li(tags$a(href = "#section1-4", "Cherries"))
                            )
                          )
                          )),
                          mainPanel(actionButton("showSidebar", "", icon = icon("arrow-alt-circle-right")),
                                    actionButton("hideSidebar", "", icon = icon("arrow-alt-circle-left"))
                          )
                 )
      )
    )
    
    server <-function(input, output, session) {
      observeEvent(input$showSidebar, {
        shinyjs::show(id = "Sidebar")
      })
      observeEvent(input$hideSidebar, {
        shinyjs::hide(id = "Sidebar")
      })
    }
    
    shinyApp(ui, server)  
    
    0 回复  |  直到 7 年前
        1
  •  2
  •   Stéphane Laurent    7 年前
    library(shiny)
    library(shinyjs)
    
    ui <- fluidPage(
      useShinyjs(),
      navbarPage("",
                 tabPanel("tab",
                          div( id ="Sidebar",sidebarPanel(div(
                            id = "tab1-scrollspy",
                            class = "potential-scrollspy",
                            tags$ul(
                              class = "nav nav-pills nav-stacked",
    
                              tags$li(tags$a(href = "#section1-1", "Apple")),
                              tags$li(tags$a(href = "#section1-2", "Bananas")),
                              tags$li(tags$a(href = "#section1-3", "Oranges")),
                              tags$li(tags$a(href = "#section1-4", "Cherries"))
                            )
                          )
                          )),
                          mainPanel(
                            actionButton("toggleSidebar", "", icon = icon("arrow-alt-circle-left"))
                          )
                 )
      )
    )
    
    server <-function(input, output, session) {
    
      observeEvent(input$toggleSidebar, {
        shinyjs::toggle(id = "Sidebar")
        if(input$toggleSidebar %% 2 == 1){
          updateActionButton(session, "toggleSidebar", icon = icon("arrow-alt-circle-right"))
        }else{
          updateActionButton(session, "toggleSidebar", icon = icon("arrow-alt-circle-left"))
        }
      }, ignoreInit = TRUE)
    
    }
    
    shinyApp(ui, server)