在 R shinydashboard 中单击时更改 menuItems 箭头图标的方向

Question

在下面的示例中，是否可以使侧边栏的左向箭头在未选中时向下（表示单击它会打开菜单）并在选中时向上（表示它可以关闭）？

library(shiny)
library(shinydashboard)

ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(
    sidebarMenu(
      menuItem(text = "Click Me!",
               "Hello World!")
    )
  ),
  dashboardBody()
)

server <- function(input, output) { }

shinyApp(ui, server)

我想要的最终结果是：

Answer 1

您可以通过 shinyjs 实现：

library(shiny)
library(shinyjs)
library(htmltools)
library(shinydashboard)

sidebar <- htmltools::tagQuery(dashboardSidebar(
  sidebarMenu(
    id = "sidebarID",
    menuItem(text = "Click Me!",
             "Hello World!")
  )
))

sidebar <- sidebar$find("i")$removeClass("fa-angle-left")$addClass("fa-angle-down")$allTags()

ui <- dashboardPage(
  dashboardHeader(),
  sidebar,
  dashboardBody(
    useShinyjs()
  )
)

server <- function(input, output) {
  observeEvent(input$sidebarItemExpanded, {
    if(!is.null(input$sidebarItemExpanded)){
      removeCssClass(class = "fa-angle-down", selector = "#sidebarItemExpanded > ul > li > a > i")
      addCssClass(class = "fa-angle-up", selector = "#sidebarItemExpanded > ul > li > a > i")
    } else {
      addCssClass(class = "fa-angle-down", selector = "#sidebarItemExpanded > ul > li > a > i")
      removeCssClass(class = "fa-angle-up", selector = "#sidebarItemExpanded > ul > li > a > i")
    }
  }, ignoreNULL = FALSE)
}

shinyApp(ui, server)

编辑： 多个菜单项：

library(shiny)
library(shinyjs)
library(htmltools)
library(shinydashboard)

sidebar <- htmltools::tagQuery(dashboardSidebar(
  sidebarMenu(
    id = "sidebarID",
    menuItem(text = "Click Me!",
             "Hello World!"),
    menuItem(text = "or click Me!",
             "Hello World!")
  )
))

sidebar <- sidebar$find("i")$removeClass("fa-angle-left")$addClass("fa-angle-down")$allTags()

ui <- dashboardPage(
  dashboardHeader(),
  sidebar,
  dashboardBody()
)

server <- function(input, output) {
  previousSelection <- reactiveVal(isolate(input$sidebarItemExpanded))
  observeEvent(input$sidebarItemExpanded, {
    if(!is.null(input$sidebarItemExpanded)){
      removeCssClass(class = "fa-angle-down", selector = "#sidebarItemExpanded > ul > li.treeview.active > a > i")
      addCssClass(class = "fa-angle-up", selector = "#sidebarItemExpanded > ul > li.treeview.active > a > i")
      
      if(!is.null(previousSelection())){
        if(input$sidebarItemExpanded != previousSelection()){
          addCssClass(class = "fa-angle-down", selector = "#sidebarItemExpanded > ul > li > a > i")
          removeCssClass(class = "fa-angle-up", selector = "#sidebarItemExpanded > ul > li > a > i")
          removeCssClass(class = "fa-angle-down", selector = "#sidebarItemExpanded > ul > li.treeview.active > a > i")
          addCssClass(class = "fa-angle-up", selector = "#sidebarItemExpanded > ul > li.treeview.active > a > i")
        }
      }

      previousSelection(input$sidebarItemExpanded)
      
    } else {
      addCssClass(class = "fa-angle-down", selector = "#sidebarItemExpanded > ul > li > a > i")
      removeCssClass(class = "fa-angle-up", selector = "#sidebarItemExpanded > ul > li > a > i")
    }
  }, ignoreNULL = FALSE)
}

shinyApp(ui, server)

在 R shinydashboard 中单击时更改 menuItems 箭头图标的方向

Changing direction of menuItems arrow icon on click in R shinydashboard

r

shiny

shinydashboard