f7TabLayout: Framework7 tab layout

In shinyMobile: Mobile Ready 'shiny' Apps with Standalone Capabilities

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(s)

David Granjon, [e-mail]

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)
   }
 )
}

shinyMobile documentation built on Nov. 25, 2022, 5:05 p.m.