Create a tabset panel

Create a tabset that contains tabPanel() elements. Tabsets are useful for dividing output into multiple independently viewable sections.

tabsetPanel(
  ...,
  id = NULL,
  selected = NULL,
  type = c("tabs", "pills", "hidden"),
  position = deprecated()
)

Arguments

...	`tabPanel()` elements to include in the tabset
id	If provided, you can use `input$``id` in your server logic to determine which of the current tabs is active. The value will correspond to the `value` argument that is passed to `tabPanel()`.
selected	The `value` (or, if none was supplied, the `title`) of the tab that should be selected by default. If `NULL`, the first tab will be selected.
type	`"tabs"` Standard tab look `"pills"` Selected tabs use the background fill color `"hidden"` Hides the selectable tabs. Use `type = "hidden"` in conjunction with `tabPanelBody()` and `updateTabsetPanel()` to control the active tab via other input controls. (See example below)
position	This argument is deprecated; it has been discontinued in Bootstrap 3.

Value

A tabset that can be passed to mainPanel()

Examples

# Show a tabset that includes a plot, summary, and
# table view of the generated distribution
mainPanel(
  tabsetPanel(
    tabPanel("Plot", plotOutput("plot")),
    tabPanel("Summary", verbatimTextOutput("summary")),
    tabPanel("Table", tableOutput("table"))
  )
)
#> <div class="col-sm-8" role="main">
#>   <div class="tabbable">
#>     <ul class="nav nav-tabs" data-tabsetid="2535">
#>       <li class="active">
#>         <a href="#tab-2535-1" data-toggle="tab" data-value="Plot">Plot</a>
#>       </li>
#>       <li>
#>         <a href="#tab-2535-2" data-toggle="tab" data-value="Summary">Summary</a>
#>       </li>
#>       <li>
#>         <a href="#tab-2535-3" data-toggle="tab" data-value="Table">Table</a>
#>       </li>
#>     </ul>
#>     <div class="tab-content" data-tabsetid="2535">
#>       <div class="tab-pane active" data-value="Plot" id="tab-2535-1">
#>         <div id="plot" class="shiny-plot-output" style="width:100%;height:400px;"></div>
#>       </div>
#>       <div class="tab-pane" data-value="Summary" id="tab-2535-2">
#>         <pre class="shiny-text-output noplaceholder" id="summary"></pre>
#>       </div>
#>       <div class="tab-pane" data-value="Table" id="tab-2535-3">
#>         <div id="table" class="shiny-html-output"></div>
#>       </div>
#>     </div>
#>   </div>
#> </div>

ui <- fluidPage(
  sidebarLayout(
    sidebarPanel(
      radioButtons("controller", "Controller", 1:3, 1)
    ),
    mainPanel(
      tabsetPanel(
        id = "hidden_tabs",
        # Hide the tab values.
        # Can only switch tabs by using `updateTabsetPanel()`
        type = "hidden",
        tabPanelBody("panel1", "Panel 1 content"),
        tabPanelBody("panel2", "Panel 2 content"),
        tabPanelBody("panel3", "Panel 3 content")
      )
    )
  )
)

server <- function(input, output, session) {
  observeEvent(input$controller, {
    updateTabsetPanel(session, "hidden_tabs", selected = paste0("panel", input$controller))
  })
}

if (interactive()) {
  shinyApp(ui, server)
}

Arguments

Value

See also

Examples