Overlay | R Documentation |
Overlays are used to render a semi-transparent layer on top of existing UI. Overlays help focus the user on the content that sits above the added layer and are often used to help designate a modal or blocking experience. Overlays can be seen used in conjunction with Panels and Dialogs.
For more details and examples visit the official docs. The R package can not handle each and every case, so for advanced use cases you need to work using the original docs to achieve the desired result.
Overlay(...)
... |
Props to pass to |
allowTouchBodyScroll boolean
Allow body scroll on touch devices. Changing after mounting has no effect.
className string
Additional css class to apply to the Overlay
componentRef IRefObject<IOverlay>
Gets the component ref.
isDarkThemed boolean
Whether to use the dark-themed overlay.
onClick () => void
styles IStyleFunctionOrObject<IOverlayStyleProps, IOverlayStyles>
Call to provide customized styling that will layer on top of the variant rules
theme ITheme
Theme provided by HOC.
library(shiny.fluent) if (interactive()) { shinyApp( ui = div( DefaultButton.shinyInput("toggleOverlay", text = "Open Overlay"), reactOutput("overlay") ), server = function(input, output) { show <- reactiveVal(FALSE) observeEvent(input$toggleOverlay, show(!show())) output$overlay <- renderReact({ if (show()) { Overlay( onClick = JS("function() { Shiny.setInputValue('toggleOverlay', Math.random()); }"), isDarkThemed = TRUE, div( style="background: white; width: 50vw; height: 20rem; margin: auto;", div( style = "padding: 2rem;", h1("Inside Overlay"), p("Click anywhere to hide.") ) ) ) } }) } ) }
Add the following code to your website.
For more information on customizing the embed code, read Embedding Snippets.