By default, f7Tabs are used within the f7TabLayout. However, you may use them as standalone components if you specify a the segmented or strong styles.

f7Tabs(
  ...,
  .items = NULL,
  id = NULL,
  swipeable = FALSE,
  animated = TRUE,
  style = c("toolbar", "segmented", "strong")
)

Arguments

...

Slot for f7Tab.

.items

Slot for other items that could be part of the toolbar such as buttons or f7TabLink. This may be useful to open a f7Sheet from the tabbar.

id

Optional to get the id of the currently selected f7Tab.

swipeable

Whether to allow finger swip. FALSE by default. Only for touch-screens. Not compatible with animated.

animated

Whether to show transition between tabs. TRUE by default. Not compatible with swipeable.

style

Tabs style: c("toolbar", "segmented", "strong"). If style is toolbar, then f7Tab have a toolbar behavior.

Author

David Granjon, dgranjon@ymail.com

Examples

if (interactive()) { # tabs as toolbar library(shiny) library(shinyMobile) shiny::shinyApp( ui = f7Page( title = "Tab Layout", f7TabLayout( navbar = f7Navbar(title = HTML(paste("Currently selected:", textOutput("selected")))), f7Tabs( id = "tabdemo", swipeable = TRUE, animated = FALSE, f7Tab( tabName = "Tab 1", f7Sheet( id = "sheet", label = "More", orientation = "bottom", swipeToClose = TRUE, swipeToStep = TRUE, backdrop = TRUE, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ac diam ac quam euismod porta vel a nunc. Quisque sodales scelerisque est, at porta justo cursus ac" ) ), f7Tab(tabName = "Tab 2", "tab 2 text"), f7Tab(tabName = "Tab 3", "tab 3 text"), .items = f7TabLink( icon = f7Icon("bolt_fill"), label = "Toggle Sheet", `data-sheet` = "#sheet", class = "sheet-open" ) ) ) ), server = function(input, output) { output$selected <- renderText(input$tabdemo) } ) # standalone tabs library(shiny) library(shinyMobile) shiny::shinyApp( ui = f7Page( title = "My app", f7SingleLayout( navbar = f7Navbar( title = "Standalone tabs", hairline = FALSE, shadow = TRUE ), f7Tabs( id = "tabs", style = "strong", animated = FALSE, swipeable = TRUE, f7Tab( tabName = "Tab 1", icon = f7Icon("envelope"), active = TRUE, f7Shadow( intensity = 10, hover = TRUE, f7Card( title = "Card header", f7Stepper( "obs1", "Number of observations", min = 0, max = 1000, value = 500, step = 100 ), plotOutput("distPlot") ) ) ), f7Tab( tabName = "Tab 2", icon = f7Icon("today"), active = FALSE, f7Shadow( intensity = 10, hover = TRUE, f7Card( title = "Card header", f7Select( inputId = "obs2", label = "Distribution type:", choices = c( "Normal" = "norm", "Uniform" = "unif", "Log-normal" = "lnorm", "Exponential" = "exp" ) ), plotOutput("distPlot2") ) ) ), f7Tab( tabName = "Tab 3", icon = f7Icon("cloud_upload"), active = FALSE, f7Shadow( intensity = 10, hover = TRUE, f7Card( title = "Card header", f7SmartSelect( inputId = "variable", label = "Variables to show:", c("Cylinders" = "cyl", "Transmission" = "am", "Gears" = "gear"), multiple = TRUE, selected = "cyl" ), tableOutput("data") ) ) ) ) ) ), server = function(input, output) { output$distPlot <- renderPlot({ dist <- rnorm(input$obs1) hist(dist) }) output$distPlot2 <- renderPlot({ dist <- switch( input$obs2, norm = rnorm, unif = runif, lnorm = rlnorm, exp = rexp, rnorm ) hist(dist(500)) }) output$data <- renderTable({ mtcars[, c("mpg", input$variable), drop = FALSE] }, rownames = TRUE) } ) }