twTabContent: Creates the Content Elements of Tabs

In shiny.tailwind: 'TailwindCSS' for Shiny Apps

Creates the Content Elements of Tabs

Description

This function only creates the content elements of tabs, the navigation elements can by created by the twTabNav() function. A full example is included in the example 06-sidebar-dashboard.

Usage

twTabContent(
  ...,
  ids = NULL,
  container_class = NULL,
  content_class = NULL,
  tabsetid = "tabSet1"
)

Arguments

...	UI element to include in the tab
ids	a list of reference IDs to the navigation elements. This will be overridden by ID fields of the ... values (if given). Default is twTab-{i}-content (note that the ids must end with -content where the part before matches the IDs of the navigation elements. Note that this option is only needed when multiple tab systems are used within a page or when the elements of the twTabContents are given out of order.
container_class	additional classes to be applied to the container
content_class	additional classes to be applied to each content container
tabsetid	an optional class that is added to the container to be identify and linked the tabsets. Must match the tabsetid of twTabContent(). Can be an arbitrary text, but due to it being a class, make sure to not have class-clashes (eg "button" would be a bad idea). This allows to have multiple nested tabsets. See also Example 09-nested-tabsets.

Details

Note that contrary how shiny::tabPanel() constructs a tab page, these funtions (twTabContent() and twTabNav()) construct navigation and content independently, allowing more flexibility.

The active elements all have either a twTab-active or twTabContent-active CSS class if their styling needs to be overriden (see also the example).

Value

a list with a shiny.tag class

See Also

twTabNav()

Examples

twTabContent(
  div(h1("First Tab"), shiny::plotOutput("plot1")),
  div(h1("Second Tab"), shiny::plotOutput("plot2"))
)

#############################################################################
# Example App

library(shiny)
# basic Tabs

ui_basic <- shiny::div(
  shiny::h1("Completely Unstyled Tabs..."),
  twTabNav(
    shiny::div("Tab 1 (click me)"),
    shiny::div("Tab 2 (click me)")
  ),
  twTabContent(
    shiny::div(shiny::h1("First Tab"), shiny::plotOutput("plot1")),
    shiny::div(shiny::h1("Second Tab"), shiny::plotOutput("plot2"))
  )
)

server <- function(input, output, session) {
  output$plot1 <- shiny::renderPlot({
    print("Plot 1")
    plot(1:10, rnorm(10))
  })
  output$plot2 <- shiny::renderPlot({
    print("Plot 2")
    plot(1:100, rnorm(100))
  })
}

if (interactive()) shiny::shinyApp(ui_basic, server)

#############################################################################
# Styled App

ui_styled <- shiny::div(
  class = "h-screen bg-white overflow-hidden flex",
  shiny.tailwind::use_tailwind(),
  twTabNav(
    shiny::div(icon("database"), shiny::span("Tab One", class = "pl-2")),
    shiny::div(icon("server"), shiny::span("Tab Two", class = "pl-2")),
    container_class = "h-full pt-10 pt-2 bg-indigo-900",
    tab_class = "cursor-pointer py-2 px-4 my-4 w-full text-white hover:bg-indigo-700"
  ),
  twTabContent(
    shiny::div(
      shiny::h1("First Tab",
        class = "p-10 text-center font-sans text-8xl font-extrabold text-slate-800"
      ),
      shiny::plotOutput("plot1")
    ),
    shiny::div(
      shiny::h1("Second Tab",
        class = "p-10 text-center font-sans text-8xl font-extrabold text-slate-800"
      ),
      shiny::plotOutput("plot2")
    ),
    container_class = "flex-1 bg-indigo-50"
  )
)

if (interactive()) shiny::shinyApp(ui_styled, server)

shiny.tailwind documentation built on Oct. 13, 2022, 9:06 a.m.