f7Panel | R Documentation |
f7Panel
is a sidebar element. It may be used as a simple
sidebar or as a container for f7PanelMenu in case of
f7SplitLayout.
updateF7Panel
toggles an f7Panel from the server.
f7Panel( ..., id = NULL, title = NULL, side = c("left", "right"), theme = c("dark", "light"), effect = c("reveal", "cover"), resizable = FALSE ) updateF7Panel(id, session = shiny::getDefaultReactiveDomain())
... |
Panel content. Slot for f7PanelMenu, if used as a sidebar. |
id |
Panel unique id. |
title |
Panel title. |
side |
Panel side: "left" or "right". |
theme |
Panel background color: "dark" or "light". |
effect |
Whether the panel should behave when opened: "cover" or "reveal". |
resizable |
Whether to enable panel resize. FALSE by default. |
session |
Shiny session object. |
David Granjon, dgranjon@ymail.com
if (interactive()) { library(shiny) library(shinyMobile) shinyApp( ui = f7Page( title = "Panels", f7SingleLayout( navbar = f7Navbar( title = "Single Layout", hairline = FALSE, shadow = TRUE, leftPanel = TRUE, rightPanel = TRUE ), panels = tagList( f7Panel(side = "left", id = "mypanel1"), f7Panel(side = "right", id = "mypanel2") ), toolbar = f7Toolbar( position = "bottom", icons = TRUE, hairline = FALSE, shadow = FALSE, f7Link(label = "Link 1", href = "https://www.google.com"), f7Link(label = "Link 2", href = "https://www.google.com") ), # main content f7Shadow( intensity = 10, hover = TRUE, f7Card( title = "Card header", sliderInput("obs", "Number of observations", 0, 1000, 500), h1("You only see me by opening the left panel"), plotOutput("distPlot"), footer = tagList( f7Button(color = "blue", label = "My button", href = "https://www.google.com"), f7Badge("Badge", color = "green") ) ) ) ) ), server = function(input, output, session) { observeEvent(input$mypanel2, { state <- if (input$mypanel2) "open" else "closed" f7Toast( text = paste0("Right panel is ", state), position = "center", closeTimeout = 1000, closeButton = FALSE ) }) output$distPlot <- renderPlot({ if (input$mypanel1) { dist <- rnorm(input$obs) hist(dist) } }) } ) } # Toggle panel if (interactive()) { library(shiny) library(shinyMobile) shinyApp( ui = f7Page( title = "Update panel menu", f7SingleLayout( navbar = f7Navbar( title = "Single Layout", hairline = FALSE, shadow = TRUE, leftPanel = TRUE, rightPanel = TRUE ), panels = tagList( f7Panel(side = "left", id = "mypanel1", theme = "light", effect = "cover"), f7Panel(side = "right", id = "mypanel2", theme = "light") ), toolbar = f7Toolbar( position = "bottom", icons = TRUE, hairline = FALSE, shadow = FALSE, f7Link(label = "Link 1", href = "https://www.google.com"), f7Link(label = "Link 2", href = "https://www.google.com") ) ) ), server = function(input, output, session) { observe({ print( list( panel1 = input$mypanel1, panel2 = input$mypanel2 ) ) }) observe({ invalidateLater(2000) updateF7Panel(id = "mypanel1") }) } ) }
Add the following code to your website.
For more information on customizing the embed code, read Embedding Snippets.