# Tabs-Layout

#### David Granjon

#### 2019-11-27

shinyMobile comes with 2 predefined layouts. The second layout is the `f7TabLayout()`, very similar to that of miniUI.

The `f7Init()` function allows to change theme from material design to iOS.

    library(shiny)
    library(shinyMobile)
    library(shinyWidgets)

    shiny::shinyApp(
      ui = f7Page(
        title = "My app",
        f7TabLayout(
          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,
            left_panel = TRUE,
            right_panel = TRUE
          ),
          f7Tabs(
            animated = TRUE,
            #swipeable = TRUE,
            f7Tab(
              tabName = "Tab 1",
              icon = f7Icon("email"),
              active = TRUE,
              f7Shadow(
                intensity = 10,
                hover = TRUE,
                f7Card(
                  title = "Card header",
                  sliderInput("obs1", "Number of observations", 0, 1000, 500),
                  plotOutput("distPlot1"),
                  footer = tagList(
                    f7Button(color = "blue", label = "My button", src = "https://www.google.com"),
                    f7Badge("Badge", color = "green")
                  )
                )
              )
            ),
            f7Tab(
              tabName = "Tab 2",
              icon = f7Icon("today"),
              active = FALSE,
              f7Shadow(
                intensity = 10,
                hover = TRUE,
                f7Card(
                  title = "Card header",
                  prettyRadioButtons(
                    "obs2",
                    "Distribution type:",
                    c("Normal" = "norm",
                      "Uniform" = "unif",
                      "Log-normal" = "lnorm",
                      "Exponential" = "exp"),
                    inline = TRUE,
                    status = "warning",
                    animation = "pulse"
                  ),
                  plotOutput("distPlot2"),
                  footer = tagList(
                    f7Button(color = "blue", label = "My button", src = "https://www.google.com"),
                    f7Badge("Badge", color = "green")
                  )
                )
              )
            ),
            f7Tab(
              tabName = "Tab 3",
              icon = f7Icon("cloud_upload"),
              active = FALSE,
              f7Shadow(
                intensity = 10,
                hover = TRUE,
                f7Card(
                  title = "Card header",
                  prettyCheckboxGroup(
                    "variable",
                    "Variables to show:",
                    c("Cylinders" = "cyl",
                      "Transmission" = "am",
                      "Gears" = "gear"),
                    inline = TRUE,
                    status = "danger",
                    animation = "pulse"
                  ),
                  tableOutput("data"),
                  footer = tagList(
                    f7Button(color = "blue", label = "My button", src = "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)
      }
    )