f7SplitLayout() is the third layout introduced with
{shinyMobile}. This template is focused for tablet/desktop
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(ggplot2)
library(shinyMobile)
library(apexcharter)
fruits <- data.frame(
name = c('Apples', 'Oranges', 'Bananas', 'Berries'),
value = c(44, 55, 67, 83)
)
new_mtcars <- reshape(
data = head(mtcars),
idvar = "model",
varying = list(c("drat", "wt")),
times = c("drat", "wt"),
direction = "long",
v.names = "value",
drop = c("mpg", "cyl", "hp", "dist", "qsec", "vs", "am", "gear", "carb")
)
shinyApp(
ui = f7Page(
title = "My app",
options = list(
theme = "aurora",
dark = TRUE,
filled = FALSE,
color = "#007aff",
touch = list(
tapHold = TRUE,
tapHoldDelay = 750,
iosTouchRipple = FALSE
),
iosTranslucentBars = FALSE,
navbar = list(
iosCenterTitle = TRUE,
hideNavOnPageScroll = TRUE
),
toolbar = list(
hideNavOnPageScroll = FALSE
),
pullToRefresh = FALSE
),
f7SplitLayout(
sidebar = f7Panel(
title = "Sidebar",
side = "left",
theme = "light",
f7PanelMenu(
id = "menu",
f7PanelItem(
tabName = "tab1",
title = "Tab 1",
icon = f7Icon("equal_circle"),
active = TRUE
),
f7PanelItem(
tabName = "tab2",
title = "Tab 2",
icon = f7Icon("equal_circle")
),
f7PanelItem(
tabName = "tab3",
title = "Tab 3",
icon = f7Icon("equal_circle")
)
),
uiOutput("selected_tab"),
effect = "reveal"
),
navbar = f7Navbar(
title = "Split Layout",
hairline = FALSE,
shadow = TRUE
),
toolbar = f7Toolbar(
position = "bottom",
f7Link(label = "Link 1", href = "https://www.google.com"),
f7Link(label = "Link 2", href = "https://www.google.com")
),
# main content
f7Items(
f7Item(
tabName = "tab1",
f7Button("toggleSheet", "Plot parameters"),
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",
apexchartOutput("radar")
),
f7Item(
tabName = "tab3",
f7Toggle(
inputId = "plot_show",
label = "Show Plot?",
checked = TRUE
),
apexchartOutput("multi_radial")
)
)
)
),
server = function(input, output, session) {
observeEvent(input$toggleSheet, {
updateF7Sheet(id = "sheet1")
})
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()
)
}
})
output$radar <- renderApexchart({
apex(
data = new_mtcars,
type = "radar",
mapping = aes(
x = model,
y = value,
group = time)
)
})
output$selected_tab <- renderUI({
HTML(paste0("Access the currently selected tab: ", strong(input$menu)))
})
output$distPlot <- renderPlot({
dist <- rnorm(input$obs)
hist(dist)
})
output$multi_radial <- renderApexchart({
if (input$plot_show) {
apex(data = fruits, type = "radialBar", mapping = aes(x = name, y = value))
}
})
}
)