shinyMobile comes with 2 predefined layouts. The second layout is the f7TabLayout(), very similar to that of miniUI. By default, shinyMobile opens in light mode. However, specifying the f7Init() theme option to “dark” will enable this mode.
Additionally, the f7Init() function allows to change theme from material design to iOS.
library(shiny)
library(shinyMobile)
library(apexcharter)
library(shinyWidgets)
poll <- data.frame(
answer = c("Yes", "No"),
n = c(254, 238)
)
shinyApp(
ui = f7Page(
title = "My app",
init = f7Init(theme = "dark"),
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 = TRUE,
shadow = TRUE,
left_panel = TRUE,
right_panel = TRUE
),
f7Tabs(
animated = TRUE,
#swipeable = TRUE,
f7Tab(
tabName = "Tab 1",
icon = f7Icon("folder"),
active = TRUE,
f7Flex(
prettyRadioButtons(
inputId = "theme",
label = "Select a theme:",
thick = TRUE,
inline = TRUE,
selected = "md",
choices = c("ios", "md"),
animation = "pulse",
status = "info"
),
prettyRadioButtons(
inputId = "color",
label = "Select a color:",
thick = TRUE,
inline = TRUE,
selected = "dark",
choices = c("light", "dark"),
animation = "pulse",
status = "info"
)
),
tags$head(
tags$script(
'Shiny.addCustomMessageHandler("ui-tweak", function(message) {
var os = message.os;
var skin = message.skin;
if (os === "md") {
$("html").addClass("md");
$("html").removeClass("ios");
$(".tab-link-highlight").show();
} else if (os === "ios") {
$("html").addClass("ios");
$("html").removeClass("md");
$(".tab-link-highlight").hide();
}
if (skin === "dark") {
$("html").addClass("theme-dark");
} else {
$("html").removeClass("theme-dark");
}
});
'
)
),
f7Shadow(
intensity = 10,
hover = TRUE,
f7Card(
title = "Card header",
apexchartOutput("pie")
)
)
),
f7Tab(
tabName = "Tab 2",
icon = f7Icon("keyboard"),
active = FALSE,
f7Shadow(
intensity = 10,
hover = TRUE,
f7Card(
title = "Card header",
apexchartOutput("scatter")
)
)
),
f7Tab(
tabName = "Tab 3",
icon = f7Icon("layers_alt"),
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")
)
)
)
)
)
),
server = function(input, output, session) {
# river plot
dates <- reactive(seq.Date(Sys.Date() - 30, Sys.Date(), by = input$by))
output$pie <- renderApexchart({
apex(
data = poll,
type = "pie",
mapping = aes(x = answer, y = n)
)
})
output$scatter <- renderApexchart({
apex(
data = mtcars,
type = "scatter",
mapping = aes(
x = wt,
y = mpg,
fill = cyl
)
)
})
# datatable
output$data <- renderTable({
mtcars[, c("mpg", input$variable), drop = FALSE]
}, rownames = TRUE)
# send the theme to javascript
observe({
session$sendCustomMessage(
type = "ui-tweak",
message = list(os = input$theme, skin = input$color)
)
})
}
)