基於選項卡和操作按鈕切換控制欄

Question

我正在嘗試使用右上角的 actionLink 來切換控制欄（基本上復制齒輪圖標的功能，稍后我將刪除齒輪圖標以只有一個 actionLink）並自動切換，這樣當用戶單擊反饋時，控制欄會消失並在用戶單擊任何其他選項卡時重新出現。 我還想確保在整個切換過程中，控制欄不會覆蓋儀表板主體（基本上，只要控制欄切換，儀表板主體就會適當調整大小）。

到目前為止，這是我嘗試過的：

library(shiny)
library(shinydashboard)
library(shinydashboardPlus)
library(shinyWidgets)
library(shinyjs)

ui <-  dashboardPage(
    title = 'Test',
    header = dashboardHeader(
      title = span("Test"),
      titleWidth = 600,
      tags$li(
        id = 'right-sidebar-toggle-list-item',
        class = "dropdown",
        actionLink("rightSidebarToggle", "Select Population"))
      
    ), # end of dashboardheader
    
    sidebar = dashboardSidebar(
      sidebarMenu(id = "sidebar",
                  menuItem("Overview", tabName = "introduction", icon = icon("info")),
    menuItem("Feedback", tabName = "feedback", icon = icon("info")))),
       body = dashboardBody(plotOutput("cars")),
                            controlbar = dashboardControlbar(
                              id = "controlbar",
                              width = 270,
                              skin = "light",
                              collapsed = F,
                              overlay = F,
                              controlbarMenu(
                                id = "menu",
                                controlbarItem(
                                  ' ',
                                  # - select study
                                  checkboxGroupButtons(
                                    inputId = "select_study",
                                    label = "Select Study",
                                    choiceNames = c("1", "2"),
                                    choiceValues = c("1", "2"),
                                    selected = c("1", "2"),
                                    justified = TRUE,
                                    status = "primary",
                                    direction = "vertical",
                                    checkIcon = list(yes = icon("ok", lib = "glyphicon"))
                                  ),
                                )
                              )
                            )
  )
  

server <- function(input, output, session) {
  
  output$cars <- renderPlot({
 plot(mtcars)
  })
  
  # event to toggle right sidebar menu
  observeEvent(input$rightSidebarToggle, {
    shinyjs::toggleClass(selector = "aside.control-sidebar", class = "control-sidebar-open")
})
  
  ##### > Controlbar Collapse #####
  
  observeEvent(input[["sidebar"]], {
    if(input[["sidebar"]] == "feedback"){
      removeClass(selector = "aside.control-sidebar", class = "control-sidebar-open")
    }else{
      addClass(selector = "aside.control-sidebar", class = "control-sidebar-open")
      updateControlbar("controlbar")
    }
  })
}
shinyApp(ui, server)
  

Answer 1

無需創建新的actionLink並隱藏現有的 a-tag。 我們可以簡單地修改它。

請檢查以下內容：

library(shiny)
library(shinydashboard)
library(shinydashboardPlus)
library(shinyWidgets)
library(shinyjs)

ui <-  dashboardPage(
  title = 'Test',
  header = dashboardHeader(
    title = span("Test"),
    titleWidth = 600,
    controlbarIcon = NULL
  ),
  sidebar = dashboardSidebar(sidebarMenu(
    id = "sidebar",
    menuItem("Overview", tabName = "introduction", icon = icon("info")),
    menuItem("Feedback", tabName = "feedback", icon = icon("info"))
  )),
  body = dashboardBody(
    useShinyjs(),
    tags$script(
      HTML(
        "var el = document.querySelector('body > div > header > nav > div:nth-child(4) > ul > li:last-child > a');
             el.innerHTML = 'Select Population';"
      )
    ),
    plotOutput("cars")
  ),
  controlbar = dashboardControlbar(
    id = "controlbar",
    width = 270,
    skin = "light",
    collapsed = FALSE,
    overlay = FALSE,
    controlbarMenu(id = "menu",
                   controlbarItem(' ',
                                  checkboxGroupButtons(
                                    inputId = "select_study",
                                    label = "Select Study",
                                    choiceNames = c("1", "2"),
                                    choiceValues = c("1", "2"),
                                    selected = c("1", "2"),
                                    justified = TRUE,
                                    status = "primary",
                                    direction = "vertical",
                                    checkIcon = list(yes = icon("ok", lib = "glyphicon"))
                                  )
                   )
    )
  )
)

server <- function(input, output, session) {
  output$cars <- renderPlot({
    plot(mtcars)
  })
  
  observeEvent(input[["sidebar"]], {
    if (input[["sidebar"]] == "feedback") {
      removeClass(selector = "body", class = "control-sidebar-open")
      shinyjs::runjs('Shiny.setInputValue(id = "controlbar", value = false);
                      $(window).trigger("resize");')
    } else {
      addClass(selector = "body", class = "control-sidebar-open")
      shinyjs::runjs('Shiny.setInputValue(id = "controlbar", value = true);
                      $(window).trigger("resize");')
    }
  }, ignoreInit = FALSE)
}
shinyApp(ui, server)

---

編輯：這是不使用library(shinyjs)的僅 UI 方法：

library(shiny)
library(shinydashboard)
library(shinydashboardPlus)
library(shinyWidgets)

ui <-  dashboardPage(
  title = 'Test',
  header = dashboardHeader(
    title = span("Test"),
    titleWidth = 600,
    controlbarIcon = NULL
  ),
  sidebar = dashboardSidebar(sidebarMenu(
    id = "sidebar",
    menuItem("Overview", tabName = "introduction", icon = icon("info")),
    menuItem("Feedback", tabName = "feedback", icon = icon("info"))
  )),
  body = dashboardBody(
    tags$script(
      HTML(
          "var el = document.querySelector('body > div > header > nav > div:nth-child(4) > ul > li:last-child > a');
             el.innerHTML = 'Select Population';
          $(document).on('shiny:connected', function(event) {
            $(window).trigger('resize'); // resize once on session start - needed when using collapsed = FALSE
          });
          $(document).on('shiny:inputchanged', function(event) {
            if (event.name === 'sidebar') {
              if (event.value === 'feedback') {
                document.querySelector('body').classList.remove('control-sidebar-open');
                Shiny.setInputValue(id = 'controlbar', value = false);
                $(window).trigger('resize');
              } else {
                document.querySelector('body').classList.add('control-sidebar-open');
                Shiny.setInputValue(id = 'controlbar', value = true);
                $(window).trigger('resize');
              }
            }
          });"
      )
    ),
    plotOutput("cars")
  ),
  controlbar = dashboardControlbar(
    id = "controlbar",
    width = 270,
    skin = "light",
    collapsed = FALSE,
    overlay = FALSE,
    controlbarMenu(id = "menu",
                   controlbarItem(' ',
                                  checkboxGroupButtons(
                                    inputId = "select_study",
                                    label = "Select Study",
                                    choiceNames = c("1", "2"),
                                    choiceValues = c("1", "2"),
                                    selected = c("1", "2"),
                                    justified = TRUE,
                                    status = "primary",
                                    direction = "vertical",
                                    checkIcon = list(yes = icon("ok", lib = "glyphicon"))
                                  )
                   )
    )
  )
)

server <- function(input, output, session) {
  output$cars <- renderPlot({
    plot(mtcars)
  })
}
shinyApp(ui, server)