knitr::opts_chunk$set( collapse = TRUE, comment = "#>" )
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.
shinyMobile:::app_container( "https://dgranjon.shinyapps.io/miniUI2Split", deps = TRUE, skin = "ipadMini", color = "black" )
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)) } }) } )
Any scripts or data that you put into this service are public.
Add the following code to your website.
For more information on customizing the embed code, read Embedding Snippets.