首页 > 解决方案 > 闪亮:更改为另一个选项卡,使当前变灰

问题描述

我正在尝试使用 golem 制作一个闪亮的应用程序,但我对此很陌生,并尝试做一些我认为简单的事情,但事实证明并非如此。

在我的app_ui.R文件中,我有一个这样的选项卡结构:

app_ui <- function(request) {
  tagList(
    # Leave this function for adding external resources
    golem_add_external_resources(),
    # Your application UI logic
    fluidPage(
      titlePanel("Debarcoding"),
      tabsetPanel(id = "mainTabset",
        tabPanel(value = "gating", "Gating",
                 htmltools::br(" "),
                 sidebarLayout(
                   sidebarPanel(
                     mod_gating_side_ui("gating_side_ui_1")),
                   mainPanel(
                     mod_gating_scatter_ui("gating_scatter_ui_1")))),
        tabPanel(value = "saving", "Saving",
                 htmltools::br(" "),
                 sidebarLayout(
                   sidebarPanel(
                     mod_saving_side_ui("saving_side_ui_1")),
                   mainPanel(
                     mod_saving_scatter_ui("saving_scatter_ui_1")))))
    )
  )
}

我想要的只是gating选项卡处于活动状态,而该选项卡saving被禁用。

然后,在选项卡的side一部分中,gating我想要一个显示 的按钮FINISHED,所以当我单击它时,saving选项卡会出现并且该选项卡gating会被禁用。

为此,我在我的mod_gating_side.R文件中尝试了以下内容,但它不起作用......

mod_gating_side_ui <- function(id){
  ns <- NS(id)
  tagList(
    shinyjs::useShinyjs(),
    shinyalert::useShinyalert(),

    actionButton(ns("finish_and_switch"),
                 "Finish gating")
 
  )
}

mod_gating_side_server <- function(id, r){
  moduleServer( id, function(input, output, session){
    ns <- session$ns

    # observer to finish gating and switch to saving tab
    observeEvent(input$finish_and_switch, {
        updateTabsetPanel(session, "mainTabset", "saving")
    })

  })
}

任何线索如何做到这一点?完成我需要的最佳方法是什么?它不需要是选项卡,只要有一个页面处于活动状态和一个页面处于禁用状态,以及一个切换到第二页并禁用第一页的 FINISH 按钮即可。那可能吗?谢谢!

标签: rshinytabsgolem

解决方案


我将您的代码减少到所需的最小值,并从此处修改代码以使用 atabsetPanel而不是navbarPage.

Please check the following:

library(shiny)
library(shinyjs)

css <- "
.nav li a.disabled {
background-color: #aaa !important;
color: #333 !important;
cursor: not-allowed !important;
border-color: #aaa !important;
}"

ui <- fluidPage(
  fluidPage(
    shinyjs::useShinyjs(),
    shinyjs::inlineCSS(css),
    titlePanel("Debarcoding"),
    tabsetPanel(id = "mainTabset",
                tabPanel(value = "gating", "Gating",
                         htmltools::br(" "),
                         sidebarLayout(
                           sidebarPanel(
                             p("gating_side_ui_1"),
                             actionButton("finish", "FINISH")
                           ),
                           mainPanel(
                             p("gating_scatter_ui_1")
                           ))),
                tabPanel(value = "saving", "Saving",
                         htmltools::br(" "),
                         sidebarLayout(
                           sidebarPanel(
                             p("saving_side_ui_1")
                           ),
                           mainPanel(
                             p("saving_scatter_ui_1")
                           ))))
  )
)

server <- function(input, output, session) {
  
  shinyjs::disable(selector = '.nav-tabs a[data-value="saving"')
  
  observeEvent(input$finish, {
    updateTabsetPanel(
      inputId = "mainTabset",
      selected = "saving"
    )
    shinyjs::enable(selector = '.nav-tabs a[data-value="saving"')
    shinyjs::disable(selector = '.nav-tabs a[data-value="gating"')
  })
}

shinyApp(ui, server)

推荐阅读