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