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")
)Slot for f7Tab.
Slot for other items that could be part of the toolbar such as buttons or f7TabLink. This may be useful to open an f7Sheet from the tabbar.
Optional to get the id of the currently selected f7Tab.
Whether to allow finger swip. FALSE by default. Only for touch-screens. Not compatible with animated.
Whether to show transition between tabs. TRUE by default. Not compatible with swipeable.
Tabs style: c("toolbar", "segmented", "strong"). If style
is toolbar, then f7Tab have a toolbar behavior.
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(
title = "Tab 1",
tabName = "Tab1",
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(title = "Tab 2", tabName = "Tab2", "tab 2 text"),
f7Tab(title = "Tab 3", tabName = "Tab3", "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 = "Tab1",
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 = "Tab2",
icon = f7Icon("today"),
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 = "Tab3",
icon = f7Icon("cloud_upload"),
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)
}
)
}