f7Popup | R Documentation |
f7Popup
creates a popup window with any UI content that pops up over App's main content.
Popup as all other overlays is part of so called "Temporary Views".
f7Popup(
...,
id,
title = NULL,
backdrop = TRUE,
closeByBackdropClick = TRUE,
closeOnEscape = FALSE,
animate = TRUE,
swipeToClose = FALSE,
fullsize = FALSE,
closeButton = TRUE,
session = shiny::getDefaultReactiveDomain()
)
... |
UI elements for the body of the popup window. |
id |
Popup unique id. Useful if you want to access the popup state. input$<id> is TRUE when the popup is opened and inversely. |
title |
Title for the popup window, use |
backdrop |
Enables Popup backdrop (dark semi transparent layer behind).
Default to |
closeByBackdropClick |
When enabled, popup will be closed on backdrop click.
Default to |
closeOnEscape |
When enabled, popup will be closed on ESC keyboard key press.
Default to |
animate |
Whether the Popup should be opened/closed with animation or not.
Default to |
swipeToClose |
Whether the Popup can be closed with swipe gesture.
Can be true to allow to close popup with swipes to top and to bottom.
Default to |
fullsize |
Open popup in full width or not. Default to |
closeButton |
Add or not a button to easily close the popup.
Default to |
session |
Shiny session object. |
if (interactive()) {
library(shiny)
library(shinyMobile)
shinyApp(
ui = f7Page(
title = "Popup",
f7SingleLayout(
navbar = f7Navbar(
title = "f7Popup",
hairline = FALSE,
shadow = TRUE
),
f7Button("togglePopup", "Toggle Popup")
)
),
server = function(input, output, session) {
output$popupContent <- renderPrint(input$text)
observeEvent(input$togglePopup, {
f7Popup(
id = "popup1",
title = "My first popup",
f7Text("text", "Popup content", "This is my first popup ever, I swear!"),
verbatimTextOutput("popupContent")
)
})
observeEvent(input$popup1, {
popupStatus <- if (input$popup1) "opened" else "closed"
f7Toast(
position = "top",
text = paste("Popup is", popupStatus)
)
})
}
)
}
Add the following code to your website.
For more information on customizing the embed code, read Embedding Snippets.