Question

我在一个闪亮的应用程序中有一个sidebarPanel，其中包含一些我不需要总是显示的菜单项。所以我想有一个按钮可以展开和折叠sidebarPanel。到目前为止，我可以使用两个不同的按钮来完成此操作。是否可能只显示一个按钮，当它折叠时将其图标切换为右箭头，展开时将其图标切换为左箭头。

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)

Answer 1

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)

在R Shiny应用程序的操作按钮中切换图标

1 个答案: