如何在 R Shiny 中实现此网格和选项卡结构？

How do I achieve this grid and tab structure in R Shiny?

提问人：Arnau G. 提问时间：11/3/2023 更新时间：11/9/2023 访问量：65

问：

我在 Shiny 应用程序中具有以下网格和选项卡结构。

期望的结果

我想要达到的是，为我在左列中选择的每个数据集设置一个不同的tabsetPanel。

所以基本上我会有一个“主”左列——如果用户愿意，可以隐藏它——以及一个中央面板，在左列上选择任何数据集都有不同的选项卡。

这是当前代码：

library(shiny)
library(plotly)
library(gridlayout)
library(bslib)

ui <- grid_page(
  layout = c(
    "header  header",
    "sidebar Impost"
  ),
  row_sizes = c(
    "40px",
    "1fr"
  ),
  col_sizes = c(
    "165px",
    "1fr"
  ),
  gap_size = "1rem",
  grid_card(
    area = "sidebar",
    card_header("DATASET Simulator"),
    card_body(
      selectInput(
        inputId = "dataset",
        label = "DATASET",
        choices = list(
          "Dataset 1" = "Dataset 1",
          "Dataset 2" = "Dataset 2",
          "Dataset 3" = "Dataset 3"
        ),
        selected = "Dataset 1",
        width = "100%"
      ),
      em("Select the type of dataset you want to simulate.")
    )
  ),
  grid_card_text(
    area = "header",
    content = "Dataset Simulation Project",
    alignment = "start",
    is_title = FALSE
  ),
  grid_card(
    area = "Impost",
    full_screen = TRUE,
    card_header("Dataset 1"),
    card_body(
      tabsetPanel(
        nav_panel(title = "Parameters"),
        nav_panel(title = "Results 1"),
        nav_panel(title = "Results 2")
      )
    )
  )
)

server <- function(input, output) { 
}

shinyApp(ui, server)

我已经查看了 Mastering Shiny 一书、许多互联网资源，并使用了新的 Shiny UI 编辑器，但我对如何实现它感到茫然。

R 亮闪 亮仪表板

评论

0赞 Susan Switzer 11/4/2023
你有没有研究过使用 shinydashboardplus 它是 rightSidebar（） 函数？rdocumentation.org/packages/shinydashboardPlus/versions/0.2

答：

1赞 Gonzalo T F 11/4/2023 #1

Shinydashboard 允许您轻松创建这样的结构。

我希望这能奏效。

## app.R ##
library(shiny)
library(shinydashboard)

ui <- dashboardPage(
  dashboardHeader(title = "Dataset Simulation Project"),
  dashboardSidebar(
    h3("Dataset Simulator"),
    selectInput("dataset", label = h3("DATASET"), 
                choices = list( "Dataset 1" = "Dataset 1",
                                "Dataset 2" = "Dataset 2",
                                "Dataset 3" = "Dataset 3"), 
                selected = 1)
  ),
  dashboardBody(
    h2(uiOutput("selectedValue")),
    tabsetPanel(type = "tabs",
                tabPanel("Parameters", plotOutput("plot")),
                tabPanel("Results 1", verbatimTextOutput("summary")),
                tabPanel("Results 2", tableOutput("table"))
    )
  )
)

server <- function(input, output) {
  
  # You can access the value of the widget with input$select, e.g.
  output$selectedValue <-   renderUI({
    selected_option <- input$dataset
    h2(selected_option)})
    }

shinyApp(ui, server)

评论

0赞 Arnau G. 11/9/2023
不过，这只会更改标题，我想像 YBS 的响应一样更改整个面板。尽管如此，闪亮的仪表板的 UI 看起来相当不错。
1赞 YBS 11/4/2023 #2

您可以使用来获得所需的输出。conditionalPanel()

library(shiny)
library(plotly)
library(gridlayout)
library(bslib)

ui <- grid_page(
  layout = c(
    "header  header",
    "sidebar Impost"
  ),
  row_sizes = c(
    "40px",
    "1fr"
  ),
  col_sizes = c(
    "165px",
    "1fr"
  ),
  gap_size = "1rem",
  grid_card(
    area = "sidebar",
    card_header("DATASET Simulator"),
    card_body(
      selectInput(
        inputId = "dataset",
        label = "DATASET",
        choices = list(
          "Dataset 1" = "Dataset 1",
          "Dataset 2" = "Dataset 2",
          "Dataset 3" = "Dataset 3"
        ),
        selected = "Dataset 1",
        width = "100%"
      ),
      em("Select the type of dataset you want to simulate.")
    )
  ),
  grid_card_text(
    area = "header",
    content = "Dataset Simulation Project",
    alignment = "start",
    is_title = FALSE
  ),
  grid_card(
    area = "Impost",
    full_screen = TRUE,
    #card_header("Dataset 1"),
    card_header(conditionalPanel( condition = "input.dataset == 'Dataset 1'", "Dataset 1"),
                conditionalPanel( condition = "input.dataset == 'Dataset 2'", "Dataset 2"),
                conditionalPanel( condition = "input.dataset == 'Dataset 3'", "Dataset 3")
                ),
    card_body(
      conditionalPanel( condition = "input.dataset == 'Dataset 1'", 
                        tabsetPanel(id = "tabs1", type = c("tabs"), 
                                    nav_panel(title = "Parameters"),
                                    nav_panel(title = "Results 1"),
                                    nav_panel(title = "Results 2")
                        )
      ),
      conditionalPanel( condition = "input.dataset == 'Dataset 2'",
                        tabsetPanel(id = "tabs2", type = c("tabs"),
                                    nav_panel(title = "Parameters2"),
                                    nav_panel(title = "Results 21"),
                                    nav_panel(title = "Results 22")
                        )
      )
    )
  ) 
)

server <- function(input, output) {
  
}

shinyApp(ui, server)

output

确实，您可以使用功能来实现相同的目的。shinydashboardtabBox

评论

0赞 Arnau G. 11/9/2023
谢谢，这正是我一直在寻找的。我不认为赞成票会显示出来，因为我需要更多的声誉来投票。
2赞 Arnau G. 11/9/2023 #3

感谢 YBS 和 Gonzalo T F。最后，我混合了您的答案，通过闪亮的仪表板和条件面板创建了以下正文：

dashboardBody(
#dataset 1
conditionalPanel(condition = "input.dataset == 'dataset1'",
                 card_header('Data 1') %>% h2,
                 card_body(
                   tabsetPanel(
                     id = "tabs1",
                     type = c("tabs"),
                     nav_panel(title = "P 1"),
                     nav_panel(title = "R 1"),
                     nav_panel(title = "G 1")
                     )
                   )
                 ),
#dataset 2
conditionalPanel(condition = "input.dataset == 'dataset2'",
                 card_header('Data 2') %>% h2,
                 card_body(
                   tabsetPanel(
                     id = "tabs1",
                     type = c("tabs"),
                     nav_panel(title = "P 2"),
                     nav_panel(title = "R 2"),
                     nav_panel(title = "G 2")
                     )
                   )
                 )
)

上一个：在 R 中修改 Datatable 中 Shiny Dashboard 的标题高度

下一个：为什么 treeInput 扩展器消失了？