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