f7SplitLayout() is the third layout introduced with shinyMobile. This template is focused for tablet use. It is composed of a sidebar, and a main panel. The sidebar goes in its dedicated slot, corresponding to f7Panel(). While f7Panel() may also be embedded in both f7SingleLayout() and f7TabsLayout, it accepts extra arguments like f7PanelMenu() and f7PanelItem(), which are very similar to sidebar items of shinydashboard:
f7Panel(
title = "Sidebar",
side = "left",
theme = "light",
f7PanelMenu(
id = "menu",
f7PanelItem(tabName = "tab1", title = "Tab 1", icon = f7Icon("email"), active = TRUE),
f7PanelItem(tabName = "tab2", title = "Tab 2", icon = f7Icon("home"))
),
style = "reveal"
)The content must be passed in ... If you have a menu in the sidebar, you must use the corresponding body function, namely f7Items() and f7Item(). Particularly, the tabName argument provided in f7PanelItem() and f7Item() must exactly match (like in shinydashboard, again). If you don’t have any f7PanelMenu(), you can pass tags in the ... directly. However, this prevents you from having a tabbed navigation.
library(shiny)
library(shinyMobile)
library(echarts4r)
# polar diagram
df <- data.frame(
x = seq(50),
y = rnorm(50, 10, 3),
z = rnorm(50, 11, 2),
w = rnorm(50, 9, 2)
)
# sankey plot
sankey <- data.frame(
source = c("a", "b", "c", "d", "c"),
target = c("b", "c", "d", "e", "e"),
value = ceiling(rnorm(5, 10, 1)),
stringsAsFactors = FALSE
)
# webgl plot
vectors <- expand.grid(x = -3:3, y = -3:3)
mu <- 1
vectors$sx <- vectors$y
vectors$sy <- mu * (1 - vectors$x^2) * vectors$y - vectors$x
vectors$color <- log10(runif(nrow(vectors), 1, 10))
shiny::shinyApp(
ui = f7Page(
title = "My app",
init = f7Init(hideNavOnPageScroll = FALSE, hideTabsOnPageScroll = FALSE),
f7SplitLayout(
sidebar = f7Panel(
title = "Sidebar",
side = "left",
theme = "light",
f7PanelMenu(
id = "menu",
f7PanelItem(tabName = "tab1", title = "Tab 1", icon = f7Icon("email"), active = TRUE),
f7PanelItem(tabName = "tab2", title = "Tab 2", icon = f7Icon("home")),
f7PanelItem(tabName = "tab3", title = "Tab 3", icon = f7Icon("home"))
),
uiOutput("selected_tab"),
effect = "reveal"
),
navbar = f7Navbar(
title = "Split Layout",
hairline = FALSE,
shadow = TRUE
),
toolbar = f7Toolbar(
position = "bottom",
f7Link(label = "Link 1", src = "https://www.google.com"),
f7Link(label = "Link 2", src = "https://www.google.com", external = TRUE)
),
# main content
f7Items(
f7Item(
tabName = "tab1",
f7Sheet(
id = "sheet1",
label = "Plot Parameters",
orientation = "bottom",
swipeToClose = TRUE,
backdrop = TRUE,
f7Slider(
"obs",
"Number of observations:",
min = 0, max = 1000,
value = 500
)
),
br(),
plotOutput("distPlot")
),
f7Item(
tabName = "tab2",
f7Swiper(
id = "swiper",
spaceBetween = 100,
f7Slide(
f7Text(
inputId = "sankey_name",
label = "Sankey Name",
placeholder = "Plot Name"
),
echarts4rOutput("sankey_plot")
),
f7Slide(
df %>%
e_charts(x) %>%
e_polar() %>%
e_angle_axis(x) %>% # angle = x
e_radius_axis() %>%
e_bar(y, coord_system = "polar") %>%
e_scatter(z, coord_system = "polar")
)
)
),
f7Item(
tabName = "tab3",
f7Toggle(
inputId = "plot_show",
label = "Show Plot?",
checked = TRUE
),
echarts4rOutput("flow_plot")
)
)
)
),
server = function(input, output, session) {
observeEvent(input$obs, {
if (input$obs < 500) {
f7Notif(
text = paste0("The slider value is only ", input$obs, ". Please
increase it"),
icon = f7Icon("bolt_fill"),
title = "Alert",
titleRightText = Sys.Date(),
session = session
)
}
})
output$sankey_plot <- renderEcharts4r({
sankey %>%
e_charts() %>%
e_sankey(source, target, value) %>%
e_title(input$sankey_name)
})
output$selected_tab <- renderUI({
HTML(paste0("Access the currently selected tab: ", strong(input$menu)))
})
output$distPlot <- renderPlot({
dist <- rnorm(input$obs)
hist(dist)
})
output$flow_plot <- renderEcharts4r({
if (input$plot_show) {
vectors %>%
e_charts(x) %>%
e_flow_gl(y, sx, sy, color) %>%
e_visual_map(
min = 0, max = 1, # log 10
dimension = 4, # x = 0, y = 1, sx = 3, sy = 4
show = FALSE, # hide
inRange = list(
color = c('#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8',
'#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026')
)
) %>%
e_x_axis(
splitLine = list(show = FALSE)
) %>%
e_y_axis(
splitLine = list(show = FALSE)
)
}
})
}
)