shinyMobile (version 1.0.1)

f7TabLayout: Framework7 tab layout

Description

f7TabLayout create a single page app with multiple tabs, giving the illusion of a multi pages experience.

Usage

f7TabLayout(..., navbar, messagebar = NULL, panels = NULL, appbar = NULL)

Arguments

...

Slot for f7Tabs.

navbar

Slot for f7Navbar.

messagebar

Slot for f7MessageBar.

panels

Slot for f7Panel. Wrap in tagList if multiple panels.

appbar

Slot for f7Appbar.

Author

David Granjon,

Examples

if(interactive()){
 library(shiny)
 library(shinyMobile)
 library(shinyWidgets)

 shinyApp(
   ui = f7Page(
     title = "Tab layout",
     f7TabLayout(
       tags$head(
         tags$script(
           "$(function(){
               $('#tapHold').on('taphold', function () {
                 app.dialog.alert('Tap hold fired!');
               });
             });
             "
         )
       ),
       panels = tagList(
         f7Panel(title = "Left Panel", side = "left", theme = "light", "Blabla", effect = "cover"),
         f7Panel(title = "Right Panel", side = "right", theme = "dark", "Blabla", effect = "cover")
       ),
       navbar = f7Navbar(
         title = "Tabs",
         hairline = FALSE,
         shadow = TRUE,
         leftPanel = TRUE,
         rightPanel = TRUE
       ),
       f7Tabs(
         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("distPlot1"),
               footer = tagList(
                 f7Button(inputId = "tapHold", label = "My button"),
                 f7Badge("Badge", color = "green")
               )
             )
           )
         ),
         f7Tab(
           tabName = "Tab2",
           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"),
               footer = tagList(
                 f7Button(label = "My button", href = "https://www.google.com"),
                 f7Badge("Badge", color = "orange")
               )
             )
           )
         ),
         f7Tab(
           tabName = "Tab3",
           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"),
               footer = tagList(
                 f7Button(label = "My button", href = "https://www.google.com"),
                 f7Badge("Badge", color = "green")
               )
             )
           )
         )
       )
     )
   ),
   server = function(input, output) {
     output$distPlot1 <- 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)
   }
 )
}