分頁標籤（Tab）版面

在同一頁面同時顯示多個表格和圖表，容易造成視覺雜亂，讓使用者分心。這種情況下，可以使用分頁標籤（tab）版面，將不同的輸出放在各自的分頁中。

在這個練習中，我們會從上一題使用側邊欄版面的 Shiny 應用程式開始，並把它改成使用分頁標籤。你也會清楚看到，只要對程式碼做少量修改，Shiny 就能很容易地切換版面配置。

最後完成的應用程式應該長得像這樣：

一個應用程式：左側側邊欄有姓名選擇器，右側主面板以分頁方式顯示圖表與表格

本練習屬於課程

使用 R 的 Shiny 建立網頁應用程式

檢視課程

練習說明

修改這個應用程式的版面，讓姓名選擇器出現在側邊欄，並讓圖和表分別在右側以獨立分頁呈現。別忘了幫分頁加上標籤！

動手互動練習

試著完成這個範例程式碼，體驗一下這個練習。

ui <- fluidPage(
  sidebarLayout(
    sidebarPanel(
      selectInput('name', 'Select Name', top_trendy_names$name)
    ),
    mainPanel(
      # MODIFY CODE BLOCK BELOW: Wrap in a tabsetPanel
        # MODIFY CODE BELOW: Wrap in a tabPanel providing an appropriate label
        plotly::plotlyOutput('plot_trendy_names'),
        # MODIFY CODE BELOW: Wrap in a tabPanel providing an appropriate label
        DT::DTOutput('table_trendy_names')
    )
  )
)

server <- function(input, output, session){
  # Function to plot trends in a name
  plot_trends <- function(){
     babynames %>% 
      filter(name == input$name) %>% 
      ggplot(aes(x = year, y = n)) +
      geom_col()
  }
  output$plot_trendy_names <- plotly::renderPlotly({
    plot_trends()
  })
  
  output$table_trendy_names <- DT::renderDT({
    babynames %>% 
      filter(name == input$name)
  })
}

shinyApp(ui = ui, server = server)

編輯並執行程式碼