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(...)

Arguments

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.

Examples

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.")
              )
            )
          )
        }
      })
    }
  )
}